Structuring Information with Lists

Organize content using HTML's three list types for different data relationships.

Bulleted Lists

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Flour</li>
</ul>
→
• Milk
• Eggs
• Flour

Use <ul> for:

  • Non-sequential items
  • Navigation menus
  • Feature lists

Numbered Lists

<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
  <li>Bake 45 minutes</li>
</ol>
→
1. Preheat oven
2. Mix ingredients
3. Bake 45 minutes

<ol> attributes:

  • start="4" - Begin numbering from 4
  • type="A" - Alphabetic numbering

Definition Lists

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
→
HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Use <dl> to semantically pair terms with their definitions, making it ideal for glossaries, FAQs, or metadata lists.

Structure:

  • Term: <dt>
  • Description: <dd>
  • Multiple <dd> per <dt> allowed

Common Errors

<!-- Missing list items -->
<ul></ul>  <!-- Empty list -->

<!-- Wrong nesting -->
<ol><div>Invalid</div></ol>

Practical Use: FAQ Page

<ul class="nav">
  <li>Home</li>
  <li>FAQ</li>
</ul>

<ol start="5">
  <li>Advanced Topics</li>
</ol>

<dl>
  <dt>SSL</dt>
  <dd>Security protocol for encrypted connections</dd>
</dl>
→
[Navigation]
5. Advanced Topics
SSL Security protocol...

Your Task: Information Architecture

Create:

  1. Unordered list (3+ items)
  2. Ordered list with custom numbering
  3. Description list with 2 term-definition pairs
Section 1/6Bulleted Lists

Bulleted Lists

Use <ul> for:Non-sequential itemsNavigation menusFeature lists

Structuring Information with Lists

Organize content using HTML's three list types for different data relationships.

Bulleted Lists

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Flour</li>
</ul>
→
• Milk
• Eggs
• Flour

Use <ul> for:

  • Non-sequential items
  • Navigation menus
  • Feature lists

HTML Editor

Preview