Lists & Tables

Lists and tables are essential HTML elements for organising content. Lists present items in ordered or unordered sequences. Tables display data in rows and columns. Using them correctly improves readability, accessibility, and the semantic quality of your web pages.

---

Unordered Lists

An unordered list displays items with bullet points. Use it when the order does not matter:

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

Nested Lists

<ul>
  <li>Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Back-end
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>Ruby</li>
    </ul>
  </li>
</ul>

---

Ordered Lists

An ordered list displays items with numbers. Use it when the sequence matters:

<ol>
  <li>Preheat the oven to 180°C</li>
  <li>Mix the flour and sugar</li>
  <li>Add the eggs and milk</li>
  <li>Bake for 25 minutes</li>
</ol>

Ordered List Attributes

Attribute	Purpose	Example
type	Numbering style	type="A" (A, B, C), type="i" (i, ii, iii)
start	Starting number	start="5" (starts at 5)
reversed	Count down instead of up	<ol reversed>

<ol type="A" start="3">
  <li>Item C</li>
  <li>Item D</li>
  <li>Item E</li>
</ol>

---

Description Lists