HTML Lists – tutorial and examples

HTML Lists – tutorial and examples

Maybe for someone that this article will looks as repetition, perhaps not, but I will try to collect all available information about the html lists in one place. HTML provide us with 3 different types of lists: ordered lists, unordered lists and definition lists. All lists can contain any different objects inside (text, links, images etc). And of course, lists can be nested too.

Ordered lists: OL-LI

Ordered lists using <ol> tag element as parent, and <li> as childs. Here are sample html code:

<ol>
  <li>Ordered list element #1</li>
  <li>Ordered list element #2</li>
  <li>Ordered list element #3
    <ol>
      <li>Element #3.1</li>
      <li>Element #3.2</li>
    </ol>
  </li>
  <li>Ordered list element #4</li>
  <li>Ordered list element #5</li>
</ol>

And here are result in browser:

Ordered list element #1
Ordered list element #2
Ordered list element #3
1. Element #3.1
2. Element #3.2
Ordered list element #4
Ordered list element #5

Here are table with attributes of OL tag:

Attribute	Value(s)	Description	HTML5 notes
compact	compact	Tell to browser that list should generated smaller than normal	That attribute don`t supported in HTML5 anymore, and we should use custom CSS instead (as example: line-height property)
start	number	Start point of an ordered list	That attribute don`t supported in HTML5 anymore, seems that currently we don`t have another CSS alternatives
type	1 \| A \| a \| I \| i	Type of bullet points	That attribute don`t supported in HTML5 anymore. Possible css property – list-style-type: disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit

Here are table with attributes of LI tag:

Attribute	Value(s)	Description	HTML5 notes
type	1 \| A \| a \| I \| i \| disc \| square \| circle	Type of bullet points	That attribute don`t supported in HTML5 anymore. Possible css property – list-style-type: disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit
value	number	Number of list item	That attribute don`t supported in HTML5 anymore, currently we don`t have another CSS alternatives

Unordered lists: UL-LI

Unordered lists using <ul> tag element as parent, and <li> as childs. Here are sample html code:

<ul>
  <li>Unordered list element #1</li>
  <li>Unordered list element #2</li>
  <li>Unordered list element #3
    <ul>
      <li>Element #3.1</li>
      <li>Element #3.2</li>
    </ul>
  </li>
  <li>Unordered list element #4</li>
  <li>Unordered list element #5</li>
</ul>

And here are result in browser:

Unordered list element #1
Unordered list element #2
Unordered list element #3
- Element #3.1
- Element #3.2
Unordered list element #4
Unordered list element #5

Here are table with attributes of UL tag:

Attribute	Value(s)	Description	HTML5 notes
compact	compact	Tell to browser that list should generated smaller than normal	That attribute don`t supported in HTML5 anymore, and we should use custom CSS instead (as example: line-height property)
type	disc \| square \| circle	Type of bullet points	That attribute don`t supported in HTML5 anymore. Possible css property – list-style-type: disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit

Just remembered, one of the most common places where unordered lists are used – navigation menu of quite any website. In HTML5 appear new tag where we can define our navigation: nav tag. Usage can be next:

<nav>
  <ul>
    <li><a href="link1.html">Menu element 1</a></li>
    <li><a href="link2.html">Menu element 2</a></li>
    <li><a href="link3.html">Menu element 3</a></li>
  <ul>
</nav>

Definition lists: DL-DT-DD

Definition lists have 3 own tags: DL – define new list, DT – define new item in this list, DD – define description of this new element. Here are sample html code:

<dl>
  <dt>Def list element #1</dt>
  <dd>Description of element #1</dd>
  <dt>Def list element #2</dt>
  <dd>Description of element #2</dd>
  <dt>Def list element #3</dt>
  <dd>Description of element #3</dd>
  <dt>Def list element #4</dt>
  <dd>Description of element #4</dd>
</dl>

And here are result in browser:

Def list element #1: Description of element #1
Def list element #2: Description of element #2
Def list element #3: Description of element #3
Def list element #4: Description of element #4

Definition lists don`t have own special attributes.

Conclusion

I hope that our overview was interesting and useful for you. Good luck!

Enjoyed this Post?

If you enjoyed this article, feel free to share our tutorial with your friends.

Stay connected with us:

Written by: admin on March 22, 2011.

Script Tutorials