Lists In Html

The HTML table allows to arrange data like, tex

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. In modern web development, lists are workhorse elements, frequently used for navigation as well as general content.

Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful because they provide specialized elements to which you can attach CSS styles. Finally, semantically correct lists help visitors read your web site, and they simplify maintenance when your pages need to be updated.

The three list types

There are three list types in HTML:

unordered list — used to group a set of related items in no particular order
ordered list — used to group a set of related items in a specific order
description list — used to display name/value pairs such as terms and definitions

Each list type has a specific purpose and meaning in a web page.

Unordered lists

Unordered (bulleted) lists are used when a set of items can be placed in any order.

An example is a shopping list:

• milk
• bread
• butter
• coffee beans

Although the items are all part of one list, you could put the items in any order and the list would still make sense:

• bread
• coffee beans
• milk
• butter

You can use CSS to change the bullet to one of several default styles, use your own image, or even display the list without bullets — we’ll look at how to do that in the Styling lists and links article.

Unordered list markup

Unordered lists use one set of <ul></ul> tags wrapped around one or more sets of <li></li> tags:

<ul>
  <li>bread</li>
  <li>coffee beans</li>
  <li>milk</li>
  <li>butter</li>
</ul>

Ordered lists

Ordered (numbered) lists are used to display a list of items that should be in a specific order. An example would be cooking instructions:

1. Gather ingredients
2. Mix ingredients together
3. Place ingredients in a baking dish
4. Bake in oven for an hour
5. Remove from oven
6. Allow to stand for ten minutes
7. Serve

If the list items were moved around into a different order, the information would no longer make sense:

1. Gather ingredients
2. Bake in oven for an hour
3. Serve
4. Remove from oven
5. Place ingredients in a baking dish
6. Allow to stand for ten minutes
7. Mix ingredients together

Ordered lists can be displayed with several sequencing options. The default in most browsers is decimal numbers, but there are others available:

Ordered list markup

Ordered lists use one set of <ol></ol> tags wrapped around one or more sets of <li></li> tags:

  
Gather ingredients
  
Mix ingredients together
  
Place ingredients in a baking dish
  
Bake in oven for an hour
  
Remove from oven
  
Allow to stand for ten minutes
  
Serve

Description lists

Description lists (previously called definition lists, but renamed in HTML5) associate specific names and values within a list. Examples might be items in an ingredient list and their descriptions, article authors and brief bios, or competition winners and the years in which they won. You can have as many name-value groups as you like, but there must be at least one name and at least one value in each pair.

Description list markup

A simple description list of single names with single values would look like this:

  <dt>Name</dt>
  <dd>Value</dd>
  <dt>Name</dt>
  <dd>Value</dd>
  <dt>Name</dt>
  <dd>Value</dd>

This is rendered as follows: