HTML List
HTML List
This is the lesson 9 of 10 in the course HTML - Beginner to Advance

In this chapter, we will learn about HTML List. There are three types of lists in HTML, Ordered list, Unordered list, and definition list.

Table of Contents

HTML List

HTML Lists are used to present information in a specified manner.

As we mentioned there are 3 types of lists in HTML, we will discuss them one by one.

HTML Ordered List

If we need to present our information in a numeric list then we can use this. It shows number bullets. An ordered list starts with the <ol> tag and ends with </ol> tag. The list items will be marked with numbers by default. It can be alphabetical also.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Ordered List</h2>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>  

</body>
</html>

The Type Attribute – Ordered List

Using type attribute we can change the display format of a list like in numeric, alphabetical, or roman numbers.

type=’1′

the list items will be shown with numbers by default.

<ol type='1'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol> 

type=’i’

The list will be shown with roman numbers in lowercase.

<ol type='i'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

type=’I’

the list will be shown with roman numbers in Uppercase.

<ol type='I'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

type=’a’

The list will be shown in small alphabets.

<ol type='a'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

type=’A’

The list will be shown in the capital alphabet.

<ol type='A'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

The start Attribute

the start attribute is used to start counting from a specific number. It works with all types. It takes only numeric values. If type=’A’ and start=’5′, It will start counting from ‘E’.

<ol type='A' start='5'> 
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol type='1' start='101'> 
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

HTML Unordered List

As an ordered list shows numeric, alphabetic, and roman numbers, It will be marked with bullets. The default value is a small black circle. But it can be changed using the type attribute. This list starts with <ul> tag and each list item starts with <li> tag.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Unordered List</h2>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>  

</body>
</html>

The type Attribute – Unordered List

In an unordered list, there are four types of values we can give to type attribute: disk, circle, square, and none.

type=’disk’

It sets the list item marker as a bullet (default)

<ul type='disk'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul> 

type=’circle’

It sets the list item marker as a circle.

<ul type='circle'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul> 

type=’square’

It sets the list item marker as a square.

<ul type='square'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul> 

type=’none’

It removes the list marker.

<ul type='none'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul> 

List marker as Image

CSS allows us to create a list marker as an image. We can use the list-style-image property to set marker images. Run the below code to see the difference!

list marker as image
<!DOCTYPE html>
<html>
<head>
<style>
li{
	margin: 0;
	padding: 10px 0 10px 25px;
	list-style: none;
	background-image: url("https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-webinar-optimizing-for-success-google-business-webinar-13.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
    }
</style>
</head>
<body>

<h1>The list-style-image Property</h1>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

</body>
</html>

HTML Description List

the <dl> tag defines a description list, the <dt> tag is used to show the title term and the <dd> is used to write description.

the <dd> gives margin to the description texts.

<h2>A Descirption List</h2>

<dl>
  <dt>Title here</dt>
  <dd>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</dd>
</dl>

How to create navigation bar using List

Create a <ui> list with at least four items as shown below.

<body>

   <ul>
	<li>Home</li>
        <li>Gallery</li>
        <li>About Us</li>
        <li>Contact Us</li>
  </ul>    
</body>


Write the CSS code, first remove the default margin using

*{margin:0px 0px;}


Now align the text center and give the background color for the ul tag.

ul{
  text-align:center;
  background-color:#545454;
}


Write code for li tag, create the display as inline-block, text-transform to uppercase, give the required padding, set the color as white, and set the letter spacing to 0.3px.

ul li{
    	display:inline-block;
        padding:8px 5px;
        text-transform:uppercase;
        color:white;
        letter-spacing:0.3px;
}


create a hover effect for list items.

li:hover{
    	animation: fade 0.5s linear forwards;
}


as we are using animation on hover, so let’s create @keyframe animation with the name ‘fade’ then write animation starts from value to the color we set for the background and text. In to section change the background color to text color and text color to the background color.

You can run the code below!

<!DOCTYPE html>
<html>
<head>
<style>
	*{margin:0px 0px;}
	ul{
        text-align:center;
        background-color:#545454;
    }
    ul li{
    	display:inline-block;
        padding:8px 5px;
        text-transform:uppercase;
        color:white;
        letter-spacing:0.3px;
    }
    li:hover{
    	animation: fade 0.5s linear forwards;
    }
    
    @keyframes fade{
    	from{
        	background-color:#545454;
            color:white;
        }
        to{
        	background-color:white;
            color:#545454;
        }
    }
    
</style>
</head>
<body>

	<ul>
		<li>Home</li>
        <li>Gallery</li>
        <li>About Us</li>
        <li>Contact Us</li>
    </ul>
    
</body>
</html>
Course Navigation<< HTML Table
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply