HTML Lists – tutorial and examples

HTML/CSS

Mar 22, 2011

0 27925

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: