• A Few Basic Elements
• Misc. Elements, Attributes
• FAQ

Headings

W3C info:7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements

Use heading elements for headings: H1, H2, H3, H4, H5, H6. Don’t use CSS, the STRONG element or other markup to fake your headings. See my article about this, Don’t Fake Your Markup: Accessibility Issues for CSS.

For example, this:

<h1>Our Company</h1>
<h2>Our Services</h2>

Becomes this:

Our Company

Our Services

Paragraphs: the P Element

Use the P element for paragraphs. Don’t use the <br /> element to instead provide paragraph-like breaks.

W3C info about P:

“The P element represents a paragraph. It cannot contain block-level elements (including P itself).

“We discourage authors from using empty P elements. User agents should ignore empty P elements.”

9.3.1 Paragraphs: the P element

Line Breaks: the BR Element

BR at W3C: 9.3.2 Controlling line breaks

The BR element is one of the more abused HTML elements around. When other HTML elements and CSS are understood and used appropriately, forced line breaks with the BR element can be minimized. For example:

• use the P element for paragraphs, not the BR element.
• Use list item elements for lists (UL, OL, LI) rather than marking up a series of items with the BR element, and remember that you can use CSS to hide the HTML bullets if you wish.
• Use CSS to set widths, margins, and padding for text rather than using a multitude of <br /> tags for text line breaks.

Use this element judiciously.

Emphasis: the EM Element

EM at W3C: “Indicates emphasis.”

Example:<em>I’m emphasizing this.</em>

Use the EM element for emphasis. If you’re after italicized text aside from emphasized text or citations use CSS (font-style:italic) rather than EM or I. Use the CITE element for citing a source.

Emphasis: the STRONG Element

STRONG at W3C: “Indicates stronger emphasis.”

Example:<strong>I’m emphasizing this even stronger.</strong>

Citation: the CITE Element

CITE at W3C: “Contains a citation or a reference to other sources.”

Example:<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.

Citation: The BLOCKQUOTE Element

BLOCKQUOTE at W3C: “BLOCKQUOTE is for long quotations (block-level content).” (See note below about the Q element.) Don’t use BLOCKQUOTE just for text indenting. If you want to indent text, use CSS margins, padding, or a combination of both. Likewise, if you don’t want to use BLOCKQUOTE because of its block-level characteristics, you can use CSS to change them, too.

Include the cited source and title within the BLOCKQUOTE element:

1. Link to the citation:

   Use the CITE attribute for the source’s URI: cite="uri".

   <blockquote cite="http://w3c.org/" title="Article title, author, date">“I’m citing the W3C here.”</blockquote>

   From W3C regarding the cite attribute:

   “The value of this attribute is a URI that designates a source document or message. This attribute is intended to give information about the source from which the quotation was borrowed.”

   BLOCKQUOTE Attribution definitions: CITE

2. Use the TITLE attribute for the source title: title="text":

   <blockquote cite="http://w3c.org/" title="Article title, author, date">“I’m citing the W3C here.”</blockquote>

For example, this markup:

<blockquote cite="http://w3c.org/" title="Article title, author, date">“I’m citing the W3C here.”</blockquote>

Becomes this:

“I’m citing the W3C here.”

Article title, author, date

It’s also recommended to include a visual reference to your citation, as always, perhaps like this:

“I’m citing the W3C here.”

Article title, author, date

Note: When you hover your mouse over the quotation in some browsers that the title information will appear.

Note: While BLOCKQUOTE is intended for longer quotations and Q is intended for shorter quotations, the Q element is not supported by browsers and even causes problems for some alternative devices, so its use at the moment is not recommended. Hopefully next generation browsers will support it. For more information:

• The Q tag by Mark Pilgrim
• The Q Element by B.K. DeLong
• Fixing quotes with Javascript by Simon Willison

List Elements: UL, OL, LI

W3C info about the List element

NOTE: It’s important to note that the W3C’s examples on the above page are outdated for XHTML since they don’t include closing tags in their samples. It’s REQUIRED to include closing tags for all list items and other tags for XHTML. It’s a good practice anyway, whether using XHTML or HTML.

When you have a list of something, use the list element tags. While there are a few choices of list style types, these can be replaced with images using CSS. It’s also possible to hide bullets completely, change indenting, use lists inline or block, and more.

For example, this markup:

<ul>
<li>Lemons</li>
<li>Limes</li>
<li>Oranges</li>
</ul>

Becomes this:

• Lemons
• Limes
• Oranges

There are many helpful tutorials around about list items. Check WebsiteTips.com’s CSS section, CSS and Lists.

Examples of variations in how list items are treated using CSS:

1. my website, Brainstorms and Raves, uses list item tags for the top-of-the-page navigation where visually you’ll see what appears to be horizontally arranged graphic buttons.
2. I’ve used list item tags for the sidebar column lists of links, even though you don’t visually see any bulleted lists.
3. I’ve also used list item tags for the main archive listing for categories and monthly archives. Once again, the bullets are hidden.

They’re each treated differently using CSS but they all use the same list item tags.

Definition List Elements: DL, DT, DD

W3C information about definition list elements

Use definition list elements for terms and their corresponding descriptions. Another possible use is for marking up dialogues, with each DT element naming a speaker followed by the DD element containing the speaker’s words.

For example, this:

<dl>
<dt>Salad</dt>
<dd>A dish of raw leafy green vegetables, often tossed with pieces of other raw or cooked vegetables, fruit, cheese, or other ingredients and served with a dressing.</dd>
<dt>Vegetable</dt>
<dd>A plant cultivated for an edible part, such as the root of the beet, the leaf of spinach, or the flower buds of broccoli or cauliflower.</dd>
<dt>Grains</dt>
<dd>Small, dry, one-seeded fruit of cereal grasses, having the fruit and the seed walls united, such as wheat.</dd>
</dl>

Becomes this:

Salad

A dish of raw leafy green vegetables, often tossed with pieces of other raw or cooked vegetables, fruit, cheese, or other ingredients and served with a dressing.

Vegetable

A plant cultivated for an edible part, such as the root of the beet, the leaf of spinach, or the flower buds of broccoli or cauliflower.

Grains

Small, dry, one-seeded fruit of cereal grasses, having the fruit and the seed walls united, such as wheat.

top

Misc. Elements, Attributes

The CODE Element

CODE at W3C: “Designates a fragment of computer code”

For example, this:

<code>
&lt;style type=&quot;text/css&quot;&gt;
body {margin:0;}
&lt;/style&gt;
</code>

Becomes this:

<style type="text/css">
body {margin:0;}
</style>

Note: most browsers will render content within the CODE element in the browser’s default monospace font. You can also use CSS, of course, to designate fonts, colors, and more.

Note: If you use reserved HTML within your code snippet or elsewhere within your HTML markup, such as the ampersand &, less-than sign <, or greater-than sign >, you must escape them with their character entities, such as what is shown in the example above.

The PRE Element

W3C info: Preformatted text: The PRE element

Preformats text with fixed-width font, preserves the given white-space and line-breaks, usually disables automatic word-wrapping. Used in the code examples on this page, for example:

<pre>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</pre>

Like the BR element, though, the PRE element has been abused and used to force line breaks for text formatting when CSS and other elements can be used appropriately instead. Just like I mention about the BR element, use the PRE element judiciously.