- 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, theSTRONG
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.”
- 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 theBR
element can be minimized. For example:- use the
P
element for paragraphs, not theBR
element. - Use list item elements for lists (
UL, OL, LI
) rather than marking up a series of items with theBR
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 the
- 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 thanEM
orI
. Use theCITE
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 theQ
element.) Don’t useBLOCKQUOTE
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 useBLOCKQUOTE
because of its block-level characteristics, you can use CSS to change them, too. - Include the cited source and title within the
BLOCKQUOTE
element:- 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.”
- 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>
- Link to the citation:
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.”
It’s also recommended to include a visual reference to your citation, as always, perhaps like this:
“I’m citing the W3C here.”
- 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 andQ
is intended for shorter quotations, theQ
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>
Lemons
<li></li>
Limes
<li></li>
Oranges
<li></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:
- 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.
- I’ve used list item tags for the sidebar column lists of links, even though you don’t visually see any bulleted lists.
- I’ve also used list item tags for the main archive listing for categories and monthly archives. Once again, the bullets are hidden.
- 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 theDD
element containing the speaker’s words. For example, this:
<dl>
Salad
<dt></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.
Misc. Elements, Attributes
- The
CODE
Element - CODE at W3C: “Designates a fragment of computer code”
- For example, this:
<code> <style type="text/css"> body {margin:0;} </style> </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, thePRE
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 theBR
element, use thePRE
element judiciously.