Blog

Learn How to Create Ordered, Unordered, and Nested Lists in HTML

Written by Mukesh Saini | 14 Dec, 2025 11:30:00 AM

Organize content efficiently using lists in HTML for clear readability and structure.

Unordered Lists

Use unordered lists for items without a specific order.

  • HTML Basics
  • CSS Fundamentals
  • JavaScript Essentials
  • <ul> Container for unordered list
  • <li> List item
  • Default bullet style: •

Ordered Lists

Use ordered lists when sequence matters.

  1. Plan the website structure
  2. Write HTML markup
  3. Style with CSS
  • Default numbering: 1, 2, 3…
  • You can change numbering style with type attribute:
  1. Step 1
  2. Step 2

Nested Lists

Combine lists for hierarchical content:

  • Frontend
    • HTML
    • CSS
    • JavaScript
  • Backend
    • Node.js
    • Python
  • Indentation improves readability
  • Nested lists are ideal for multi-level menus or structured content

Visual Styling for Lists

Use CSS to style bullets, numbers, and spacing:

ul { list-style-type: square; margin-left: 20px; } ol { list-style-type: upper-roman; }

Improves visual hierarchy and user experience