FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@coder 1215

Do you know about HTML Lists and it's Type?


2021-11-14 22:13 · 9 min read

HTML offers three ways for specifying lists: ordered lists, unordered lists, and description lists:

  • Ordered lists:-Ordered lists use ordinal sequences to indicate the order of list elements.
  • Unordered lists:-unordered lists use a defined symbol such as a bullet to list elements in no designated order.
  • Description lists:-Description lists use indents to list elements with their children

explains the implementation and combination of these lists in HTML markup.


Ordered List

An ordered list can be created with the <ol> tag and each list item can be created with the <li> tag as in the
example below:

<ol>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ol>

 

Manually changing the numbers

There are a couple of ways you can play with which numbers appear on the list items in an ordered list. The first way is to set a starting number, using the start attribute. The list will start at this defined number, and continue incrementing by one as usual.

<ol start="3">
<li>Item</li>
<li>Some Other Item</li>
<li>Yet Another Item</li>
</ol>

You can also explicitly set a certain list item to a specific number. Further list items after one with a specified value will continue incrementing by one from that list item's value, ignoring where the parent list was at.

<li value="4">now next li number will start with 5 </li>

 

Example:-

It is also worth noting that, by using the value attribute directly on a list item, you can override an ordered list's existing numbering system by restarting the numbering at a lower value. So if the parent list was already up to value 7, and encountered a list item at value 4, then that list item would still display as 4 and continue counting from that point again.


<ol start="5">
<li>Item</li>
<li>Some Other Item</li>
<li value="4">A Reset Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ol>

So the example above will produce a list that follows the numbering pattern of 5, 6, 4, 5, 6 - starting again at a number lower than the previous and duplicating the number 6 in the list.

 

Note :- The start and value attributes only accept a number - even if the ordered list is set to display as Roman numerals or letters in all email clients

 

Reverse numbering

You can reverse the numbering by adding reversed in your ol element:

<ol reversed>
<li>Item</li>
<li>Some Other Item</li>
<li>A Reset Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ol>

 

Reverse numbering is helpful if you're continually adding to a list, such as with new podcast episodes or presentations, and you want the most recent items to appear first.
Changing the type of numeral
You can easily change the type of numeral shown in the list item marker by using the type attribute

<ol type="1|a|A|i|I">
TypeDescriptionExamples
1Default value - Decimal numbers1,2,3,4
aAlphabetically ordered (lowercase)a,b,c,d
AAlphabetically ordered (uppercase)A,B,C,D
iRoman Numerals (lowercase)i,ii,iii,iv
IRoman Numerals (uppercase)I,II,III,IV

 

Info :- You should use ol to display a list of items, where the items have been intentionally ordered and order should be emphasized. If changing the order of the items does NOT make the list incorrect, you should use <ul>.

 

Unordered List (<ul>)

An unordered list can be created with the <ul> tag and each list item can be created with the <li> tag as shown by the example below:

<ul>
<li>Item</li>
<li>Another Item</li>
<li>Yet Another Item</li>
</ul>

Info :- You should use ul to display a list of items, where the order of the items is not important. If changing the order of the items makes the list incorrect, you should use <ol>.

 

Nested lists:

You can nest lists to represent sub-items of a list item

<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>sub-item 2.1</li>
<li>sub-item 2.2</li>
</ul>
</li>
<li>item 3</li>
</ul>

 

Note:-The nested list has to be a child of the li element.

You can nest different types of list, too:

 

<ol>
<li>item 1</li>
<li>item 2
<ol>
<li>sub-item 2.1</li>
<li>sub-item 2.2</li>
</ol>
</li>
<li>item 3</li>
</ol>

 

Description List

A description list (or definition list, as it was called before HTML5) can be created with the <dl> element. It consists of name-value groups, where the name is given in the <dt> element, and the value is given in the <dd> element.

<dl>
<dt>name 1</dt>
<dd>value for 1</dd>
<dt>name 2</dt>
<dd>value for 2</dd>
</dl>

A name-value group can have more than one name and/or more than one value (which represent alternatives):

<dl>
<dt>name 1</dt>
<dt>name 2</dt>
<dd>value for 1 and 2</dd>
<dt>name 3</dt>
<dd>value for 3</dd>
<dd>value for 3</dd>
</dl>

 

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
CSS3 RESPONSIVE UI...
How to host a web page in 10 minutes....
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© blog.theprodevelopers.com 2024. All Rights Reserved. Powered by Pro Developer