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 other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

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 description 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>
<li>Star Wars</li>
<li>The Matrix</li>

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>

Description lists

Description lists (called definition lists in XHTML) 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 XHTML in an introductory article.

A descrption list consists of three tags. <dl> starts the list itself, with the defined term enclosed inside a <dt>. Finally, the description itself is enclosed inside a <dd> tag. For example:

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

The browser will present the description list appropriately: most browsers bold the term and indent the definition by default.

Note that description lists can be used with a far greater flexibility than the encyclopedic purpose for which I've used it here. A list of products may be a description list; for example, to sell a book. In that 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 the description.

Also note that a description term may have multiple definitions 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>
<li>Teach class
<li>HTML and Web Design</li>
<li>3D Studio Max</li>
<li>Send faxes</li>
<li>Take citizenship test</li>

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

<li>A small flightless bird, native to New Zealand.</li>
<li>A person from New Zealand

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.