demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML Lists

html / elements

Estimated reading time: 2 minutes, 24 seconds

Lists are exactly that: lists of things. There are three forms of list in HTML: ordered, unordered and definition lists.

Ordered Lists

Ordered lists are used when you want to make the order or importance of list items clear. For example, when writing a manual on the steps taken to defuse an atomic bomb, you wouldn’t want a simple list of bullet points. Much more appropriate would be a series of enumerated steps. (“1. Open the hatch. 2. Cut the blue wire” etc).

Ordered lists are enclosed by the <ol> tag. Each item in the list is marked with a surrounding <li> tag:

<h2>My top three favourite movies are:</h2>
<ol>
<li>Star Wars</li>
<li>The Matrix</li>
<li>Highlander</li>
</ol>

Unordered Lists

“Unordered” in the context of HTML doesn’t mean that the list items are randomly sorted on the web page: it simply implies that it doesn’t matter which order the viewer reads them in. An unordered list begins with the <ul> tag. Items nested inside this tag are still marked as <li> (list items).

<h2>My hobbies are:</h2>
<ul>
<li>Scuba-diving</li>
<li>Woodworking</li>
<li>Writing</li>
<li>Movies</li>
</ul>

Definition lists

Definition lists are typically used to define a series of terms. Under-utilised in web design, they are appropriate whenever you are seeking to make terms very, very clear, such as a legal document or a handbook. You can see a use of a definition list when I define what XHTML stands for in an introductory article.

A definition list consists of three tags. <dl> starts the definition list itself. The defined term is enclosed inside a <dt>. Finally, the definition itself (the definition declaration) is enclosed inside a <dd> tag. For example:

<dl>
<dt>Kiwi</dt>
<dd>A small flightless bird, native to New Zealand.</dd>
</dl>

The browser will present the definition list appropriately: by default, with the term in bold text and the definition indented.

Note that the definition list can be used with a far greater flexibility than the encyclopedic purpose for which we've used it here. A list of products may be a definition list; I have often used a definition list (with nested forms of other lists) in the section. In those cases, the title and a picture of the book are the definition term, while further details and an explanation of the book's purpose is a definition declaration.

Also note that a definition term may have multiple definition declarations beneath it. (Consider, for example, the multiple possible meanings of the term "haunt" in a dictionary).

Nested Lists

Lists can be nested inside each other. Note that doing so will indent the inner nested list(s) inside the outer list. For example:

<h2>Things to do Today</h2>
<ul>
<li>Teach class
<ol>
<li>HTML and Web Design</li>
<li>3D Studio Max</li>
</ol></li>
<li>Send faxes</li>
<li>Take citizenship test</li>
</ul>

Note the nesting of the first <li> tag around the nested list. Another example:

<dl>
<dt>Kiwi</dt>
<dd>
<ol>
<li>A small flightless bird, native to New Zealand.</li>
<li>A person from New Zealand
<em>(informal)</em></li>
</ol>
</dd>
</dl>

There are many ways of customizing the appearance of lists, almost all of them the role of , although some aspects, such as reversing or restarting list number sequences, are the province of HTML.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.