Text & Formatting
Lists
ul, ol, li, Nested Lists
💡 Lists ek shopping list ya numbered instructions jaisi hain — <ul> unordered (bullets, order matter nahi) hai jaise items ki list, <ol> ordered (numbers, order matter karta hai) hai jaise recipe steps.
<ul> (unordered list) bullets ke saath list banata hai — order important nahi hai. <ol> (ordered list) numbers ke saath — order important hai (jaise steps). Dono ke andar <li> (list item) elements hote hain, har item ke liye ek.
Lists ko nest kar sakte ho — ek <li> ke andar poori doosri <ul>/<ol> daal sakte ho, sub-lists banane ke liye.
<h3>Shopping List (order matter nahi):</h3>
<ul>
<li>Doodh</li>
<li>Anda</li>
<li>Bread</li>
</ul>
<h3>Recipe Steps (order matter karta hai):</h3>
<ol>
<li>Pani garam karo</li>
<li>Chai patti daalo</li>
<li>5 minute ubalo</li>
</ol>
<h3>Nested list:</h3>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables</li>
</ul>📋
Lists ek shopping list ya numbered instructions jaisi hain — <ul> unordered (bullets, order matter nahi) hai jaise items ki list, <ol> ordered (numbers, order matter karta hai) hai jaise recipe steps.
1 / 2
⚡ Quick Recap
- ul = unordered (bullets), ol = ordered (numbers)
- li = list item, dono ke andar common
- Nesting se sub-lists ban sakti hain
On this page (2 subtopics)
<dl> (description list) key-value jaisi information ke liye hai — term (dt) aur uska description (dd). Glossaries, FAQs, ya metadata dikhane ke liye natural fit hai.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — web pages ka structure.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — web pages ki styling.</dd>
</dl>Tip: dl bahut underused hai — bahut developers sirf ul/ol jaante hain, lekin term-definition jaisi content ke liye dl semantically zyada correct hai.
Website navigation menus almost hamesha ul ke andar li elements se banaye jaate hain (chahe visually bullets na dikhein, CSS se hata diye jaate hain) — semantically ye "list of links" hi hai.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<!-- CSS list-style: none; se bullets visually hata dete hain -->Tip: Ye pattern (nav > ul > li > a) itna common hai ki almost har website ke navigation mein yehi structure milega — screen readers isse "3 items ki list" ke roop mein announce karte hain, jo useful context hai.