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:
- , unordered list-
, ordered list-
, definition listThe HTML tag defines a list item and is used in both
and
lists. and 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:
- and
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- tag.
- the attribute compact and type are not longer supported in HTML 5 (you have to use CSS instead).
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 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
tag that contains an unordered list with some items:
Here is the HTML code to implement the basic structure of a navigation bar
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 instead a generic
Here is the HTML code to implement the basic structure of a navigation bar
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 instead a generic
tag
Definition list and the
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:
Here is the output in a web browser:
HTML 5 introduces the new tag that uses
and
Definition list and the
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:
GoogleSearch engineFacebookSocial network
Here is the output in a web browser:
Google
Search engine
FacebookSocial network
HTML 5 introduces the new tag that uses
and
- 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
AnnaWhat time is it?MarkThree o'clockAnnaThanks!
Anna
*NOTE: the tag has been dropped in HTML revision 3859 (2009-09-15). Thanks to Dylan for the suggestion. The new What time is it?
MarkThree o'clock
AnnaThanks!
tags now use and
- instead of .That's all. If you have some suggestion about this topic, please leave a comment. Thanks!
0 comments:
Post a Comment