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:

And here are result in browser:

1. Ordered list element #1
2. Ordered list element #2
3. Ordered list element #3
   1. Element #3.1
   2. Element #3.2
4. Ordered list element #4
5. 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:

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:

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:

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!