HTML — Lets understand List

3 min readSep 18, 2024

If you are not going through our previous topic and want to understand basic HTML. Just read Getting Started With HTML.

List — for display items in order or sequence wise in HTML we use combination of multiple tag <UL> tag , <OL> tag, <DL> tag for defferent types of list

OK now let understand concept for create unordered list we use <ul> and for each list Items use <li> tag. Same for create Ordered list we use <ol> tag and for each list Items use <li> tag.
Descriptive or definition List we use <dl> tag with <dt> and <dd> tag
lets create new file “list_tag.html” and write below code

<!DOCTYPE html>
<html>
<head>
    <title>List Tags Example</title>
</head>
<body>

<h2>Unordered List (Bulleted List)</h2>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<h2>Ordered List (Numbered List)</h2>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

<h2>Definition List</h2>
<dl>
    <dt>Coffee</dt>
    <dd>A popular caffeinated beverage.</dd>
    <dt>Tea</dt>
    <dd>Another popular beverage, often enjoyed hot or iced.</dd>
    <dt>Milk</dt>
    <dd>A dairy product often consumed as a beverage.</dd>
</dl>

</body>
</html>

For change list items indication such that for unordered list if you wish to change indicator from bullet to square or disc. Also in order list items wish to change number to roman number or even alphabets we use “type” attributes
for <ul> tags we can pass type as
<ul type=”disc”>
<ul type=”circle”>
<ul type=”square”>
For <ol> tags we can pass type as
<ol type=”1">
<ol type=”a”>
<ol type=”i”>
<ol type=”A”>
<ol type=”I”>

Lets create new file “list_type_tag.html” and write below code to see output

<!DOCTYPE html>
<html>
<head>
    <title>List Indicators</title>
</head>
<body>

<h2>Unordered Lists</h2>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul type="disc">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul type="circle">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul type="square">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<h2>Ordered Lists</h2>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
<ol type="A">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
<ol type="a">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
<ol type="I">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
<ol type="i">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

</body>
</html>

For Ordered List we can also use “start” and “reversed” attribute for set starting point of the numbering and for making list reversed. both attribute are not useful for Unordered list . add the below code to above file to check the output

<h2>Unordered Lists</h2>
<ul start="5">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<ul reversed>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<h2>Ordered Lists</h2>
<ol start="10">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
<ol reversed>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

HTML — Lets understand List

Written by Sourabh Bhardwaj

No responses yet