how to create a list in html

 

in this tutorial we are going to learn  how to create a list in html

You can read our previous tutorials.

what is HTML

Basic HTML Tags

how to create a list in html

how to create a list in html

Many time we need to use lists to display data on web  . HTML provides three  types of lists .

  1. ordered list
  2. unordered list 
  3. html definition list

 

Let start with

ordered list html

Ordered List <ol>

in ordered list in html , each item in list numbered with numerical value .

Ordered list html start with

<ol>  and close with </ol>0

Syntax

<ol>
<li></li>

</ol>

 

html list item

<li> stand for List items 

html list item are placed between opening <li> tag  and   Closing </li> tag.

Complete  Code of Ordered List

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>List in HTML</title>

</head>

<ol>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>JQuery</li>

<li>Ajax</li>

</ol>

<body>

</body>

</html>

output

 Ordered List

Ordered List

When you will run this code data will be display on web in numbering .

 

unordered list html

Unordered list  <ul>

In unordered list , items are display in bullet instead of character.

 Unordered lists created with opening  <ul> and closing </ul>

Syntax

<ul>

<li></li>

&nbsp;</ul>

 

html list item:

<li> List items 

 items of list are placed between opening <li> tag  and   Closing </li> tag.

Complete Code Unordered list

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>List in HTML</title>

</head>

<body>

<h2>Programming Languaeges</h2>

<ul>

<li>C++</li>

<li>JAVA</li>

<li>PHP</li>

<li>PYTHON</li>

<li>RUBBY</li>

</ul>

</body>

</html>

output

unordered list html

unordered list html

After running this code data in list items  will be display in bullet form.

html definition list.

html definition list <dl>

If you need to add some description with items in list , you can use html definition list.

html definition list start with opening <dl>  tag and closing </dl> tag.  Further there are two types of pair in <dl>   ,  <dt> and <dd>.

<dt> stand for Definition term

It is used for term defined in definition list.

<dd>  stand for   definition data

It is user for defined data in list.

Syntax :

<dl>

<dt></dt>

<dd></dd>

</dl>

complete code of html definition list

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>List in HTML</title>

</head>

<div style="padding-left:40px">

<h2>Programming Languaeges</h2>

<dl>

<dt>HTML</dt>

<dd>HTML stand for Hyper text Markup language ,HTML is language , which is used to create&nbsp; pages </dd><br>

<dt>CSS </dt>

<dd>CSS stands for Cascading Style She. CSS is uded to make web pages beautiful and stylish</dd><br>

<dt>JavaScript</dt>

<dd>JavaScript is client side programming language , which is used to make web pages Interactive&nbsp;&nbsp; </dd>

</dl>

</div>

</body>

</html>

output

html definition list

html definition list

nested list html

You can create a list inside a list item , which is called nested list .

to create nested list put list  inside <li> in order to make it nested list.

Syntax  :

<ul>

<li>Front End Development

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>Ajax</li>

</ul>

</li>

<li>Back end Development </li>

<li>

<ul>

<li>PHP</li>

<li>C#</li>

<li>PYTHON</li>

<li>RUBBY</li>

</ul>

</li>

</ul>

 

 nested list html complete code

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

</head>

<body>

<div>

<h2>Web Desining &quot; Development </h2>

<ul>

<li>Front End Development

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>Ajax</li>

</ul>

</li>

<li>Back end Development </li>

<li>

<ul>

<li>PHP</li>

<li>C#</li>

<li>PYTHON</li>

<li>RUBBY</li>

</ul>

</li>

</ul>

</body>

</html>

 

output

nested list html

nested list html

 

 

Summary :

 

In this tutorial we have learned about list .

There are three types of lists in HTML

ordered  list which is use  numbers

unordered list  which is use bullets

definition list which used to define terms in list items.

how to insert image in html

 

Leave a Reply

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