HTML Lists Tags

HTML Lists Tags
Nikhil
Published on 2021-07-01 10:51:57

HTML List tags, order list, unordered list, and so on, and also code examples of a list.

HTML offers three ways for specifying lists: ordered lists, unordered lists, and description lists. Ordered lists use ordinal sequences to indicate the order of list elements, unordered lists use a defined symbol such as a bullet to list elements in no designated order, and description lists use indents to list elements with their children. This topic explains the implementation and combination of these lists in HTML markup.

HTML 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:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <ol>
    <li>Item</li>
    <li>Another Item</li>
    <li>Yet Another Item</li>
  </ol>
</body>
</html>

 

This will produce a numbered list (which is the default style):

1. Item
2. Another Item
3. Yet Another Item

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.

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <ol start="3">
    <li>Item</li>
    <li>Some Other Item</li>
    <li>Yet Another Item</li>
  </ol>
</body>
</html>

 

This will produce a numbered list (which is the default style):

3. Item
4. Some Other Item
5. Yet Another Item

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="7"></li>

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.

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <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>
</body>
</html>

 
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

Version ≥ 5

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

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <ol reversed>
    <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>
</body>
</html>

 

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.

HTML 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">

 

Type Description Examples
1 Default value - Decimal numbers 1,2,3,4
a Alphabetically ordered (lowercase) a,b,c,d
A Alphabetically ordered (uppercase) A,B,C,D
i Roman Numerals (lowercase) i,ii,iii,iv
I Roman Numerals (uppercase) I,II,III,IV

 

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>.

HTML Unordered List


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:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <ul>
    <li>Item</li>
    <li>Another Item</li>
    <li>Yet Another Item</li>
  </ul>
</body>
</html>

 

This will produce a bulleted list (which is the default style):

  • Item
  • Another Item
  • Yet Another Item

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>.

HTML Nested lists


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

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <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>
</body>
</html>

  • item 1
  • item 2
    • sub-item 2.1
    • sub-item 2.2
  • item 3

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

You can nest different types of list, too:

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <ol>
    <li>Hello, list!</li>
    <li>
      <ul>
        <li>Hello, nested list!</li>
      </ul>
    </li>
  </ol>
</body>
</html>

 

HTML 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.

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <dl>
    <dt>name 1</dt>
    <dd>value for 1</dd>
    <dt>name 2</dt>
    <dd>value for 2</dd>
  </dl>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub list Example</title>
</head>
<body>
  <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>
</body>
</html>

 

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website