HTML Lists
Lists are one of the most commonly used elements in HTML. They organize information in a structured, easy-to-read format that both humans and machines can understand. From navigation menus to recipe instructions, from feature lists to product specifications — lists are everywhere on the web. HTML provides three types of lists: unordered lists (bullet points), ordered lists (numbered), and definition lists (terms with descriptions). Knowing when and how to use each type is a fundamental skill that you will use on virtually every web page you build.
Types of Lists in HTML
HTML supports three distinct types of lists, each designed for a specific purpose: 1. Unordered Lists (<ul>) — Display items with bullet points. Use when the ORDER of items does not matter. Examples: shopping lists, feature lists, navigation menus, lists of skills on a resume. 2. Ordered Lists (<ol>) — Display items with numbers (or letters/roman numerals). Use when the ORDER matters. Examples: step-by-step instructions, rankings, recipes, to-do lists with priority. 3. Definition Lists (<dl>) — Display terms paired with their descriptions. Use for glossaries, FAQs, metadata, or any content where you need to associate a term with its meaning. Each list item uses the <li> (list item) tag. The <li> tag must be a direct child of <ul> or <ol> — you cannot place random elements directly inside a list. Lists can be nested — you can put a list inside another list to create sub-categories. This is commonly used for multi-level navigation menus and hierarchical data structures. From an accessibility standpoint, screen readers announce the type of list and the number of items. For example: 'list of 5 items'. This helps visually impaired users understand the content structure before diving in. Using proper list markup (instead of manually typing '1.', '2.', etc.) ensures this accessibility benefit.
List Tags — Complete Reference
- <ul> — Unordered list. Displays bullet points by default. The bullet style can be changed with CSS (list-style-type: disc, circle, square, none).
- <ol> — Ordered list. Displays numbers by default. Supports attributes: type='A' (letters), type='I' (roman numerals), start='5' (start counting from 5), reversed (count backwards).
- <li> — List item. Must be placed inside <ul> or <ol>. Can contain text, links, images, or even other lists (for nesting).
- <dl> — Definition list. Wraps a set of term-description pairs. Used for glossaries, FAQs, and metadata.
- <dt> — Definition term. The word or phrase being defined. Displayed in bold or on its own line by default.
- <dd> — Definition description. The explanation of the term. Usually indented below the <dt>.
- Nesting: Place a <ul> or <ol> INSIDE an <li> to create sub-lists. You can nest as deeply as needed.
- Accessibility: Screen readers announce 'list with N items' — proper list markup gives visually impaired users valuable context about content structure.
Ordered List Attributes
The <ol> tag has several useful attributes that many beginners do not know about: • type attribute — Changes the numbering style: - type='1' → 1, 2, 3 (default) - type='A' → A, B, C - type='a' → a, b, c - type='I' → I, II, III (Roman numerals) - type='i' → i, ii, iii • start attribute — Sets the starting number: - <ol start='5'> starts counting from 5: 5, 6, 7... • reversed attribute — Counts backwards: - <ol reversed> with 3 items: 3, 2, 1 • value attribute on <li> — Overrides the number for a specific item: - <li value='10'>This item is numbered 10</li> These attributes are incredibly useful for documentation, legal documents, and any content where you need precise control over numbering.
Lists Example
<!DOCTYPE html>
<html>
<body>
<!-- Unordered List (bullet points) -->
<h2>Shopping List (Unordered)</h2>
<ul>
<li>Apples</li>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
</ul>
<!-- Ordered List (numbered) -->
<h2>Steps to Make Tea (Ordered)</h2>
<ol>
<li>Boil water in a pot</li>
<li>Add tea leaves and let it brew for 2 minutes</li>
<li>Add milk and sugar to taste</li>
<li>Strain into a cup and serve hot</li>
</ol>
<!-- Nested List (list inside a list) -->
<h2>Course Topics (Nested)</h2>
<ul>
<li>HTML Basics
<ul>
<li>Tags & Elements</li>
<li>Headings & Paragraphs</li>
</ul>
</li>
<li>CSS Basics
<ul>
<li>Selectors</li>
<li>Colors & Fonts</li>
</ul>
</li>
</ul>
<!-- Definition List -->
<h2>Glossary (Definition List)</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — the structure of web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — the styling and visual design.</dd>
<dt>JavaScript</dt>
<dd>A programming language for interactive web behavior.</dd>
</dl>
</body>
</html>