TOC

The community is working on translating this tutorial into Italian, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

HTML Basics:

Lists

Every once in a while a list can be very handy. You can use them to show ingredients in a recipe or as a table of contents for your document. HTML markup has two different kinds of lists – the ordered and the unordered lists.

The unordered list starts with the opening tag <ul> (abbreviation of unordered list) and every item on list is surrounded by the <li> tag (li stands for list item)

<ul>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ul>

This HTML markup would result in an unordered list that looks like this:

  • List item no. 1
  • List item no. 2
  • List item no. 3

Generally the unordered list has black circles as bullet points – you can actually change how the bullet points should look, using CSS.

The ordered list looks like this:

  1. First list-item
  2. Second list-item
  3. Third list-item

And instead of the <ul> tag, you use the <ol> (abbreviation for ordered list)

<ol>
	<li>List item no. 1</li>
	<li>List item no. 2</li>
	<li>List item no. 3</li>
</ol>

Except for the obvious reason to use the list (when you actually want a list) a lot of webdesigners use the list to create their menus and navigations – as the navigation very often is a set of related links. Using the list to markup your navigation also means, that if the CSS styling fails the links will still be semantically related.

What you have learned

  • There are two different kinds of lists – ordered lists and unordered lists
  • The tag for en ordered list is <ol>
  • The tag for the unordered list is <ul>
  • Every item on the list is marked up with the <li> element
  • The list element is an obvious choice when create your navigation

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising