HTML LIST

HTML Lists are used to accumulate general piece of information in a structured way in HTML document which will be more accessible and easy to read on the webpage,

HTML List specifies the information which contains one or more element in a semantic way. Let us understand the HTML Lists in detail.

Syntax of HTML Lists

The <li> tag are used to define HTML Lists items and to represent the HTML document information.

The <ul> tag are used to define HTML Unordered List and The <ol> tag are used to define HTML Ordered List.

The <dl> tag are used to define HTML Description List  also  The <dt> tag are used to define a term name  and The <dd> tag are used to define each term in a description List.

 

HTML List Features

  • HTML Lists use the property of CSS in order to do styling to giving different look to list tags in the document.
  • HTML Lists help to make a table of contents having subsections easily.
  • HTML List helps to arrange the data in a semantic way which makes it easy to interpret for the readers with visual impairment.
  • For changing the position of ordered and unordered lists are flexible in HTML Lists.
  • HTML Lists are case sensetive elements .

Types of HTML Lists

There are three ways to state the lists of information which must contain one or more list elements in it and each list has a specific purpose on the webpage.

The type of HTML List are:

1. HTML Unordered List

It is defined by <ul> tag and It is collection of related items with no particular sequence and each element starts with <li> tag and the HTML List items are marked with a bullet.

Example:  Unordered HTML List with Disc bullet. It is also a default list markup.

<!DOCTYPE html>
<html>
 <head>
      <title> Unordered HTML List</title>
   </head>
   <body>
     <h2>Common Name List</h2> 
  
<ul style="list-style-type:disc"> 
         <li>Aaquib</li>
         <li>Shahbaz</li>
         <li>Krishna</li>
         <li>Aman</li>
      </ul>
   </body>
   
</html>

output: 

Example:  Unordered HTML List with a square bullet. It is also a default list markup.

<!DOCTYPE html>
<html>
 <head>
      <title> Unordered HTML List</title>
   </head>
   <body>
     <h2>Common Name List</h2> 
  <ul style="list-style-type:square;">
         <li>Aaquib</li>
         <li>Shahbaz</li>
         <li>Krishna</li>
         <li>Aman</li>
      </ul>
   </body>
   
</html>

output: 

2. HTML Ordered List

It is defined by <ol> tag and it is a collection of related items in a specific order and each element start with the <li> tag and the HTML List elements are marked with a number is successive order.

Example:  Ordered HTML List numbered in type =”1″ Attribute. It is also a default number list type markup.

<!DOCTYPE html> 
<html> 
<body> 

<h2>Ordered HTML List with Number</h2> 

<ol type="1"> 
<li>Physics</li> 
<li>Maths</li> 
<li>Chemistry</li> 
<li>Biology</li> 
</ol> 

</body> 
</html>

output: 

Example:  Ordered HTML List numbered in type = “I” Upper Case Roman Attribute.

<!DOCTYPE html> 
<html> 
<body> 

<h2>Ordered HTML List with Number</h2> 

<ol type="I">
<li>Physics</li> 
<li>Maths</li> 
<li>Chemistry</li> 
<li>Biology</li> 
</ol> 

</body> 
</html>

output:

 

Example:  Ordered HTML List with specified numbered other than default number by using start Attribute.

<!DOCTYPE html>
<html>
<body>

<h2>start Attribute IN html list</h2>

<ol start="10">
  <li>Neon</li>
  <li>Sodium</li>
  <li>Magnesium</li>
</ol>

</body>
</html>

 output: 

 

3. HTML Description List

It is defined by <dl> tag and it defines the items and the term names by using <dt> tag and describe each element of the term by using <dd> tag, HTML List elements are arranged in order to explore the information in the list.

 

Example:   Description list  for the data  of term as follows

<!DOCTYPE html>
<html>
<body>

<h2>Description in HTML List</h2>

<dl>
  <dt>codedec</dt>
  <dd>- Website to learn programming</dd>
  <dt>codebun</dt>
  <dd>- website to do programming projects</dd>
</dl>

</body>
</html>

output: 

 

 

Example:   Description  List for the term data as follows

<!DOCTYPE html>
<html>

   <head>
      <h2>Description in HTML List</h2>
   </head>
  
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>Stands for Hyper Text Markup Language</dd>
         <dt><b>CSS</b></dt>
         <dd>Stands for Cascading Style Sheet</dd>
      </dl>
   </body>
  
</html>

output: