Types of lists in HTML

Types of lists in HTML




Today we will tell you how lists are provided in the HTML language. The HTML language provides three ways to specify lists of information to your web authors. Let us briefly give you some of these information. All lists of HTML should have one or more list element. May be in the list -

  • <ul> - This is an unorder list. This list lists items using plain tablets.
  • <ol> - This is an order list. This list uses different schemes of numbers to list your items.
  • <dl> - This is a type definition list. This list organizes your items just as they are arranged in a dictionary.

Types of lists in HTML



HTML Unordered Lists

An unordordable list is a collection of related items in HTML. Those who do not have any special order or sequence This list is created using the <ul> tag inside HTML. Each item in the list is marked with a bullet.

Example-

<!DOCTYPE html>

<html>

   <head>

      <title> Unordered List</title>

   </head> 

   <body>

      <ul>

         <li>HTML</li>

         <li>CSS</li>

         <li>JavaScript</li>

         <li>C++</li>

      </ul>

   </body>

</html>


Attribute type of HTML Unordered List

In the HTML you can use the type attribute for the <ul> tag to specify the type of bullet you like. This is a disc, by default, inside the HTML. Let's know more about them.


  • disc-- In HTML , The list item marker to a bullet .
  • circle-- In HTML , The list item marker to a circle.
  • square-- In HTML , The list item marker to a square.
  • none--The list items will not be marked.


Example-Disc Attribute

<!DOCTYPE html>

<html>

<body>

<h2>Disc Bullets</h2>

<ul style="list-style-type:disc">

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ul>

</body>

</html>

<ul type = "disc"> You can also use Attributes in this way.

Example- Circle Attribute

<!DOCTYPE html>

<html>

<body>

<h2>Circle Bullets</h2>

<ul style="list-style-type:circle">

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ul>

</body>

</html>

<ul type = "circle"> You can also use Attributes in this way.


Example- Square Attributes

<!DOCTYPE html>

<html>

<body>

<h2>Square Bullets</h2>

<ul style="list-style-type:square">

 <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ul>

</body>

</html>

 <ul type = "square"> You can also use Attributes in this way.

Example- None Attributes

<!DOCTYPE html>

<html>

<body>

<h2>None Bullets</h2>

<ul style="list-style-type:none">

 <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ul>

</body>

</html>


HTML ordered lists

If you want your items in the numbered list instead of bullets in HTML, you can use the HTML-ordered list. This list is created using the <ol> tag in HTML. The number starts with a number and is incremented by one for each successive sorted list element tagged with <li>.

Example -

<!DOCTYPE html>

<html>



   <head>

      <title>Ordered List</title>

   </head>

   <body>

      <ol>

         <li>HTML</li>

         <li>CSS</li>

         <li>JavaScript</li>

         <li>C++</li>

      </ol>

   </body>

</html>

Type attribute in Ordered List

When creating an Ordered List in HTML, you can use the Type attribute for the <ol> tag to specify the type of number of your choice. In HTML by default, this is a number. Let us understand this with the help of some examples-
Let me tell you some of them before the example.
Ordered HTML List - The Type Attribute


  • <ol type="1"> -The list item in HTML is counted with numbers.
  • <ol type="A"> -In HTML, the list item is counted with uppercase letters.
  • <ol type="a"> -In HTML ,The list items will be counted with lowercase letters.
  • <ol type="I"> - In HTML ,The list items will be counted with uppercase roman numbers.
  • <ol type="i"> -In HTML ,The list items will be numbered with lowercase roman numbers.


Example- Ordered List with Numbers

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">

  <li>HTML</li>

         <li>CSS</li>

         <li>JavaScript</li>

         <li>C++</li>

</ol>

</body>

</html>

Example-Ordered List with Letters

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Letters</h2>

<ol type="A">

   <li>HTML</li>

         <li>CSS</li>

         <li>JavaScript</li>

         <li>C++</li>

</ol>

</body>

</html>

Example-Ordered List with Lowercase Letters

<!DOCTYPE html>

<html>

<body>



<h2>Ordered List with Lowercase Letters</h2>

<ol type="a">

   <li>HTML</li>

         <li>CSS</li>

         <li>JavaScript</li>

         <li>C++</li>

</ol>

</body>

</html>

Example-Ordered List with Roman Numbers

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">

  <li>HTML</li>

         <li>CSS</li>

         <li>JavaScript</li>

         <li>C++</li>

</ol>

</body>

</html>

Example-Ordered List with Lowercase Roman Numbers

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<ol type="i">

  <li>HTML</li>

         <li>CSS</li>

         <li>JavaScript</li>

         <li>C++</li>

</ol>

</body>

</html>


HTML definition list

HTML and XHTML support the definition list both. Entries in the definition list are listed in a dictionary or encyclopedia. The definition list is the ideal way to present vocabulary, and list of terms, or other names, and price lists.

The definition list uses the following three tags.

  • <dl> − The tag defines the description list
  • <dt> −The tag defines the term
  • <dd> -The tag describes each term


Example-

<!DOCTYPE html>

<html>

   <head>

      <title>Definition List</title>

   </head>

   <body>

      <dl>

         <dt><b>HTML</b></dt>

         <dd>Hyper Text Markup Language</dd>

         <dt><b>HTTP</b></dt>

         <dd>Hyper Text Transfer Protocol</dd>

      </dl>

   </body>

</html>


Nested HTML Listings

The lists are created inside these lists:

Example-

<!DOCTYPE html>

<html>

<body>



<h2>HTML Nested List</h2>

<ul>

  <li>CSS</li>

  <li>HTML

    <ul>

      <li>HTML List</li>

      <li>HTML Layout</li>

    </ul>

  </li>

  <li>Javascript</li>

</ul>

</body>

</html>



Control list counting

By default in HTML, an ordered list starts counting from 1. If you want to start counting from a specified number in the ordered list, you can change it by using the start attribute:

Example-

<!DOCTYPE html>

<html>

<body>



<h2>start attribute</h2>

<p>By default in HTML, an ordered list starts counting from 1. If you want to start counting from a specified number in the ordered list, you can change it by using the start attribute:

</p>



<ol start="11">

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ol>



<ol type="I" start="11">

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ol>



</body>

</html>


Horizontal list with CSS
With CSS, you can styling HTML lists in various ways.
Creating a horizontal list is considered to be one of the best ways to create a navigation menu in HTML:

Example-

<!DOCTYPE html>

<html>

<head>

<style>

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333363;

}



li {

    float: left;

}



li a {

    display: block;

    color: white;

    text-align: center;

    padding: 16px;

    text-decoration: none;

}



li a:hover {

    background-color: #111151;

}

</style>

</head>

<body>



<h2>HTML Navigation Menu</h2>



<ul>

  <li><a href="#home">Home</a></li>

  <li><a href="#news">HTML</a></li>

  <li><a href="#contact">CSS</a></li>

  <li><a href="#about">JavaScript</a></li>

</ul>



</body>

</html>

The HTML language provides three ways to specify lists of information to your web authors. Let us briefly give you some of these information. All lists of HTML should have one or more list element. May be in the list.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget