HTML Lists

📚 Introduction to HTML Lists

HTML lists are used to group related pieces of information in a structured format. They improve readability and organization of content on webpages.

>>"Lists aren’t just for shopping — they structure ideas, steps, and meaning on the web." 🧠

🔢 Types of HTML Lists

  • Ordered List – Uses numbers or letters
  • Unordered List – Uses bullet points
  • Description List – Defines terms and descriptions

1️⃣ Ordered List: <ol>

Ordered lists are used when the sequence matters, like steps in a recipe or rankings.

Ordered List Example

<ol>
  <li>Wake up</li>
  <li>Brush your teeth</li>
  <li>Drink water</li>
</ol>

Note

💡 You can change the number format using the type attribute (e.g. type="A" for uppercase letters).

🔘 Unordered List: <ul>

Unordered lists are used when the order doesn't matter, such as listing features or groceries.

Unordered List Example

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

📖 Description List: <dl>

A description list pairs terms with their definitions, ideal for glossaries or FAQs.

Description List Example

<dl>
  <dt>HTML</dt>
  <dd>A markup language for web documents.</dd>
  <dt>CSS</dt>
  <dd>Used to style HTML content.</dd>
</dl>

🎨 Styling Lists with CSS

Lists can be styled using CSS for better visual appeal.

CSS List Styling

ul {
  list-style-type: square;
  padding-left: 20px;
}

ol {
  list-style-type: upper-roman;
}

li {
  color: #333;
  margin-bottom: 6px;
}

Note

🖌️ Use list-style-type to change bullets or numbering, and padding for spacing.

📌 Real-World Use Case: Features List

Product Features List

<h2>Key Features</h2>
<ul>
  <li>Responsive design</li>
  <li>Dark mode support</li>
  <li>Cross-browser compatibility</li>
</ul>

⚙️ Nested Lists

You can create lists inside list items to represent sub-items.

Nested List Example

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

🔗 Learn More

>>"Organized content is easier to read, easier to understand, and easier to love." ❤️