« Previous Next »

Unordered Lists


An unordered list begins with the <ul> tag.and every item in the list is defined using the< li >tag.

By default, list items are displayed with bullet symbols (solid black circles):

Output 1:

Circle

Output:

Nested HTML Lists

Lists can be nested (list inside list):
Output:

Practice Exercises

Task 1: How to change bullet styles in an Unordered List using CSS?

Goal: Create a feature list using custom bullet styles (such as square or circle) using inline CSS list-style-type.
💡 Hint: Add style="list-style-type: square;" inside the <ul> tag.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Bullet List</title>
  </head>
  <body>
    <h3>Key Project Deliverables</h3>

    <ul style="list-style-type: square;">
      <li>Responsive UI Layout</li>
      <li>RESTful API Integration</li>
      <li>Database Schema Migration</li>
      <li>Automated Unit Tests</li>
    </ul>
  </body>
</html>
Output :

Key Project Deliverables

  • Responsive UI Layout
  • RESTful API Integration
  • Database Schema Migration
  • Automated Unit Tests
Explanation: Using list-style-type allows you to customize unordered list bullet points to square, circle, disc (default), or none.
Task 2: How to nest an Unordered List inside another Unordered List?

Goal: Build a multi-tier menu structure (e.g., Programming Categories with sub-technologies).
💡 Hint: Place the inner <ul> directly inside a parent <li> element before closing it.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Nested Lists Example</title>
  </head>
  <body>
    <h3>Software Engineering Modules</h3>

    <ul>
      <li>Frontend Tech
        <ul>
          <li>HTML5 / Semantic Tags</li>
          <li>CSS Grid & Flexbox</li>
          <li>React JS Framework</li>
        </ul>
      </li>
      <li>Backend Tech
        <ul>
          <li>Node.js Runtime</li>
          <li>Express Framework</li>
        </ul>
      </li>
      <li>Databases
        <ul>
          <li>PostgreSQL</li>
          <li>MongoDB</li>
        </ul>
      </li>
    </ul>
  </body>
</html>
Output :

Software Engineering Modules

  • Frontend Tech
    • HTML5 / Semantic Tags
    • CSS Grid & Flexbox
    • React JS Framework
  • Backend Tech
    • Node.js Runtime
    • Express Framework
  • Databases
    • PostgreSQL
    • MongoDB
Explanation: When nesting lists, browsers automatically adjust the bullet style for second-level lists (e.g., switching from solid disc to hollow circle).
« Previous Next »