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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<!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...