HTML Full Course [Day 5] [Hindi] πŸ’» | List (Ordered, Unordered List) πŸš€ | Mohit Decodes

HTML Tutorial – Part 5: Lists in HTML

Welcome to Part 5 of the HTML Full Course by Mohit Decodes! In this tutorial, you’ll learn how to organize content using HTML Lists – a powerful way to display grouped items cleanly and effectively.

πŸ”Ή What are HTML Lists?

HTML provides three main types of lists:

  1. Unordered Lists (<ul>)
  2. Ordered Lists (<ol>)
  3. Description Lists (<dl>)

These are commonly used for menus, feature listings, steps, FAQs, and more.

1️⃣ Unordered Lists (<ul>)

Unordered lists are used when the order of items doesn’t matter. They appear with bullet points by default.

πŸ“Œ Example:

html
CopyEdit
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

βœ… Tip: You can style the bullets using CSS with list-style-type (e.g., circle, square, none).

2️⃣ Ordered Lists (<ol>)

Ordered lists are used when the sequence matters. Items are automatically numbered.

πŸ“Œ Example:

html
CopyEdit
<ol>
<li>Learn HTML</li>
<li>Practice daily</li>
<li>Build projects</li>
</ol>

βœ… You can change numbering style using the type attribute:

  1. type="1" (default) – numbers
  2. type="A" – uppercase letters
  3. type="a" – lowercase letters
  4. type="I" – Roman numerals

3️⃣ Description Lists (<dl>)

Description lists are used for terms and their corresponding definitions or descriptions.

πŸ“Œ Example:

html
CopyEdit
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

βœ… Use this type for glossaries, FAQs, or key-value structured content.

πŸ’‘ Bonus Styling Tips:

  1. Use CSS to customize spacing and alignment
  2. Combine lists inside list items for nested lists
  3. Lists are responsive by default and work well on all screen sizes