HTML Lists – tutorial and examples

HTML Lists – tutorial and examples

0 11805

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:

  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:

AttributeValue(s)DescriptionHTML5 notes
compactcompactTell to browser that list should generated smaller than normalThat attribute don`t supported in HTML5 anymore, and we should use custom CSS instead (as example: line-height property)
startnumberStart point of an ordered listThat attribute don`t supported in HTML5 anymore, seems that currently we don`t have another CSS alternatives
type1 | A | a | I | iType of bullet pointsThat 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:

AttributeValue(s)DescriptionHTML5 notes
type1 | A | a | I | i | disc | square | circleType of bullet pointsThat 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
valuenumberNumber of list itemThat 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:

AttributeValue(s)DescriptionHTML5 notes
compactcompactTell to browser that list should generated smaller than normalThat attribute don`t supported in HTML5 anymore, and we should use custom CSS instead (as example: line-height property)
typedisc | square | circleType of bullet pointsThat 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!

SIMILAR ARTICLES

Polaroid gallery

0 23790

NO COMMENTS

Leave a Reply