Home / Html Learning / Html List tutorial 7/8

Html List tutorial 7/8

  1. The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item. If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.

  2. Html List

Name Code Output
An unordered list
<!DOCTYPE html>
<html>
<body>

<h4>An Unordered List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

An Unordered List:

  • Coffee
  • Tea
  • Milk
An ordered list
<!DOCTYPE html>
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>

An Ordered List:

  1. Coffee
  2. Tea
  3. Milk
Different types of ordered lists
<!DOCTYPE html>
<html>
<body>
<h4>Numbered list:</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Letters list:</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

</body>
</html>

Numbered list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Letters list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Lowercase letters list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Roman numbers list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Lowercase Roman numbers list:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
Different types of unordered Lists
<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5.
Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>

<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>

 Note: The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:

Disc bullets list:

  • Apples
  • Bananas
  • Lemons
  • Oranges

Circle bullets list:

  • Apples
  • Bananas
  • Lemons
  • Oranges

Square bullets list:

  • Apples
  • Bananas
  • Lemons
  • Oranges
Nested list
<!DOCTYPE html>
<html>
<body>
<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

A nested List:

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
Nested list 2
<!DOCTYPE html>
<html>
<body>
<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea
      <ul>
      <li>China</li>
      <li>Africa</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

A nested List:

  • Coffee
  • Tea
    • Black tea
    • Green tea
      • China
      • Africa
  • Milk
Definition list
<!DOCTYPE html>
<html>
<body>

<h4>A Definition List:</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

A Definition List:

Coffee
- black hot drink
Milk
- white cold drink
Html List tutorial 7/8 Html List tutorial 7/8 Reviewed by Abdul hanan on 07:52:00 Rating: 5

You May Also Like

Powered by Blogger.