saftutorials.com
HTML Lists Tutorial

HTML Lists is tag that for Create list item element on Web.  Kinds of HTML List: HTML list two type 1) OL - Order List, 2) UL - Unorder ListHTML List declare by <ol> for Order list and </ol> close tag. And Unorder list declare by <ul> and </ul> for close this tag.

Output for HTML Order List

  1. List Item
  2. List Item
  3. List Item
Output for HTML Unorder List
  • List Item
  • List Item
  • List Item


Basic Structure of HTML Order List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ol>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>
</body>
</html>

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

Basic Structure of HTML Unorder List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
</body>
</html>

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

HTML Order List Type




<ol type="1"> - Default case Numerals.

<ol type="I"> - Uppercase Numerals.

<ol type="i"> - Lowercase Numerals.

<ol type="a"> - Lowercase Letters.

<ol type="A"> - Uppercase Letters.

HTML Order List Number Type
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ol type="1">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>
</body>
</html>

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

HTML Order List Number Type with Starting Number
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ol type="1" start="75">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>
</body>
</html>

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

HTML Order List Uppercase Numerals
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ol type="I">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>
</body>
</html>

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

HTML Order List Uppercase Letter
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ol type="A">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>
</body>
</html>

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

HTML Order List Lowercase Numerals with Starting Number
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ol type="i" start="75">
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ol>
</body>
</html>

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

HTML Unorder List Type

<ul type="square"> - Square Type

<ul type="disc"> - Disc Type (Default type)

<ul type="circle"> - Circle Type

HTML Unorder List - Square Type
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ul type="square" >
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
</body>
</html>

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

HTML Unorder List - Circle Type
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ul type="circle" >
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
</body>
</html>

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

HTML Unorder List with Sub Unorder List
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
</head>
<body>
<ul>
  <li>List Item
    <ul>
      <li>Sub List Item</li>
      <li>Sub List Item</li>
      <li>Sub List Item</li>
    </ul>
  </li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
</body>
</html>

  • List Item
    • Sub List Item
    • Sub List Item
    • Sub List Item
  • List Item
  • List Item
  • List Item
  • List Item

HTML Unorder List horizontal menu
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Lists Tutorials</title>
<style type="text/css">
  ul li
  {
    float: left;
    list-style: none;
    margin-right: 15px;
  }
</style>
</head>
<body>
<ul>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
  <li>List Item</li>
</ul>
</body>
</html>

  • List Item
  • List Item
  • List Item
  • List Item

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic