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 barAnother 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> tagDefinition 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!
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>.
That's all. If you have some suggestion about this topic, please leave a comment. Thanks!
Read More
I have an iPhone and iPod and naturally I use iTunes to manage my music library through these devices. I am a neat person but for some reason until some week ago a lot of my tracks was mislabeled, without the album cover, hard to find and I didn't have the patience to fix them manually. So I searched for a solutions and I found TuneUp a great application for Mac and Windows that helped me clean and maintain neat my iTunes library searching for missing or inaccurate ID3 tags in my mp3 files. I bought a license some and the result has been really impressive.
If you are looking for new interesting fonts, here is a collection of ten beautiful, free and must have serif typefaces for the web and print. This collection includes Medio, Jura, Fontin, Sling, Calluna, Lido STF, Salernomi, Novello Pro, Steinem, TeX Gyre Schola.
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.
