⬅ Previous Next ➡

12. Lists in HTML

Lists in HTML
  • HTML Lists: Lists are used to group a set of related items together. In HTML, there are three main types of lists: Unordered, Ordered, and Description lists.
  • Unordered List (<ul>):
    • Used for items where the order does not matter.
    • Items are marked with bullets (small circles) by default.
    • Each list item is defined using the <li> (List Item) tag.
  • Ordered List (<ol>):
    • Used for items where the order is important (like instructions or rankings).
    • Items are marked with numbers (1, 2, 3...) by default.
    • The type attribute can change numbering to letters (A, a) or Roman numerals (I, i).
  • Description List (<dl>):
    • Used for a list of terms and their corresponding descriptions (like a glossary).
    • <dt>: Defines the Term.
    • <dd>: Defines the Description (the details).

<!DOCTYPE html>
<html>
<head>
  <title>HTML Lists Examples</title>
</head>

<body>

<h2>HTML Lists (&lt;ul&gt;, &lt;ol&gt;, &lt;dl&gt;)</h2>

<!-- Example 1: Unordered List (Bullets) -->
<h3>Grocery List</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Fruits</li>
</ul>

<!-- Example 2: Ordered List (Numbers) -->
<h3>How to Make Tea</h3>
<ol>
  <li>Boil water</li>
  <li>Add tea leaves</li>
  <li>Add milk and sugar</li>
  <li>Serve hot</li>
</ol>

<!-- Example 3: Ordered List with A, B, C -->
<h3>Exam Steps</h3>
<ol type="A">
  <li>Read the question</li>
  <li>Check options</li>
  <li>Select correct answer</li>
</ol>

<!-- Example 4: Ordered List with Roman Numerals -->
<h3>Chapters</h3>
<ol type="I">
  <li>Introduction</li>
  <li>HTML Basics</li>
  <li>Forms</li>
</ol>

<!-- Example 5: Ordered List Starting from a Number -->
<h3>Top 5 Programming Languages</h3>
<ol start="3">
  <li>C</li>
  <li>Python</li>
  <li>JavaScript</li>
</ol>

<!-- Example 6: Description List (Terms and Meanings) -->
<h3>Web Terms</h3>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JS</dt>
  <dd>JavaScript (Client-side scripting language)</dd>
</dl>

<!-- Example 7: Nested Unordered List -->
<h3>Courses</h3>
<ul>
  <li>Web Development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Python</li>
  <li>Database (SQL)</li>
</ul>

<!-- Example 8: Nested Ordered List -->
<h3>Daily Routine</h3>
<ol>
  <li>Morning
    <ol type="a">
      <li>Wake up</li>
      <li>Exercise</li>
      <li>Breakfast</li>
    </ol>
  </li>
  <li>Evening
    <ol type="a">
      <li>Study</li>
      <li>Practice coding</li>
    </ol>
  </li>
</ol>

<!-- Example 9: Unordered List with type attribute (old style) -->
<h3>Bullet Styles (Old HTML)</h3>
<ul type="square">
  <li>Square bullet</li>
  <li>Second item</li>
</ul>

</body>
</html>
⬅ Previous Next ➡