Types of Lists
HTML provides three list types: unordered lists for items with no particular sequence, ordered lists for sequential items, and description lists for term/definition pairs.
Unordered List
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Ordered List
<ol>
<li>Preheat the oven</li>
<li>Mix the ingredients</li>
<li>Bake for 30 minutes</li>
</ol>List Elements
| Element | Purpose |
|---|---|
| <ul> | Unordered (bulleted) list |
| <ol> | Ordered (numbered) list |
| <li> | A single list item, used inside <ul> or <ol> |
| <dl> | Description list |
| <dt> | A term inside a description list |
| <dd> | The description of a term |
Description List
<dl>
<dt>HTML</dt>
<dd>The markup language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>Nesting Lists
Lists can be nested by placing a new <ul> or <ol> inside an <li> element, useful for sub-items or multi-level navigation menus.
Nested List
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>Customizing Ordered Lists
The <ol> element accepts a start attribute to begin at a number other than 1, and a type attribute to change the numbering style (1, A, a, I, i).
Ordered List Attributes
<ol start="5" type="A">
<li>Item E</li>
<li>Item F</li>
</ol>li Must Be a Direct Child
<li> elements must be direct children of <ul> or <ol>. Placing other elements directly inside a list (without an <li> wrapper) is invalid HTML.
Best Practice
Use <ul> when order doesn’t matter and <ol> when it does (like steps in a recipe). Use CSS, not the type attribute, to style bullet appearance unless you specifically need the semantic numbering style.