Quick Primer on XHTML Markup

• ‹ previous
• 94 of 132
• next ›

Writing valid XHTML markup is not really as difficult as it sounds. If you learn a few new rules, you'll be marking up code in valid XHTML in no time. The best way to familiarize yourself with valid markup is to view source on site pages that have passed one of the validation services, such as W3C's Markup Validation Service. Here is a quick rundown of the basics to help you get started.

Differences Between HTML and XHTML Markup

Semantic markup

XHTML markup is semantic. This means lists, tables, paragraphs and headers are coded according to what they are. For instance, headers are all marked as <h1>, <h2>, <h3>, and so on. <table> is used only on content that is truly tabular material. <p> is used only to denote true paragraphs. Mark up elements according to what they are, not how you want them to look—that will be taken care of in the CSS file.

DocType

Browsers require this information and may not render pages correctly without it. Using the correct DOCTYPE tells the browser to render your pages in standards–compliant mode. Without one or with an incorrect DOCTYPE, browsers assume your code is non-compliant ("old-fashioned") and will render your pages in quirks mode. For those beginning XHTML markup, "transitional" may be the most forgiving. A full list of all DOCTYPES can be found on W3C's site.

Style tags

On standards-compliant pages, presentation is separated from content. Style tags such as those for fonts, colors, sizes, borders and spacing are not included on the page. These are defined in the cascading style sheet (CSS).

Closing tags

In HTML it was okay to omit closing tags. XHTML requires that all tags be closed, even empty ones. For instance, when you use a <p> tag at the beginning of a paragraph, you must use a </p> at the end.

Some of the most familiar tags that have a closing pair are:

Tags which don’t have a closing pair must still be closed, like this:

Lower case

XHTML requires that all tags and attributes be in lower case.

Quotes

XHTML will generate errors if you leave quotation marks off values.

Values

XHTML will not allow you to omit values.

Headers

On XHTML and standards compliant pages, headers are especially important. Best practice is to reserve H1 headers for page titles. The next level head must be an H2 (don’t skip to H3). When marking up headers, envision or even sketch out the headers as an outline. Mark headers according to their place in the outline, not according to the style they will have—that can be taken care of in the CSS file.

Paragraphs

All paragraphs are wrapped in <p> </p> tags. Blockquotes can be used only if the content is truly a quote. Do not used <p> tags to create space. Use a </ br>, or better yet, add space by denoting it in the CSS file.

Strong vs. Bold

The <strong> and <b> tags are not the same. Strong denotes emphasis—it adds meaning. Bold merely makes the text look heavier—it adds no meaning to the text, merely style. The difference is easiest to envision with voice readers (audio devices used by the sight-impaired to “view" web pages). A voice reader ignores all style attributes, which add nothing to the meaning of the text. So they will pass over a <b> tag. But text surrounded by <strong></strong> will be voiced with greater emphasis, indicating that text has greater importance.

Emphasis vs. Italics

As with <strong> and <b>, <em> and <i> are not the same. <i> is merely styling—you can use it to make text look better, for instance. On the other hand <em> confers meaning; it indicates that the text within has more importance and should be emphasized.

Lists

There are three types of lists, and all content that qualifies as a list (for instance, menu items) should be styled that way. Unordered lists (<ul>), ordered lists (<ol>) and definition lists (<dl>). Unordered lists are bulleted, and items within them are denoted with a <li>...</li>. Ordered lists are numbered; items within them also are denoted with a <li>...</li>. Definition lists are made up of definition terms <dt>...</dt> and definition descriptions <dd>...</dd>.