Lists
Lists play a huge role in websites. Some are obvious, like lists of items for sale. Some are less obvious - like many stylized navigation bars and menus on websites. Some, super styled with css, are barely recognizable. You can even make an image gallery using lists.
There are three types of lists in html: the the unsorted list, the ordered list, and the definition list.
Unsorted Lists:
The unsorted list is probably the most commonly used of the three. This is what it looks like in html:
<ul>
<li>List item one</li>
<li>List item one</li>
<li>List item one</li>
</ul>Without css styling it appears with bullet points. However, what is important about unsorted list is what they mean semantically. They mean that the list is not in any particular order. Hence the name, unsorted.
Ordered Lists:
Ordered lists are used when the the order in which the items are listed is important.
<ol>
<li>List item one</li>
<li>List item one</li>
<li>List item one</li>
</ol>Definition Lists:
Definition lists were originally conceived to have a way to structure definitions on the web. Remember, html was first really used by some serious geeks, some of who felt it important to develop a way to structure definitions.
This is what a definition list looks like. It makes use of three different mark up elements, dl, dt, dd.
the <dd> tag opens and closes the definition list.
the <dt> tag opens and closes the word, concept (or even image) being defined.
the <dd> tag opens and closes the definition of the word in the <dt> tag.
This is what a definition looks like.
<dl>
<dt>HTML</dt>
<dd>Semantic language used to mark-up web content</dd>
<dt>CSS</dt>
<dd>Language used to stylize web content</dd>
<dt>Javascript</dt>
<dd>Client side programming language used to add behavior to web content.</dd>
</dl>Definition lists are often not used, misused, or just misunderstood. For more information read this great post from Max Design on definition lists. He also has a great example of how a definition list can be used in a less conventional way - a definition list image gallery.
