Home
top

Text Formatting

Lists

A list of things should be marked up as a list. There are three different kinds of lists in XHTML: unordered lists, ordered lists, and definition lists.

Unordered lists, also known as bulleted lists, start with <ul> and end with </ul>. Each list item is contained in an <li> element.

Ordered lists start with <ol> and end with </ol>.

Definition lists are a little different, and can be used to mark up a list of terms and descriptions. Definition lists start with <dl> and end with </dl>. Each term that is being described is contained in a <dt> element, and the description is contained in one or more <dd> elements.

Examples:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
  • Item 1
  • Item 2
  • Item 3
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
<dl>
  <dt>website</dt>
    <dd>A collection of linked web pages that 
    represent a company or an individual.</dd>
  <dt>web page</dt>
    <dd>The basic unit of information on the Web, 
    containing text, graphics and other media.</dd>
</dl>
website
A collection of linked web pages that represent a company or an individual.
web page
The basic unit of information on the Web, containing text, graphics and other media.

CSS makes it possible to use lists even when you don’t want the list’s content to be presented as a traditional list. A navigation bar, which is a list of links, is a good example of this. The advantage of using a list for a menu is that the menu will make sense even in browsers that don’t support CSS.

Quotations

The <q> element should be used for shorter, inline quotations. Web browsers are supposed to automatically render quotation marks before and after the content of the <q> element. Unfortunately, Internet Explorer doesn’t, and in some cases the <q> element can even cause accessibility problems. Because of this, some recommend that you avoid using <q>, and insert the quotation marks manually. Containing inline quotes in <span>-elements with a suitable class allows the use of CSS for styling quotes, but has no semantic value. Read Mark Pilgrim’s The Q tag for a detailed look at the problems with the <q> element.

For longer quotations that form one or more paragraphs, the <blockquote> element should be used. CSS can then be used to style the quotation. Note that text is not allowed directly inside a <blockquote> element – it must be contained in an element, usually a <p> element.

The cite attribute can be used with both <q> and <blockquote> to supply a URL for the source of the quotation. Note that if you use <span> instead of <q> for inline quotations, you cannot use the cite attribute.

Examples:

<p>The W3C says that <q cite="http://www.w3.org/TR/
REC-html40/struct/text.html#h-9.2.1">The presentation 
of phrase elements depends on the user agent.</q>.</p>

The W3C says that The presentation of phrase elements depends on the user agent..

<p>The W3C says that <span class="quote">&#8220;
The presentation of phrase elements depends on the 
user agent. &#8221;</span>.</p>

The W3C says that “The presentation of phrase elements depends on the user agent.”.

<blockquote cite="http://www.w3.org/TR/1999/
REC-html401-19991224/struct/text.html"><p>&#8220;
The following sections discuss issues surrounding 
the structuring of text. Elements that present 
text (alignment elements, font elements, style 
sheets, etc.) are discussed elsewhere in the 
specification. For information about characters, 
please consult the section on the document 
character set.&#8221;</p></blockquote>

“The following sections discuss issues surrounding the structuring of text. Elements that present text (alignment elements, font elements, style sheets, etc.) are discussed elsewhere in the specification. For information about characters, please consult the section on the document character set.”

Emphasis

<em> is used for emphasis, and <strong> for strong emphasis. Most web browsers display emphasized text in italics, and strongly emphasized text in bold. However, this is not a requirement, so to be sure how emphasized text is displayed, it is best to use CSS to specify their presentation. Avoid using emphasis when all you really want is a visual effect.

Example:

<p><em>Emphasized</em> text is normally displayed in italics, while <strong>strongly emphasized</strong> text is usually displayed in bold.</p>

Emphasized text is normally displayed in italics, while strongly emphasized text is usually displayed in bold.