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. 3.8K 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, 30 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.

Changes In HTML5

In HTML5, closing tags for list items are optional. That is, </li>, </dt> and </dd> may be dropped. You’ll see code examples in this blog often use this shortcut in order to save space.

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.