Transcendence

You made it!

This is the final lesson on the road to HTML mastery. There will be plenty of wisdom to learn during your travels, but after this lesson you will officially become an HTML master.

There is more to being a web designer than understanding how HTML works, but without that understanding any mastery is impossible. A true expert should not rely on WYSIWYG editors or any other gimmicks.

From this point on you will be in complete control of your work and your destiny.

Before we part, I need to give you one last piece of of secret knowledge.

 

Most modern high-quality web pages you encounter are NOT written in HTML.

 

Yes, you heard me right. Then why did we bother learning all this junk, you might ask. The answer is simple: instead of HTML, we now use a more appropriate language, almost identical to HTML. The modern markup language of choice is called XHTML (Extensible HyperText Markup Language). I won't go into the theory of why we use XHTML instead of plain old HTML. One of the big reasons is that more and more devices and software applications access information on the web. A designer can't rely on the knowledge that someone will be accessing his or her page through a web browser running on a desktop or laptop. iPhone, Blackberry, cell phones, etc etc - they all have access to the web and we need to make sure that our page reads just as well on those devices as it does using a regular web browser.

Think of XHTML as a very strict brother of HTML

And don't worry - nothing that you learned so far will be wasted. Every single tag you now know is used in XHTML for the same purposes as you were using them in HTML.

Here's is everything you need to know in order to write a solid working XHTML page:

  • 1. Every opening tag must be matched by a closing tag
    If the tag in question is unpaired, it should look like this <tag />. Notice the space between the tag and the slash.
    Example: <br />, <img src="" alt="" />, <input type="" name="" value="" />
  • 2. Tags should always be typed in small caps: always do <html>, never <HTML>
  • 3. Every page should have it's Document Type Declaration (DOCTYPE) specified right at the top
  • 4. Every <img> should have the alt attribute and property present

That's it. If you can fulfill these conditions, you can write a perfectly legitimate xhtml page. And before I forget, although we write pages using xhtml we still mark them as html, meaning index.html should have an .html extension whether you wrote it in html or xhtml

Let's take a look at this DOCTYPE thing. For our purposes and in plain English, we specify a particular doctype to tell the browser's layout engine which mode to display a page in. Or we can also say that we use doctype to tell the browser which markup language we are using: HTML or XHTML.

Just remember that the doctype declaration is the first thing that should appear on the first line of the page source, even before <html>. Here's what it looks like:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
   <html>
      <head>
         <title>
            Transcendence
         </title>      
      </head>
      <body>

      </body>
</html>
					

 

You will most likely specify the same doctype for every single page of every single site that you make. My doctype of choice is XHTML 1.0 Transitional and the full doctype that I use 99% of the time looks like this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/xhtml1/DTDxhtml1-transitional.dtd">
					

 

Also notice that HTML doctypes are usually declared like this:
<!DOCTYPE HTML PUBLIC...
while XHTML doctypes are declared like this:
<!DOCTYPE html PUBLIC ...
the different is the capitalization of html

To review the complete list of available doctypes please take a look at the doctype article on Wikipedia

 

In addition to doctype, xhtml 1.0 and xhtml 1.1 elements must be in the appropriate XML namespace. Indicating the appropriate encoding type is a good idea too. If you don't understand any of this, don't worry. I don't understand it completely either. Just remember that you need it. If you want to dig deeper into this, keep reading this page: Wikipedia article on XHMTL

So here's what an xhtml page should look like. Notice the namespace declarations inside the html tag and the encoding declaration inside the first meta tag:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>
            Transcendence
         </title>      
      </head>
      <body>

      </body>
</html>
					

 

You should have a solid understanding of how (x)HTML works and where to look for more information. Hope I took the mystery out of it for you. And if you think it's easy - you are right. Understanding (x)HTML is not hard at all. Using it to build mindblowing layouts is the real challenge.

So before you list master level knowledge of HTML as one of the skills on your resume and apply for a designer position, pick up a few simple web projects from your family members or friends. It will serve as great real world experience and will also give you an appreciation for the craft.

It is up to you to decide where you will take your new knowledge and skills, but no matter what you choose I would like to wish you 4 things: be courageous, be curious, be humble, and always use the validator.

Thank you for a being a part of my dojo and for spending time with me. I wish you all the best. My dojo is your dojo

 

>> End of HTML Tutorials:
Home | Portfolio | Contact

 

Inside the Web Dojo

the HTML chamber