Learn how to organize content into unordered lists, ordered lists, and description lists using the appropriate HTML elements.
When you have a collection of items where the order does not matter, use an unordered list. In HTML, this is created with the <ul> element, and each item inside it is wrapped in an <li> (list item) element.
Browsers typically render unordered lists with bullet points by default.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>Unordered lists are perfect for navigation menus, feature lists, ingredient lists, or any group of items that have no particular sequence.
When the sequence of items matters — such as step-by-step instructions, rankings, or a recipe procedure — use an ordered list with the <ol> element. Each item is still wrapped in <li>.
Browsers automatically number ordered list items starting from 1.
<ol>
<li>Preheat the oven to 180 degrees.</li>
<li>Mix the dry ingredients together.</li>
<li>Add the wet ingredients and stir.</li>
<li>Pour into a baking pan and bake for 30 minutes.</li>
</ol>You can change the starting number with the start attribute (<ol start="5">) or reverse the order with the reversed attribute. The type attribute lets you switch between numbering styles: 1 (default), a, A, i, or I.
<!-- You can nest lists inside other lists -->
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
</ul>
</li>
</ul>
<!-- You can also mix list types -->
<ol>
<li>First step
<ul>
<li>Sub-point A</li>
<li>Sub-point B</li>
</ul>
</li>
<li>Second step</li>
</ol>HTML also provides description lists for term-definition pairs. A description list uses three elements:
<dl> — the description list container<dt> — the term being described<dd> — the description or definition of the term<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used to style HTML content.</dd>
</dl>Description lists are ideal for glossaries, metadata displays (like showing an author and date), and FAQ sections. A single <dt> can have multiple <dd> elements if the term has more than one definition.
Which list type should you use for step-by-step instructions?