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
- Element #3.1
- 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!
