Friday, March 26, 2010
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:
-
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
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!
2:00 PM 0
10 Beautiful and free fonts for web designers
Are you looking for new interesting fonts to make inspiration for your new website or design project? Take a look at this list with some beautiful free fonts you can download and use on your creative projects.
1. Take out the garbage
Take out the garbage is a very nice font designed by Kirk Shelton. You can use it for free for personal, non profit use. For commercial licensing, please contact the author:
2. Vegur
Vegur is a clean font set similar to Helvetica family, designed by dotcolon:
3. VTKS Animal 2
VTKS Animal 2 is a brush-style upper case only font set created by Douglas Vitkauskas. Useful to design headers with a big font-size:
4. Nevis
Nevis, this strong, angular typeface is ideal for headings. It features 96 of the most commonly used glyphs:
5. Bedini
Bedini is an elegant font similar to Bodoni. Useful to design typographic-style websites:
6. Pappo's Blues
Pappo's Blues is an original font set very useful to enrich your design with handwritten style graphic elements:
7. 309
309 is another nice upper case only font set useful to design bold headers:
8. Philosopher
Philosopher is a beauty and elegant font maked with Erico Lebedenco:
9. 2 Peas Goofball
2 Peas Goofball is a funny and tiny font designed by Lorenzo Simo:
10. Diego
Diego is another interesting handwritten font:
1. Take out the garbage
Take out the garbage is a very nice font designed by Kirk Shelton. You can use it for free for personal, non profit use. For commercial licensing, please contact the author:
2. Vegur
Vegur is a clean font set similar to Helvetica family, designed by dotcolon:
3. VTKS Animal 2
VTKS Animal 2 is a brush-style upper case only font set created by Douglas Vitkauskas. Useful to design headers with a big font-size:
4. Nevis
Nevis, this strong, angular typeface is ideal for headings. It features 96 of the most commonly used glyphs:
5. Bedini
Bedini is an elegant font similar to Bodoni. Useful to design typographic-style websites:
6. Pappo's Blues
Pappo's Blues is an original font set very useful to enrich your design with handwritten style graphic elements:
7. 309
309 is another nice upper case only font set useful to design bold headers:
8. Philosopher
Philosopher is a beauty and elegant font maked with Erico Lebedenco:
9. 2 Peas Goofball
2 Peas Goofball is a funny and tiny font designed by Lorenzo Simo:
10. Diego
Diego is another interesting handwritten font:
12:40 PM 0
Subscribe to:
Posts (Atom)
