Lists in HTML

Lists are used to group related items together in HTML. There are three main types of lists: unordered lists, ordered lists, and description lists.

Unordered Lists

Unordered lists use the <ul> tag, and each list item is wrapped in <li>.

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

Ordered Lists

Ordered lists use the <ol> tag. They are numbered automatically.

<ol>
  <li>First Step</li>
  <li>Second Step</li>
  <li>Third Step</li>
</ol>

Description Lists

Description lists use <dl> with terms (<dt>) and definitions (<dd>).

<dl>
  <dt>HTML</dt>
  <dd>The standard markup language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>Used to style and layout web pages.</dd>
</dl>

Key Points to Remember

  • Use <ul> for unordered lists (bulleted).
  • Use <ol> for ordered lists (numbered).
  • Use <dl>, <dt>, and <dd> for description lists.
  • Each item goes inside an <li> tag for ordered and unordered lists.

Practice Exercise

Try it yourself 🚀

👉 Create a file named lists.html. Inside, add:

  • An unordered list of your 3 favorite foods.
  • An ordered list of your morning routine (at least 4 steps).
  • A description list explaining 2 programming languages.