Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!
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:
- 1Unordered 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.
- 2Ordered 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.
- 3Definition 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.
Use ordered lists for sequences, unordered for collections, description for key-value pairs
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>Try It Yourself: Lists
Quick Quiz
Key Takeaways
- Lists are one of the most commonly used elements in HTML.
- <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).