HTML List(unordered list,ordered list,description list)

HTML List(unordered list,ordered list,description list)

There are three type of html lists..

1. unorderd list

2. ordered list

3. definition list..

I have provide some html list example below..

HTML List(unordered list,ordered list,description list)

1. HTML unordered list:
Unordered tag start with <ul> and end with </u> and list item start with <li> and end with </li>
   =>unorderd list example:

?

1 2 3 4 5

<ul> <li>HTML List</li> <li>HTML</li> <li>CodeNair</li> </ul>

— The output of the above example will look something like this:

• HTML List
• HTML
• CodeNair

1. HTML unordered list:-- Choose List Item Marker
list-style-type property is used to define the style of list item marker
list-style-type:disc -- by default..
list-style-type:circle --set list item marker to circle
list-style-type:square --set list item marker to  square 
list-style-type:upper-roman --set list item marker to Upper Roman
list-style-type:upper-alpha  --set list item marker to Uppercase 
   =>unorderd list item marker example:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<ul style="list-style-type:disc">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ul> <ul style="list-style-type:circle">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ul> <ul style="list-style-type:square">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ul>   <ul>   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ul>   <ul style="list-style-type:upper-roman">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ul>   <ul style="list-style-type:upper-alpha">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ul>

— The output of the above example will look something like this:

html unordered list

2. ordered list:
ordered tag start with <ol> and list item start with <li> tag..
list item will marked with number by default
   =>ordered list example:

?

1 2 3 4 5

<ol>   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ol>

— The output of the above example will look something like this:

1. HTML List
2. HTML
3. CodeNair

  =>ordered list marker : html type attribute
type=1 -- number value by default
type=A  --list item will be marked with uppercase
type=a  --list item will be marked with lowercase
type=I  --list item will be marked with upper roman
type=i  --list item will be marked with lower roman..
  =>ordered list marker Example:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<ol type="A">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ol> <ol type="a">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ol> <ol type="I">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ol> <ol type="i">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ol> <ol type="1">   <li>HTML List</li>   <li>HTML</li>   <li>CodeNair</li> </ol>

— The output of the above example will look something like this:

html ordered list

3. HTML defination list:
A definition list is a lists of item with a description for each item..
   =>definition list example:

?

1 2 3 4 5 6 7 8

<dl>   <dt>HTML</dt>   <dd>- Hypertext Markup Language</dd>   <dt>Web Design</dt>   <dd>- HTML and CSS</dd>   <dt>CodeNair</dt>   <dd>- Web Development and Online Earning</dd> </dl>

— The output of the above example will look something like this:

HTML

- Hypertext Markup Language

Web Design

- HTML and CSS

CodeNair

- Web Development and Online Earning

HTML nested list:
   =>nested list example 1:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<ul>   <li>HTML List</li>   <li>CodeNair     <ul>       <li>HTML CSS</li>       <li>PHP MySQL</li>     </ul>   </li>   <li>Web Programming      <ul>      <li>Web Design</li>   <li>Web Development</li>   </ul>   </li> </ul>

— The output of the above example will look something like this:

• HTML List
• CodeNair
  • HTML CSS
  • PHP MySQL
• Web Programming
  • Web Design
  • Web Development

   =>nested list example 2:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<ul>   <li>HTML List</li>   <li>CodeNair     <ul>       <li>HTML CSS</li>       <li>PHP MySQL</li>     </ul>   </li>   <li>Web Programming      <ul>      <li>Web Design      <ul>         <li>HTML</li>      <li>CSS</li>      </ul>   </li>   <li>Web Development      <ul>         <li>PHP</li>      <li>ASP.NET</li>      </ul>   </li>   </ul>   </li> </ul>

— The output of the above example will look something like this:

• HTML List
• CodeNair
  • HTML CSS
  • PHP MySQL
• Web Programming
  • Web Design
    • HTML
    • CSS
  • Web Development
    • PHP
    • ASP.NET

HTML Horizontal list:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<!DOCTYPE html> <html> <head> <style> ul {     list-style: none;     overflow:hidden;  margin: 0;     padding: 0;     background-color: black; } li{   float:left; } li a {     display:block;     color: white;     text-align: left;     padding: 15px;     text-decoration: none;  font-weight:bold; }   li a:hover {     background-color: red; } </style> </head> <body>   <ul>   <li><a href="#home">Home</a></li>   <li><a href="#news">CodeNair</a></li>   <li><a href="#contact">HTML</a></li>   <li><a href="#contact">JavaScript</a></li>   <li><a href="#about">CSS</a></li> </ul>   </body> </html>

— The output of the above example will look something like this:

html horizontal list

That's it Friends all about html list.. Thank you for Visiting...