HTML Unordered Lists

HTML unordered lists are created using the <ul> tag and are lists of items that don’t have a specific numerical order or ranking. They are commonly used to present items where the sequence isn’t crucial, such as:

  • Navigation menus, like the one on the top of this page.
  • Sets of related concepts or ideas on web pages.
  • The lists you see in tutorial pages like this one!
  • List items: Individual items within the list are defined using the <li> tag.
  • Bullet markers: Browsers typically display unordered lists with bullet points (often disc-shaped) to visually distinguish each item.
  • Nesting: Unordered lists can be nested within each other to create multi-level lists with hierarchical structures.


  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  • Creates a bulleted list with default bullet markers (usually small black circles).


  <li>Main Item 1
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
  <li>Main Item 2</li>
  • Create a hierarchy of lists by nesting <ul> elements within each other.

Importance of unordered lists:

  • Organization: They enhance content structure and readability by visually grouping related items such as navigation items.
  • Scannability: Bullet points make content easier to scan and digest quickly.
  • Accessibility: Screen readers can effectively navigate and announce list items, improving accessibility for users with visual impairments.
  • SEO: Search engines may use lists to understand content structure and relationships between items.