An HTML list organizes content into ordered or unordered formats, making information clear and easy to read. They improve readability by presenting data in a structured format instead of a dense block of text.
HTML lists use dedicated tags like <ul>, <ol>, and <li> to tell the browser exactly how to display the content.
<!DOCTYPE html>
<html lang="en">
<body>
<h2>Welcome To IntricateDevo Learning</h2>
<h5>List of available courses (Unordered):</h5>
<ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Programming Languages</li>
</ul>
<h5>Data Structures topics (Ordered):</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
</ol>
</body>
</html>
Here is a quick reference of the tags used to define and structure lists on a webpage:
| Tag | Description |
|---|---|
<ul> |
Defines an unordered list (bulleted). |
<ol> |
Defines an ordered list (numbered). |
<li> |
Defines a list item (used inside both <ul> and <ol>). |
<dl> |
Defines a description list. |
<dt> |
Defines a term in a description list. |
<dd> |
Provides the details/description for the term in a description list. |
There are three main types of lists in HTML. Let's look at each of them in detail.
Unordered lists display items as bulleted points. They are ideal for scenarios where the sequence or order of the items does not matter (like a grocery list).
An unordered list starts with the <ul> tag, and each list item begins with the <li> tag.
Attributes:
type: Specifies which kind of marker is used in the list (e.g., disc, circle, square). (Note: It is a modern best practice to use CSS list-style-type instead of this HTML attribute).compact: Renders the list smaller. (Deprecated in HTML5; use CSS instead).
<!DOCTYPE html>
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Ordered lists are used when the items need to follow a specific sequence, such as a recipe or step-by-step instructions.
In an ordered list, all list items are marked with numbers by default. It starts with the <ol> tag, and each list item begins with the <li> tag.
Attributes:
reversed: A boolean attribute that defines that the order will be descending (e.g., 3, 2, 1).start: Defines from which number the order will start.type: Defines which type of numbering you want: 1 (default numeric), A (uppercase letters), a (lowercase letters), I (uppercase roman numerals), or i (lowercase roman numerals).
<!DOCTYPE html>
<html lang="en">
<body>
<h3>HTML <ol> tag Attributes</h3>
<p><strong>reversed attribute:</strong></p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p><strong>start attribute (Starts at 5):</strong></p>
<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p><strong>type attribute (Roman Numerals):</strong></p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
A description list is a list of terms, accompanied by a description of each term. While less common than ordered or unordered lists, they are highly useful for formatting definitions, glossaries, or any key-value pairs of items.
<dl>: Defines the description list itself.<dt>: Defines the description term (the "key").<dd>: Defines the description details (the "value").
<!DOCTYPE html>
<html lang="en">
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms of freshly ground beans</dd>
<dt>Milk</dt>
<dd>- 1 liter Tetra Pack</dd>
</dl>
</body>
</html>
Which HTML tag is used to create a numbered list where the order of items matters?