info@tutsfinder.in



HTML Lists



HTML lists allow users to group a set of related items in a lists.

Lists may contain one or more elements.



Example:
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Books</li>
<li>Student</li>
<li>School</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Books</li>
<li>Student</li>
<li>School</li>
</ol>
</body>
</html>


Output:

table

There are three different types of HTML lists:

1. Ordered list or numbered list (ol) - ordered list is defined by <ol> tag.

Each list item starts with the <li> tag.



Example:
<!DOCTYPE html>
<html>
<body>
<h1>An ordered HTML list</h1>
<ol>
<li>Pasta</li>
<li>Pizza</li>
<li>Burger</li>
</ol>
</body>
</html>


Output:

table

2. Unordered lists or Bulleted list (ul) – unordered list are marked with bullets, and also known as Bulleted list. It starts with <ul> tag and each item starts with the <li> tag.



Example:
<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<li>
<li>Pasta</li>
<li>Pizza</li>
<li>Burger</li>
</ul>
</body>
</html>


Output:

table

3. Description List or Definition List (dl) – this type of list is supported by HTML and XML where records are listed like in a dictionary or encyclopedia.

It consists of mainly three tags:

• <dl> - defines the start of the list.

• <dt> - defines the term(name).

• <dd> - describes each term.



Example:
<!DOCTYPE html>
<html>
<body>
<h1>A Description List</h1>
<dl>
<dt>Starter</dt>
<dd>- Soup</dd>
<dt>Main Course</dt>
<dd>- Dal Makhni</dd>
</dl>
</body>
</html>


Outout:

table

HTML Ordered Lists


HTML ordered lists or Numbered lists shows an element in numbered format.

The HTML <olgt; tag is used to create ordered list. It can be used when user want to present the data in numerical or alphabetical order format, or any format where an order is emphasized.


Different types of Ordered Lists:

• Numeric Number (1,2,3)

• Small Roman Number (i, ii, iii)

• Capital Roman Number(I II III)

• Capital Alphabet (A, B, C)

• Small Alphabet (a, b, c)



Example:
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Pasta</li>
<li>Pizza</li>
<li>Burger</li>
</ol>
</body>
</html>


Outout:

table

Ordered HTML list – The Type Attribute

Below table illustrating the type attribute of the <ol> tag:



table

Note: By default an ordered list will start counting from 1 , if you want to start counting from a specified number you can use the start attribute.


Syntax for using Start Attribute:
<ol start="50">


Nested HTML Lists

Nested list is a list which contain list inside lists.



Example:
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>


Outout:

table

HTML Unordered Lists

HTML Unordered list or bulleted lists shows the element in bulleted format.

The HTML