a guide to conceiving, creating & publishing your own website
There are three types of lists built into the HTML specification. Depending on what you need, you might use...
That was an ordered list! It's very simple to make lists, too.
These two types of lists are made using two different elements: the element to mark the list, and the element to mark each list item.
To mark a list, you use ol to declare an ordered list and ul to declare your unordered lists.
To mark up the list items, you must wrap them with li tags.
<h2>Top three fruit</h2>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Dragonfruit</li>
</ol>
<h2>Some instruments you'd find in a band</h2>
<ul>
<li>Guitar</li>
<li>Bass</li>
<li>Drums</li>
</ul>
The same element is used for the list items themselves, but the types of lists are different.
Description lists are unique. They used to be called definition lists, for a term and its definition; now the element's use has been expanded for any pairing of words and their descriptions.
You might see this used for a glossary, or for a Frequently Asked Questions page, or for something like product specifications.
To declare a description list, you start with its container dl. Because there are two different types of list items, there are two different tags to represent them: dt for description term and dd for description details. There may be multiple of either of these elements: one term can have multiple definitions, and one definition may have multiple terms.
<dl>
<dt>Hypertext Markup Language</dt>
<dt>HTML</dt>
<dd>A language utilised to give a text file structure and semantic meaning, to be displayed by web browsers.</dd>
<dt>Cascading Style Sheets</dt>
<dt>CSS</dt>
<dd>A language used to instruct a browser on how HTML documents should be displayed</dd>
<dd>CSS does not alter or intrude on the content of a HTML file.</dd>
</dl>