HTML lists

What's new in HTML 5?
There is a big and justified interest from the web community about
the changes introduced in HTML 5 and in the last weeks I'm frequently
receiving a lot of questions and requests about this topic. In this
post I want to illustrate a quick roundup of some point of interest
about the use of lists in HTML 5.
How you know HTML has three types of lists:
- <ul>, unordered list
- <ol>, ordered list
- <dl>, definition list
The HTML <li> tag defines a list item and is used in both <ul> and <ol> lists. <dt> and <dd>
tags define a definition term and the related description in a
definition list. These tags are all supported in HTML 5 version but
there are some little changes in their attributes, in particular:

<ul> and <ol>
the attribute compact and type are not longer supported in HTML 5 (you have to use CSS instead).
<li>
the attribute type, which specifies the type of the list, is not longer supported in HTML 5 (you have to use CSS instead).
The attribute value, which defines the value of the first item of the list, is not longer deprecated and can be only used with the <ol> tag.

Unordered list for navigation bar
Another lists-related question is about the structure of the navigation bar of a website with the introduction of the new <nav>
tag in HTML 5. How you know, unordered lists are commonly used to
implement the navigation bar of a website. The typical structure of a
navigation bar is a <div> tag that contains an unordered list with some items:

Here is the HTML code to implement the basic structure of a navigation bar<div id="nav">

<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</div>

In
HTML 5, the structure of a navigation bar is the same illustrated in
the previous code. The only thing that changes is the the external
"container" of the unordered list. You have to use the new <nav> instead a generic <div> tag<nav>

<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</nav>

Definition list and the <dialog> tag
Definition
lists are not frequently used in web design end a lot of people even
ignore their existence! In general their use is mainly suggested when
you have to represent a list of items with a related description for
each item of the list. Here is the code that describes a generic
definition list:<dl>

<dt>Google</dt>
<dd>Search engine</dd>
<dt>Facebook</dt>
<dd>Social network</dd>

</dl>

Here is the output in a web browser:

Google

Search engine

Facebook

Social network

HTML 5 introduces the new <dialog> tag that uses <dt> and <dl>
tags (these tag are used to define a term and its description in a
definition list) to describe a conversation. Here is an example of
dialog structure<dialog>

<dt>Anna</dt>
<dd>What time is it?</dd>
<dt>Mark</dt>
<dd>Three o'clock</dd>
<dt>Anna</dt>
<dd>Thanks!</dd>

</dialog>

And here is the output in a web browser:Anna

What time is it?

Mark

Three o'clock

Anna

Thanks!

*NOTE: the <dialog> tag has been dropped in HTML revision 3859 (2009-09-15). Thanks to Dylan for the suggestion. The new <figure> and <details> tags now use <dt> and <dl> instead of <legend>.