HTML Lists (ul, ol, li)

List Elements

<ul>: unordered list (bullet points)
<ol>: ordered list (numbers by default)
<li>: list item (the individual item inside ul/ol)
Lists are great for navigation menus, steps, features, and grouped content.

Nested Lists

You can place a <ul> or <ol> inside an <li> to create sub-items.
Keep nesting shallow when possible—deep nesting hurts readability.

Lists Example

HTML Lists Examplehtml

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

<!-- Ordered list (numbers) -->
<ol>
  <li>Plan</li>
  <li>Build</li>
  <li>Deploy</li>
</ol>

<!-- Nested list -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Preview

localhost:3000

Loading preview...

Best Practice: Use lists for actual lists of related items. Don’t use lists just to indent text—use CSS for layout.