Html lists | List tags in Html5

How to use Html list tags?

There are three list elements or tags in HTML language. There list tags are used to display lists in HTML. How the lists are shown in HTML can be modified with the help of CSS Cascading Style sheets. Here is the code for HTML list tags.

HTML Code Example

<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset="UTF-8" />

<title>

HTML Lists

</title>

</head>

<body>

<h3>

HTML Lists

</h3>

<ol>

<li> One </li>

<li> Two </li>

<ol>

<li> Four </li>

<li> Five </li>

<li> Six </li>

</ol>

<li> Three </li>

</ol>

<ul>

<li> Four </li>

<li> Five </li>

<ul>

<li> Six </li>

<li> Seven </li>

<li> Eight </li>

</ul>

<li> Six </li>

</ul>

<dl>

<dt>One</dt>

<dd>The first non-zero number.</dd>

<dt>Two</dt>

<dd>The number after one.</dd>

<dt>Three</dt>

<dd>Here is the third one</dd>

<dt>Four</dt>

<dd>Now the last one.</dd>

</dl>

</body>

</html>

Output:

HTML Lists

  1. One
  2. Two
    1. Four
    2. Five
    3. Six
  3. Three
  • Four
  • Five
    • Six
    • Seven
    • Eight
  • Six

One

The first non-zero number.

Two

The number after one.

Three

Here is the third one

Four

Now the last one.

Here we have used three different types of lists. The first type of HTML list is the <ol> ordered list tag. The <li> or list items are the inline elements. We have nested the <ol> into another <ol>. You can that the numbering is starting from one in the nested <ol> tags. The starting of the list can be changed with the help of “start” attribute.

Next is the <ul> or an unordered list tag. We have nested the <ul> in another <ul> and the bullets are changed. These bullets can be set as you desire with the help of CSS. This is called <ul> because it is not ordered in any sequence.

The last one is called the definition list tag. These lists are used for displaying definitions as lists. The <dl> or the definition list tag contains <dt> definition title and <dd> the definition data tags.

You can change the styles of all the HTML lists with the help of CSS.

Comments