HTML Lists
Master this topic with zero to advance depth.
Expert Answer & Key Takeaways
Mastering HTML Lists is essential for high-fidelity technical architecture and senior engineering roles in 2026.
HTML Lists Overview
HTML lists allow you to group a set of related items. They are essential for navigation menus, bulleted data, and structured content.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Example Explained
- The
<ul>tag defines an Unordered List. - The
<li>tag defines a List Item. - By default, unordered list items are marked with small black circles (bullets).
Unordered HTML Lists
An unordered list starts with the
<ul> tag. Each list item starts with the <li> tag.Marker Types
You can use the CSS
list-style-type property to define the marker style:| Value | Description |
|---|---|
disc | Sets the marker to a bullet (default) |
circle | Sets the marker to a circle |
square | Sets the marker to a square |
none | The items will not be marked |
Example with square markers:
<ul style="list-style-type:square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>Ordered HTML Lists
An ordered list starts with the
<ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default.<ol>
<li>Open the door</li>
<li>Enter the room</li>
<li>Close the door</li>
</ol>The Type Attribute
The
type attribute defines the type of the list item marker:| Type | Description |
|---|---|
type="1" | Default numbers (1, 2, 3) |
type="A" | Uppercase letters (A, B, C) |
type="a" | Lowercase letters (a, b, c) |
type="I" | Uppercase Roman numbers (I, II, III) |
type="i" | Lowercase Roman numbers (i, ii, iii) |
The Start Attribute
You can use the
start attribute to specify the starting number for the list:<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
</ol>HTML Description Lists
A description list is a list of terms, with a description of each term.
- The
<dl>tag defines the description list. - The
<dt>tag defines the term (name). - The
<dd>tag describes each term.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>💡 Quick Task
Create an ordered list of your top 3 favorite programming languages using lowercase Roman numerals (
type="i"). Then, create a description list for 'UI' and 'UX' and add their full forms.Interview Corner
❓ Interview Question
Q: What is the difference between
<ul> and <ol>?A:
<ul> is used for Unordered Lists where the order of items doesn't matter, typically shown with bullets. <ol> is used for Ordered Lists where the sequence is important, typically shown with numbers or letters.❓ Interview Question
Q: How can you create a list that starts from the number 10?
A: You can use the
start attribute on the <ol> tag, like <ol start="10">. This will make the first list item be numbered as 10.❓ Interview Question
Q: When should you use a Description List (
<dl>) instead of a standard list?A: Description lists are ideal for key-value pairs, glossaries, or any scenario where a term needs a direct associated definition or explanation.
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on accessibility, semantic structure, and modern SEO, our frontend team ensures the HTML/CSS curriculum meets 2026 professional standards.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.