Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

HTML Lists

Unordered, ordered and description lists.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯

HTML has three kinds of lists:

  • Unordered list <ul>: items with bullets.
  • Ordered list <ol>: numbered items.
  • Description list <dl>: terms <dt> with descriptions <dd>.

Each item in ul or ol goes in an <li>. Lists can be nested inside list items.

Ordered list options

The type attribute changes the numbering (1, A, a, I, i) and start sets the first number.

Key Takeaways: HTML Lists

Mastering HTML Lists helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Lists Code Example

HTML 
<h3>Unordered</h3>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul><li>Green tea</li><li>Black tea</li></ul>
  </li>
</ul>

<h3>Ordered (Roman numerals, starting at 3)</h3>
<ol type="I" start="3">
  <li>Plan</li>
  <li>Build</li>
  <li>Launch</li>
</ol>

<h3>Description list</h3>
<dl>
  <dt>HTML</dt><dd>Structures web content.</dd>
  <dt>CSS</dt><dd>Styles web content.</dd>
</dl>
Free sign-in required · Google login available

HTML Lists Practice Exercises

Check what you learned in “HTML Lists”.

/ 3 solved
Fill in the blank

Create a numbered (ordered) list.

<>
  <li>Plan</li>
  <li>Build</li>
</>
✓ Correct! Not quite. Try again.
Multiple choice

Which element is used for each item in <ul> and <ol>?

✓ Correct! Not quite. Try again.
Code challenge

Create an unordered list with three items: HTML, CSS, JavaScript.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
HTML Tables
Next ❯
HTML Block & Inline

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services