Skip to content
techsnow

HTML Lists

Unordered Lists

An unordered list shows items with bullet points. Use it when the order doesn't matter, like a shopping list or a list of features.

Syntax:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
  • <ul> wraps the whole list.
  • Each item is an <li> (list item).

Changing the bullet style

ul { list-style-type: square; }   /* disc, circle, square, none */

Lists as navigation menus

Most website menus are actually unordered lists styled with CSS.

<nav>
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/tutorials">Tutorials</a></li>
  </ul>
</nav>
.menu { list-style: none; display: flex; gap: 20px; }