Lists Tag in HTML5

Introduction

The HTML lists tag is used for specifying a list item is ordered, unordered and menu lists. Lists commonly are found in documents, including web pages. They are an easy and effective way to itemize such things as elements, components, or ingredients. The most common HTML lists are ordered and unordered lists.

unordered list

The HTML <ul> tag is used to define an unordered list. Unordered lists are straight lists with a graphical bullet. You can choose between different types of bullets using the type attribute. Each list item can have a different bullet.

Example

<ul>
<li>Example of list</li>
<li>Nice list!</li>
<li>Last list item!</li>
</ul>

Internet explorer

Type attribute of <ul> List

Specifies the shape of the bullets of each list item.

Type= Circle

<ul type="circle">
<li>Example of list</li>
<li>Nice list!</li>
<li>Last list item!</li>
</ul>

Internet explorer

Type=square

<ul type="square">
<li>Example of list</li>
<li>Nice list!</li>
<li>Last list item!</li>
</ul>

Internet explorer

Ordered list

Ordered lists allow you to create lists where the items are in sequential, numerical order.

<ol>
<li>Example of list</li>
<li>Nice list!</li>
<li>Last list item!</li>
</ol>

Internet explorer

Start attribute of <ol> List

Specifies a number to start the list with instead of 1.

<ol start="5">
<li>Example of list</li>
<li>Nice list!</li>
<li>Last list item!</li>
</ol>

Internet explorer

Type attribute of <ol> List

Specifies the numbering system of the ordered list.

1 - Default
A - Uppercase letters e.g. A,B,C,D
a - Lowercase letters
I - Uppercase Roman Numerals e.g. I,II,III,IV
i - Lowercase Roman Numerals e.g. i,ii,iii,iv

<ol start="5" type="i">
<li>Example of list</li>
<li>Nice list!</li>
<li>Last list item!</li>
</ol>

Internet explorer

Definition List

The HTML <dl> tag is used for declaring a definition list. A definition list is a consists of terms (<dt>) and definitions (<dd>). This type of list does not contain any attribute.

<dt> tag

The <dt> tag is used for specifying a term/name in a definition list.It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.

<dd> tag

The <dd> tag is to describe a term/name in a description list.

For Example

<dl>
<dt>
Article Defination
</dt>
<dd>Article is easy to understand</dd>
<dt>
Article Keyword
</dt>
<dd>Article keyword should be related to the article</dd>
<dt>
Article Category
</dt>
<dd>Article category related to the article</dd>
</dl>

Internet explorer

Nested lists

Many times you want to create sublists or subitems. You can do this by using nested lists.

<ol>
<li>List item1</li>
<li>List item2</li>
<li>List item3
<ol type="a">
<li>sub list item 3.1</li>
<li>sub list item 3.2</li>
<li>sub list item 3.2</li>
</ol>
</li>
<li>Last list item!</li>
</ol>

Internet explorer

Lists Tag in HTML5

Reactions

Introduction

unordered list

Type attribute of <ul> List

Ordered list

Start attribute of <ol> List

2 Comments

Type attribute of <ol> List

Definition List

Nested lists