HTML List

HTML List


Basically We have Two different type of list 1.Order list 2.Unorderlist Unordered HTML Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles):


<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Default Bullets</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

Output:
Unordered List with Default Bullets

    Coffee
    Tea
    Milk

Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:
Style 	Description
list-style-type:disc 	The list items will be marked with bullets (default)
list-style-type:circle 	The list items will be marked with circles
list-style-type:square 	The list items will be marked with squares
list-style-type:none 	The list items will not be marked
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

Output:
Unordered List with Disc Bullets

    Coffee
    Tea
    Milk

Circle
<ul style="list-style-type:circle">
Square
<ul style="list-style-type:square">

Ordered HTML Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
Numbers
Upper Letters

Horizontal Lists HTML lists can be styled in many different ways with CSS. One popular way, is to style a list to be displayed horizontally:

<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
    display:inline;
}
</style>
</head>
<body>

<h2>Horizontal List</h2>

<ul id="menu">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
</ul>  

</body>
</html>

Output:
Horizontal List

    HTML CSS JavaScript PHP