Create ordered, unordered, and definition lists in HTML. Lists are used for navigation menus, content, and any sequence of related items.
When: use <ol> whenever order matters — step-by-step instructions, ranked results, a table of contents. Why not <ul>: <ol> semantically signals to screen readers and search engines that the sequence is meaningful.
type — Counter style — "1" (default, numbers), "A" (uppercase letters), "a" (lowercase letters), "I" (uppercase roman), "i" (lowercase roman).start — Starting number for the counter. Use start="5" to begin numbering at 5.reversed — Boolean. Counts down instead of up — useful for top-10 countdowns.<ol>
<li>Preheat oven to 180°C.</li>
<li>Mix the ingredients.</li>
<li>Bake for 25 minutes.</li>
</ol>
<!-- Custom start number -->
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
</ol>
<!-- Roman numerals -->
<ol type="I">
<li>Chapter One</li>
<li>Chapter Two</li>
</ol>When: any collection of items where order does not matter — feature lists, tag clouds, navigation menus. Why navigation uses <ul>: it semantically groups links as a list, which screen readers announce correctly. The bullet points are removed with CSS.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<!-- Navigation is often a <ul> inside <nav> -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>When: glossaries, FAQs, metadata tables — any key-value pairs like author/date/category. Why: the browser and assistive technologies understand the term–definition relationship, making it more meaningful than a plain list.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — structures web content.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — styles web content.</dd>
<dt>JavaScript</dt>
<dd>Scripting language — adds interactivity.</dd>
</dl>When: whenever items have sub-items — a table of contents with sub-sections, a navigation with dropdowns, a category tree. Where: place the nested <ul> or <ol> directly inside the parent <li>, not after its closing tag.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript
<ul>
<li>React</li>
<li>Vue</li>
</ul>
</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>