HTML Lists

HTML lists are used to group related items together in a structured way. They help organize content and improve readability on web pages. There are three main types of lists in HTML: ordered lists, unordered lists, and description lists.

Unordered List

An unordered list displays items with bullet points. It is created using the <ul> tag, and each list item is defined with <li>.

Example

<ul>    
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Try this code

Ordered List

An ordered list displays items in a numbered sequence. It is created using the <ol> tag.

Example

<ol>    
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

Try this code

Ordered List Types

You can change the numbering style of an ordered list using the type attribute.


  First
  Second
  Third

Nested Lists

Lists can be nested inside other lists to create sub-items.

Example

<ul> 
<li>Frontend
<ul>   
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend</li>
</ul>

Try this code

Description List

A description list is used to define terms and their descriptions. It uses <dl>, <dt>, and <dd>.

Example

<dl>    
<dt>HTML</dt>
<dd>Structure of a web page</dd>
<dt>CSS</dt>
<dd>Styles and layout of a web page</dd>
</dl>

Try this code

Best Practices for Lists

Use unordered lists for non-sequential items
Use ordered lists when order matters
Keep list items short and meaningful
Use nested lists carefully to avoid clutter

Common Mistakes with Lists

Using lists only for design instead of structure
Forgetting to wrap items in <li>
Overusing deeply nested lists

Tip: Lists are excellent for navigation menus, feature lists, and step-by-step instructions.