💡 Tip: Login now to track your course progress and unlock your downloadable certificates instantly!

HTML Lists

HTML Lists allow you to organize content in a structured way.
They are used for menus, steps, bullet points, or any grouped information. HTML provides three main types of lists: unordered, ordered, and description lists.

Unordered List (<ul>)

Use the <ul> tag for the list container and <li> for each item.

Unordered List Example
<ul>
  <li>HTML Basics</li>
  <li>CSS Styling</li>
  <li>JavaScript Introduction</li>
</ul>

Ordered List (<ol>)

An ordered list displays items with numbers or letters.
Use the <ol> tag for the container and <li> for items.

Ordered List Example
<ol>
  <li>Register an account</li>
  <li>Verify your email</li>
  <li>Start learning HTML</li>
</ol>

Optional attributes for <ol>:

  • type="A" → Uppercase letters (A, B, C)
  • type="a" → Lowercase letters (a, b, c)
  • type="I" → Uppercase Roman numerals (I, II, III)
  • type="i" → Lowercase Roman numerals (i, ii, iii)

Description List (<dl>)

A description list is used for terms and their descriptions.
It uses three tags: <dl> (list), <dt> (term), <dd> (description).

Description List Example
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language used for web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets used for styling HTML.</dd>
</dl>

Nesting Lists

You can create lists inside lists for hierarchical information.

Nesting Lists Example
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

Best Practices

  • Always use <li> inside <ul> or <ol>.
  • Use <dl> for definitions, terms, or FAQs.
  • Nest lists carefully for clear structure.
  • Style lists using CSS for better appearance.

Conclusion

HTML Lists help structure content in bullet points, numbered steps, or definitions.
They improve readability, organization, and the overall user experience on your web pages.

Sign In Form

User your email and password to singn in

Don’t have an account, signup here : 

HTML5 & CSS3

Tools and Tutorials

Want a Website

Want a website for your business ?

Please fill out the details below, so we can reach out to you.

Registration Form

Signup to track your record and much more.

We have sent you an email with a registration link. Please click the link to verify your email address, or enter the 6-digit OTP provided in the email.

Didn't receive the OTP. Regenerate OTP Resend