
HTML provides different types of lists to organize content clearly.
1. Ordered List (<ol>
)
- Items are numbered automatically.
- Each list item is inside an
<li>
(List Item) tag.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Output:
- HTML
- CSS
- JavaScript
Attributes:
type
→ changes numbering style (1
,A
,a
,I
,i
).
<ol type="A">
<li>First</li>
<li>Second</li>
</ol>
start
→ sets starting number.
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
</ol>
2. Unordered List (<ul>
)
- Items are marked with bullets (dots, squares, circles).
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Mangoes</li>
</ul>
Attributes:
type
→ bullet style (disc
,circle
,square
).
3. Description List (<dl>
)
- Used for terms and descriptions (like a dictionary).
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Tags:
<dt>
→ Definition Term<dd>
→ Definition Description
4. Nested Lists
- You can place a list inside another list.
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables</li>
</ul>
5. Styling Lists (Basic Example)
<ul style="list-style-type: square; color: blue;">
<li>Item One</li>
<li>Item Two</li>
</ul>
✅ Key Points to Remember
<ol>
→ numbered lists.<ul>
→ bulleted lists.<dl>
→ term-definition lists.- Always use
<li>
inside<ol>
or<ul>
.