Unordered and Ordered Lists

7 min read

Lists in HTML

HTML has two common list types: unordered lists (<ul>) for items where order does not matter, and ordered lists (<ol>) for sequences where order is significant. Each item uses the <li> tag.

html

<!-- Unordered list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Download a code editor</li>
  <li>Create an HTML file</li>
  <li>Open it in a browser</li>
</ol>

<!-- Nested list -->
<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>

Navigation menus are almost always built with <ul> and <li> inside a <nav> element. This gives screen readers the correct context and allows CSS to style them as horizontal menus.

The <ol> element supports a start attribute to begin numbering from a value other than 1, and a reversed attribute to count down. Individual <li> items can override their number with a value attribute.

Ready to test yourself?

Practice HTML— quiz & coding exercises