XHTML Primer

General Information

XHTML, or eXtensible HyperText Markup Language, is quite simply a reworking of HTML. The reworking represents an attempt to achieve future compatibility between web coding languages and XML. Since more and more people access the Web with devices other than computer screens, the World Wide Web Consortium (W3C) is encouraging designers to utilize XHTML.

What’s the Difference?

Although both markup languages share the same extension (’.html’), there are some noteworthy differences. Chief among them are:

  • XHTML tags must be in lowercase
  • XHTML files must have a <!DOCTYPE> declaration and Namespace
  • XHTML attribute values must be in quotes
  • XHTML tags must be closed

Converting upper case tags to lower case is quite simple. Including the proper <!DOCTYPE> declaration and Namespace is as easy as cutting and pasting a few lines of code. Putting attribute values in quotes means changing width=200 to width="200". Ensuring that tags are closed is rather easy work. If you have an <li> tag, you must close that tag by including an </li> tag after the list item text. For tricky tags that have never had closing tags (img, br, link), the solution is quite simple: just include a space and slash at the end of tag. Thus, <img src="../steve.jpg"> becomes <img src="../steve.jpg" /> and <br> becomes <br />. These differences are covered more thoroughly in the New York Public Library’s XHTML Style Guide.

Again, although converting to XHTML is not critical to publishing web pages, it will increasingly become a big issue as web pages are visited with cell phones, PDAs, watches, screen readers, Braille devices, etc.. Besides, it’s easy to convert, so why not?!

XHTML Document Components

XHTML documents are comprised of three main components. An XHTML-based Web page will not validate without all three components, which are:

  1. <!DOCTYPE> declaration and Namespace
  2. A heading or <head>
  3. A body or <body>

The <!DOCTYPE> declaration and Namespace are likely things you will not commit to memory. Most Web designers don’t—many cut and paste it into their code. This component simply tells the browser what language the document was written in. The <head> component gives the browser “metadata” about the page, such as its title, keywords, and its author. It also serves as an area for you to link to external files that alter your page’s appearance or behavior, as well as a place for you to include style sheets or scripts. The <body> component of your document is where the content is; it is the part of the ‘.html’ file that is ultimately displayed by the browser.

The Lingo

Both XHTML and HTML use “tags” to tell browsers information about the structure, meaning, and style of the information contained within them. Tags are thus not displayed by browsers. They simply tell the browser to start doing something, then stop doing it. So, if we want to tell a browser to start a new paragraph, we type <p>. After we’ve finished typing in the paragraph’s content, we tell the browser the paragraph is finished by typing </p>. In XHTML, all tags must be closed for a page to be valid. To see a list of all the tags available, visit the W3C’s XHTML Reference.

Two other important terms to be aware of are “attributes” and “values”. Both are parts of XHTML and HTML tags. Attributes modify tags, and values modify attributes.

XHTML Document Structure and Syntax: Think Logically

XHTML documents are structured like outlines of papers. So, level one headings are followed by level two headings, level two headings by level three headings, and so forth. It’s a good idea to be strict about your document’s structure, since non-visual visitors will not be able to see your page’s structure. Moreover, search engines will prioritize information in your Web page by its position within the document’s hierarchy. In other words, the text in a level one heading (<h1>) will be more important to a search engine than the text in a level six heading (<h6>) or a paragraph (<p>).

Another important aspect of coding XHTML is using proper syntax. Like the structure of a sentence, the structure of XHTML documents is very important. For example, if you begin a paragraph then include text with an emphasized phrase (<em>), you should not close that paragraph before you close the emphasized phrase.

Incorrect

<p>One must understand <em>the importance of proper coding.</p></em>

Correct

<p>One must understand <em>the importance of proper coding</em>.</p>

Tips

One of the best ways to ensure that your code is correct is to run it through a validator. If your site is online, just go to the W3C’s XHTML Validator and type in the URL of your Web site. If your site is not yet online, you can use software programs with built-in validators.

One of the easiest ways to learn XHTML quickly is to study the code of good designers by visiting their Web site and viewing their source code. Most browsers provide you with a way to do this in the menu options. Just go to ‘View’ and then ‘Source’ or on a PC simply right click (’Ctrl’ + click on most Macs) on the Web page and select ‘View Source’.

References

If you are a CU graduate student or faculty member, you are welcome to enroll in my Basic Web Design Using HTML (Hand-Coding) course offered through the Anderson Language Technology Center (preference is given to language graduate students in the Technology Certificate classes). Even though the course title suggests I’m teaching HTML, I am in fact going to teach XHTML.

If you are a self-learner (hand-coding is easy to learn!), there are a number of great web sites that offer tutorials and more information on XHTML. Here is a small sampling:

Comments are closed.