HTML Notes
HubHTML Document Structure — DOCTYPE, Head, Body, and Meta TagsWhat is HTML? — The Language of the WebHTML Headings, Paragraphs, and Text FormattingHTML Links and Images — Anchor Tags, href, src, altHTML Lists — Ordered, Unordered, and Description ListsHTML Tables — Structure, Colspan, Rowspan, AccessibilityHTML Forms — Input Types, Labels, Validation, and AccessibilityHTML Interview Questions — 50 Questions with AnswersHTML5 Features — Audio, Video, Canvas, Storage, and APIsSemantic HTML5 — Elements, Structure, SEO, and Accessibility
Master all HTML list types — unordered lists with bullets, ordered lists with numbers, description lists, nested lists, list item styling, and when to use each type with real-world examples.
Lists are one of the most versatile structures in HTML. They are used for navigation menus, bullet points, numbered steps, glossaries, product features, breadcrumbs, and more. HTML provides three types of lists, each suited to different content.
Ordered Lists <ol>
An ordered list displays items with sequential numbers. Use it when order matters — steps, rankings, procedures.
html example
<ol>
<li>Open your text editor</li>
<li>Create a new file named index.html</li>
<li>Add the HTML boilerplate</li>
<li>Save and open in a browser</li>
</ol>Renders as:
- Open your text editor
- Create a new file named index.html
- Add the HTML boilerplate
- Save and open in a browser
Ordered List Attributes
Example
<!-- Start from a number other than 1 -->
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ol>
<!-- Reverse the order (counts down) -->
<ol reversed>
<li>Third place</li>
<li>Second place</li>
<li>First place</li>
</ol>
<!-- Change numbering type with the type attribute -->
<ol type="A"> <!-- A, B, C, D -->
<li>Option A</li>
<li>Option B</li>
</ol>
<ol type="i"> <!-- i, ii, iii, iv (lowercase Roman) -->
<li>Introduction</li>
<li>Background</li>
<li>Methodology</li>
</ol>
<ol type="I"> <!-- I, II, III, IV (uppercase Roman) -->
<li>Chapter One</li>
<li>Chapter Two</li>
</ol>
type value | Style |
|---|---|
1 (default) | 1, 2, 3, 4 |
A | A, B, C, D |
a | a, b, c, d |
I | I, II, III, IV |
i | i, ii, iii, iv |
Tip: Prefer CSS list-style-type over the HTML type attribute for styling — keep content and presentation separate.
Custom Start Value on Individual Items
html example
<ol>
<li value="10">Item 10</li>
<li>Item 11</li>
<li value="20">Jump to 20</li>
<li>Item 21</li>
</ol>Description Lists <dl>
A description list pairs terms with their descriptions. Useful for glossaries, metadata, FAQs, and key-value data.
html example
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the standard language for web page structure.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — controls the visual presentation of HTML elements.</dd>
<dt>JavaScript</dt>
<dd>A programming language for web interactivity and dynamic behaviour.</dd>
</dl><dl>— the description list container<dt>— definition term (the key)<dd>— definition description (the value, indented)
Multiple Descriptions per Term
html example
<dl>
<dt>HTTP Methods</dt>
<dd>GET — Retrieve data from the server</dd>
<dd>POST — Send data to the server</dd>
<dd>PUT — Update existing data on the server</dd>
<dd>DELETE — Remove data from the server</dd>
</dl>Multiple Terms per Description
html example
<dl>
<dt>UK</dt>
<dt>United Kingdom</dt>
<dt>Britain</dt>
<dd>A country in northwestern Europe comprising England, Scotland, Wales, and Northern Ireland.</dd>
</dl>Real-World: Product Specifications
html example
<dl>
<dt>Processor</dt>
<dd>Apple M3 Pro, 12-core CPU</dd>
<dt>Memory</dt>
<dd>18GB unified memory</dd>
<dt>Storage</dt>
<dd>512GB SSD</dd>
<dt>Display</dt>
<dd>14.2-inch Liquid Retina XDR, 3024×1964 resolution</dd>
<dt>Battery Life</dt>
<dd>Up to 18 hours</dd>
</dl>Nested Lists
Lists can be nested inside other list items to create hierarchies:
html example
<ul>
<li>Frontend Development
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Flexbox</li>
<li>Grid</li>
<li>Animations</li>
</ul>
</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend Development
<ul>
<li>Node.js</li>
<li>Python</li>
<li>Databases
<ul>
<li>PostgreSQL</li>
<li>MongoDB</li>
</ul>
</li>
</ul>
</li>
</ul>Important nesting rule: The nested <ul> or <ol> must be placed inside the <li> element, not after it:
Example
<!-- ✅ Correct: nested list inside <li> -->
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
</li>
</ul>
<!-- ❌ Wrong: nested list outside <li> -->
<ul>
<li>Fruits</li>
<ul> <!-- This is invalid — ul cannot be direct child of ul -->
<li>Apple</li>
</ul>
</ul>
Navigation Menus with Lists
Navigation menus are semantically built using <nav> + <ul> + <li> + <a>:
Example
<!-- Main navigation -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/subjects">Subjects</a></li>
<li><a href="/problems">Problems</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<!-- Breadcrumb navigation -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/subjects">Subjects</a></li>
<li><a href="/subjects/html-complete-guide">HTML Guide</a></li>
<li aria-current="page">HTML Lists</li>
</ol>
</nav>
Using <ol> for breadcrumbs makes semantic sense — the order of the path matters.
Lists with Icons Using CSS
Modern web design replaces bullet dots with custom icons using CSS. The HTML remains clean:
html example
<ul class="feature-list">
<li>Free forever plan with unlimited projects</li>
<li>No credit card required to get started</li>
<li>Cancel anytime, no questions asked</li>
</ul>css example
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
padding-left: 1.75rem;
position: relative;
}
.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
color: green;
font-weight: bold;
}When to Use Which List Type
| Content | Best List Type | Reason |
|---|---|---|
| Step-by-step instructions | <ol> | Order is critical |
| Top 10 rankings | <ol> | Rank/order matters |
| Features, ingredients, items | <ul> | Order doesn't matter |
| Navigation menu | <nav> + <ul> | Unordered, accessible |
| Breadcrumb | <nav> + <ol> | Ordered path hierarchy |
| Glossary, FAQ, specs | <dl> | Term-description pairs |
| Table of contents | <ol> or <ul> | Depends on whether order matters |
Accessibility Notes
- Screen readers announce list items as "list, X items" — this is helpful for navigation
role="list"can be added if CSS removes native list semantics (some CSS resets do this)- Navigation lists should be inside
<nav>with anaria-label - Breadcrumb lists should mark the current page with
aria-current="page"
Example
<!-- Screen reader-friendly navigation -->
<nav aria-label="Product categories">
<ul role="list">
<li><a href="/electronics">Electronics</a></li>
<li><a href="/clothing">Clothing</a></li>
<li><a href="/books" aria-current="page">Books</a></li>
</ul>
</nav>
Summary
| Element | Purpose |
|---|---|
<ul> | Unordered list — items where order doesn't matter |
<ol> | Ordered list — items where sequence matters |
<dl> | Description list — term-definition pairs |
<li> | List item — used inside <ul> and <ol> |
<dt> | Definition term — used inside <dl> |
<dd> | Definition description — used inside <dl> |
Key attributes:
<ol start="n">— start numbering from n<ol reversed>— count down<ol type="A/a/I/i">— change numbering style<li value="n">— set specific number for that item
*Next: HTML Tables*
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for HTML Lists — Ordered, Unordered, and Description Lists.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this HTML Complete Guide topic.
Search Terms
html-complete-guide, html complete guide, html, complete, guide, basics, lists, html lists — ordered, unordered, and description lists
Related HTML Complete Guide Topics
Continue learning this concept
BasicsHTML Headings, Paragraphs, and Text FormattingLearn all HTML text elements — h1 through h6 headings, paragraphs, line breaks, strong, em, span, div, blockquote, code, pre, and inline vs block elements with practical examples.BasicsHTML Links and Images — Anchor Tags, href, src, altMaster HTML links and images — anchor tags, href types (absolute, relative, mailto, tel), target attribute, images with src and alt, figure, figcaption, responsive images with srcset, and image optimization best practices.BasicsHTML Tables — Structure, Colspan, Rowspan, AccessibilityLearn HTML tables completely — table structure with thead, tbody, tfoot, spanning cells with colspan and rowspan, caption, scope, and making tables accessible for screen readers.FormsHTML Forms — Input Types, Labels, Validation, and AccessibilityMaster HTML forms completely — form element, all input types (text, email, password, number, date, checkbox, radio, file), textarea, select, fieldset, legend, labels, built-in validation, and form accessibility.Advanced / HTML5HTML5 Features — Audio, Video, Canvas, Storage, and APIsExplore HTML5Interview PreparationHTML Interview Questions — 50 Questions with Answers50 essential HTML interview questions with detailed answers — covering basics, semantic HTML, forms, accessibility, HTML5 features, performance, SEO, and advanced topics for front-end developer interviews.