Lists
Unordered, ordered and description lists.
All lessons · HTML lessons: learn from scratch
Unordered and ordered lists
When the order of items does not matter use <ul> (bulleted); when it does, use <ol> (numbered). Each item is an <li> element. <ol> has the start and reversed attributes.
<h3>Shopping</h3> <ul> <li>Bread</li> <li>Cheese</li> <li>Tomatoes</li> </ul> <h3>Tea in 3 steps</h3> <ol> <li>Boil water</li> <li>Add tea</li> <li>Wait five minutes</li> </ol>
Nested lists
A sub-list goes inside an <li>, before that item's closing tag. This structure is the basis of menus and tables of contents.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>Description lists
For term–explanation pairs there is <dl>: <dt> is the term and <dd> its explanation. It suits glossaries and property lists.
<dl> <dt>HTML</dt> <dd>The language that structures a page.</dd> <dt>CSS</dt> <dd>The language that styles it.</dd> </dl>