HTML Lists

1.Unordered HTML List.
2.Ordered HTML List

Unordered HTML List

Program on Unordered list

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Different Bullets</h2>
<h3>Disc</h3>
<ul style=”list-style-type:disc”>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ul>
<hr>
<h3>Circle</h3>
<ul style=”list-style-type:circle”>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ul>
<hr>
<h3>Square</h3>
<ul style=”list-style-type:square”>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ul>
<hr>
<h3>None</h3>
<ul style=”list-style-type:none”>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ul>
<hr>
</body>
</html>

Output

Unordered List with Different Bullets

Disc

  • Apple
  • Grapes
  • Strawberry

Circle

  • Apple
  • Grapes
  • Strawberry

Square

  • Apple
  • Grapes
  • Strawberry

None

  • Apple
  • Grapes
  • Strawberry

Ordered HTML List

Program on Ordered list

<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with different Bullets</h2>
<h3>Numbers</h3>
<ol type=”1″>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ol>
<hr>
<h3>Uppercase Letters</h3>
<ol type=”A”>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ol>
<hr>
<h3>Lowercase Letters</h3>
<ol type=”a”>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ol>
<hr>
<h3>Uppercase Roman Numbers</h3>
<ol type=”I”>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ol>
<hr>
<h3>Lowercase Roman Numbers</h3>
<ol type=”i”>
<li>Apple</li>
<li>Grapes</li>
<li>Strawberry</li>
</ol>
</body>
</html>

Output

Ordered List with different Bullets

Numbers

  1. Apple
  2. Grapes
  3. Strawberry

Uppercase Letters

  1. Apple
  2. Grapes
  3. Strawberry

Lowercase Letters

  1. Apple
  2. Grapes
  3. Strawberry

Uppercase Roman Numbers

  1. Apple
  2. Grapes
  3. Strawberry

Lowercase Roman Numbers

  1. Apple
  2. Grapes
  3. Strawberry

 

Leave a Reply

Your email address will not be published. Required fields are marked *