HTML Lists
Organize content clearly using HTML list elements
HTML lists are used to group related content together in a structured and readable way. They are commonly seen in menus, instructions, feature lists, and documentation.
HTML provides different list types depending on how the information should be presented. Understanding when to use each list type makes your content more meaningful and accessible.
Unordered List Example
A basic unordered list with bullet points.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul><ul> & <li>Unordered List
An unordered list displays items with bullet points. It is used when the order of items does not matter.
- <ul> wraps the entire unordered list.
- <li> represents a single item inside the list.
Ordered List Example
A numbered list showing steps in sequence.
<ol>
<li>Open the browser</li>
<li>Write HTML</li>
<li>View the result</li>
</ol><ol> & <li>Ordered List
An ordered list displays items in a numbered sequence. The browser automatically numbers each item.
- <ol> wraps the ordered list.
- <li> represents each step or item in order.
Description Lists Explained
Description lists are designed for content where a term needs to be explained or defined. Instead of listing items, they create a relationship between a term and its description.
They are commonly used in glossaries, FAQs, dictionaries, and technical documentation.
Description List Example
A list used to describe terms and their meanings.
<dl>
<dt>HTML Description List</dt>
<dd>The language used to structure web pages</dd>
<dt>CSS</dt>
<dd>The language used to style web pages</dd>
</dl><dl>, <dt>, <dd>Description List
Each tag in a description list has a clear and specific role. Together, they describe terms in a structured way.
- <dl> wraps the entire description list.
- <dt> defines the term or concept.
- <dd> explains or describes the term.
Nested List Example
A list inside another list.
<h2>Nested List Example</h2>
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend</li>
</ul>Nested Lists
Nested lists allow you to place one list inside another to show hierarchy or subcategories.
- The nested list is placed inside an <li> element.
- Commonly used for menus and category structures.
Ordered List Attributes
Custom numbering using attributes.
<ol type="A" start="3" reversed>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>Ordered List Attributes
HTML provides attributes that control how ordered lists are numbered and displayed.
- type changes the numbering style (1, A, a, I, i).
- start sets the starting number.
- reversed displays the list in reverse order.
Knowledge Check
1. Which tag is used to define a list item?
2. Which list type is best for term definitions?