Lists in HTML
Posted The: 13/06/2009 At: 16:53
Contents:
This Tutorial is on HTML Lists, how, and when they should be used. As well as usability benefits from using them.
The List Types
There are three types of lists in HTML, the first two are the Unordered Lists and Unordered lists, which are used for general upmarking of, mostly links. But also Recipes, movies, music, books, poams, names. Etc.
Unordered lists
Unordered lists is usually a bullet list of items, a bullet is placed in front of each link. An unordered list looks something like below:
- List Item
- List Item
- List Item
Example
<ul> <li>List Item<li> <li>List Item<li> <li>List Item<li> </ul>
Ordered lists
Ordered lists are used to markup an organizised list of items, a number is usually placed in front of each item, depending on how the list is styled with css. The default Numbering system used is Decimals. Example shown below:
- List Item
- List Item
- List Item
Example
<ol> <li>List Item<li> <li>List Item<li> <li>List Item<li> </ol>
Nested Lists
It is also possible to create a list inside another list in HTML, this is done by placing the list inside a List Item of its Parant list. This is done to create a sub-list of the item before, see the following Example.
Example
<ol> <li><a href="#List_Types">List Types</a><li> <li> <ol> <li><a href="#Ordered_lists">Ordered lists</a><li> <li><a href="#Unordered_lists">Unordered lists</a><li> </ol> </li> <li><a href="#Another_Section">Another Section</a></li> </ol>
Note. There is a known bug with Nested Lists, you can read more about it in the Common Problems and Solutions section of this Tutorial
Defination Lists
The less used list, is the Defination List. This is used to create a list of Definations and Terms. The Defination List looks like below.
- HTML
- Markup Language
- CSS
- style sheet language
Example
<dl> <dt>HTML</dt> <dd>Markup Language</dd> <dt>CSS</dt> <dd>style sheet language</dd> </dl>
Lists in Usability
Using lists for your navigation links makes it easier for people using screen readers. Some benefits for these user agents are listed in below sections.
Screen Readers
It is recommended that you use lists for navigation, as it improves accessibility of your pages. It is also recommended that you place a heading above each list, as this enable user agents such as screen readers, their users to easily jump between the headings, and make their decission based opon what the header reads. Lists will also enable richer styling of your site navigation. See also: Using Lists for Navigation
Below is an example showing an Ordered lists, with a Heading.
Example
Note. Its up to you to decide whether Ordered or Unordered Lists is most approiate for the sitoration.
<h2>Navigation<h2> <ol> <li>Frontpage<li> <li>About<li> <li>Contact<li> <li>Privacy Policy<li> <li>Terms of Use<li> </ol>
Common Problems and Solutions
The following sections is about styling of your lists.
The Margin and Padding Issue with Lists
The most common problem web designers face with lists, is that one browser uses margin, where the other uses padding. The problem is solved by setting both the margin and padding, or removing either where needed.
The Space Before Problem with Nested Lists
It is considered good coding practice to always close the elements on a page, with the exception of the following.
img, input, br, hr, meta, embed, area
This however creates a problem, where nested lists would get pushed down about 1em, or 1 lines height. There is a solution to this in the Nested List Bug Article.
Comments: [0]
