Please support if you like my work by payment through upi: sinhamit@icici or payment by bank
account name: Amit Kumar Sinha,
account number: 2646728782
IFSC code: KKBK0005660
SWIFT: KKBKINBB
List Items in Category: HTML by amit
🕙 Posted on 2023-04-23 at 15:44:58 Read in Hindi ...
Different Types of Lists:
In HTML, there are various types of list, where you can place items.
Unordered List
<ul> </ul> is the Unordered List HTML element, in which you can place <li> </li> HTML list items.
In simple unordered list, where you don't add type attribute, output will be displayed with bullets.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- Item 1
- Item 2
- Item 3
When value of type attribute is 'square' then unordered lists is displayed with square instead of bullets.
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- Item 1
- Item 2
- Item 3
When value of type attribute is 'circle' then unordered lists is displayed with circle instead of bullets.
<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- Item 1
- Item 2
- Item 3
Instead of type attribute, now different values for 'list-style-type' or 'list-style' are added in either style attribute or embedded or external stylesheets (CSS).
<ul style="list-style-type: decimal-leading-zero;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- Item 1
- Item 2
- Item 3
You can nest these unordered list into each other (without type , style attribute, embedded or external stylesheets). The default behaviour is:
<ul>
<li>One</li>
<li>Two</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<ul>
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
<li>2.3</li>
</ul>
<li>Three</li>
</ul>
- One
- Two
- 2.1
- 2.2
- 2.2.1
- 2.2.2
- 2.2.3
- 2.3
- Three
Some developers place these NESTED unordered lists inside <li> </li> element, but the output is displayed same as below:
<ul>
<li>One</li>
<li>Two
<ul>
<li>2.1</li>
<li>2.2
<ul>
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
<li>2.3</li>
</ul>
</li>
<li>Three</li>
</ul>
- One
- Two
- 2.1
- 2.2
- 2.2.1
- 2.2.2
- 2.2.3
- 2.3
- Three
Ordered List
<ol> </ol> is the Ordered List HTML element, in which you can place <li> </li> HTML list items.
In simple ordered list, where you don't add type attribute, output will be displayed with integer (numbers) starting from 1.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
- Item 1
- Item 2
- Item 3
When value of type attribute is 'a' then ordered lists starts with lowercase alphabets.
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
- Item 1
- Item 2
- Item 3
When value of type attribute is 'A' then ordered lists starts with uppercase alphabets.
<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
- Item 1
- Item 2
- Item 3
When value of type attribute is 'i' then ordered lists starts with lowercase roman numeric symbols. start attribute is used when we want the list be started from some other number.
<ol type="i" start="5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
- Item 1
- Item 2
- Item 3
When value of type attribute is 'I' then ordered lists starts with uppercase roman numeric symbols.
<ol type="I" start="4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
- Item 1
- Item 2
- Item 3
<ol>
<li>Item 1</li>
<ol type="A" start="8">
<li>Item 1</li>
<li>Item 2</li>
<ol type="i" start="5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<li>Item 3</li>
</ol>
<li>Item 2</li>
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Item 3</li>
</ol>
- Item 1
- Item 1
- Item 2
- Item 1
- Item 2
- Item 3
- Item 3
- Item 2
- Item 1
- Item 2
- Item 3
- Item 3
Caution: You should not mix small roman number with lowercase alphabetical, and uppercase roman number with uppercase alphabetical letters, as explained above because readers may be confused with nested ordered lists.
You can also use tiny images (resolution should be less than 32px × 32 px) in unordered list items, in place of bullets.
<ul style="list-style-image: url( './images/ra-favicon.png' );">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- Item 1
- Item 2
- Item 3
You can also use words in <dl> definition list </dl>, that is, <dt> definition term </dt>, in place of bullets and their respective details in list items <dd> definition details </dd>, as explained below :
<dl>
<dt> One </dt>
<dd> One is the first. </dd>
<dt> Two </dt>
<dd> Two is the second. </dd>
<dt> Three </dt>
<dd> Three is the third. </dd>
</dl>
- One
- One is the first.
- Two
- Two is the second.
- Three
- Three is the third.
Bootstrap framework will change the value of margin-left to <dd></dd> to zero.
Leave a Comment:
Amit Sinha March 2nd, 2023 at 9:30 PM
😃 😄 😁 😆 😅 😂 😉 😊 😇 😍 😘 😚 😋 😜 😝 😶 😏 😒 😌 😔 😪 😷 😵 😎 😲 😳 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 😤
Ribhu March 3rd, 2023 at 9:30 PM
🐵 🐒 🐶 🐩 🐺 🐱 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇
