<ul> tag

<ul> tag denotes unordered list. Each <ul> tag contains <li> tag. <li> tag denotes list items.List items styling can be done using Css list-style property.
Css list-style property values are:

  • disc
  • circle
  • square
  • none

By default, list items in <ul> tag is disc.


Example


<html>
<body>
<h2>Example of Unordered List</h2>

<h3>ul with Disc Bullets</h3>
<ul>
<li style="list-style:disc">
Pen
</li>
<li style="list-style:disc">
Pencil</li>
<li style="list-style:disc">
Rubber
</li>
</ul> 

<h3>ul with Circle Bullets</h3>
<ul>
<li style="list-style:circle">
Pen
</li>
<li style="list-style:circle">
Pencil
</li>
<li style="list-style:circle">
Rubber
</li>
</ul>  

<h3>ul with Square Bullets</h3>
<ul>
<li style="list-style:square">
Pen
</li>
<li style="list-style:square">
Pencil
</li>
<li style="list-style:square">
Rubber
</li>
</ul>

<h3>ul without Bullets</h3>
<ul>
<li style="list-style:none">
Pen
</li>
<li style="list-style:none">
Pencil
</li>
<li style="list-style:none">
Rubber
</li>
</ul>  
</body>
</html>


Output

Example of Unordered List

ul with Disc Bullets

  • Pen
  • Pencil
  • Rubber

ul with Circle Bullets

  • Pen
  • Pencil
  • Rubber

ul with Square Bullets

  • Pen
  • Pencil
  • Rubber

ul without Bullets

  • Pen
  • Pencil
  • Rubber

<ol> tag

<ol> tag denotes ordered list. Each <ol> tag contains <li> tag. <li> tag denotes list items. List items styling can be done using type attribute of the <ol> tag.
type attribute values are:

  • Numbers(e.g. 1)
  • Uppercase letters(e.g A)
  • Lowercase letters(e.g a)
  • Uppercase roman numbers(e.g I)
  • Lowercase roman numbers(e.g i)

By default, list items in <ol> tag is numbers(e.g. 1) and starts counting from 1. In <ol> tag use the start attribute to start counting from a specified number.


Example


<html>
<body>
<h2>Example of Ordered List</h2>

<h3>ol with Numbers</h3>
<ol>
  <li>Pen</li>
  <li>Pencil</li>
  <li>Rubber</li>
</ol>

<h3>ol with Start Attribute</h3>
<ol start="50">
  <li>Pen</li>
  <li>Pencil</li>
  <li>Rubber</li>
</ol>

<h3>ol with Capital Letters</h3>
<ol type="A">
  <li>Pen</li>
  <li>Pencil</li>
  <li>Rubber</li>
</ol>  

<h3>ol with Small Letters</h3>
<ol type="a">
  <li>Pen</li>
  <li>Pencil</li>
  <li>Rubber</li>
</ol>

<h3>ol with Capital Roman Letters</h3>
<ol type="I">
  <li>Pen</li>
  <li>Pencil</li>
  <li>Rubber</li>
</ol>  

<h3>ol with Small Roman Letters</h3>
<ol type="i">
  <li>Pen</li>
  <li>Pencil</li>
  <li>Rubber</li>
</ol>

</body>
</html>


Output

Example of Ordered List

ol with Numbers

  1. Pen
  2. Pencil
  3. Rubber

ol with Start Attribute

  1. Pen
  2. Pencil
  3. Rubber

ol with Capital Letters

  1. Pen
  2. Pencil
  3. Rubber

ol with Small Letters

  1. Pen
  2. Pencil
  3. Rubber

ol with Capital Roman Letters

  1. Pen
  2. Pencil
  3. Rubber

ol with Small Roman Letters

  1. Pen
  2. Pencil
  3. Rubber
Subscribe & Get Regular Updates On Your E-mail