learn web technologies, the easy way

XHTML (or eXtensible HyperText Markup Language) is THE way to code websites. Why, you ask? Maybe you didn’t ask, but I’m going to tell you anyway!

The web started out with HTML release 1.0. Over the years features were added and HTML has grown to HTML 4.1 (and, as of this writing there’s a new working draft covering HTML 5.0). HTML is very forgiving and flexible. That allows an author to create a page that works pretty well without too much care. So why not code in plain HTML?

The reason is that the world (and the World Wide Web) is quickly moving towards XML (eXtensible Markup Language) and standards-based web pages. Standards introduced by the World Wide Web Consortium (W3C) and other groups like " The Web Standards Project" are introduced to help move the state-of-the-art forward. This also improves and documents best-practices that should be used by all web developers.

XHTML isn’t really difficult at all, in fact it’s almost the same as plain HTML. You just need to include a few extra lines in your page, and make sure you follow a few rules, then your writing XHTML!

Here are the lines you need to add to the top of your page:

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

line 2:  <html xmlns="http://www.w3.org/1999/xhtml">

Explanation

Line 1:  This lets the browser know about what version of xhtml you're using. This is important because, if you don't, the browser may misinterpret what you’re trying to display and make a mess of your design.

Line 2: This is a replacement for your <HTML> tag. You’ll notice that it is now “html” (lower case) instead of “HTML” (upper case). That is one of the differences with XHTML, all tags are written in lower-case. The <html> tag has been enhanced with XML namespace information. Don’t worry about what this means right now, but it is important to the browser, so just put it in.

If you examine the first line again, you’ll see that the word “Transitional” appears a few times. If we use this, instead of the “Strict” version, we’ll be able to learn some other important concepts about styling page elements in an faster, easier way. If we would use “Strict” we would be forced to have all style information in an external file called a style sheet. NOTE: Using external style sheets is the correct way to specify styles, and we will get to that later. For now we'll stay with “Transitional” for the reasons mentioned.