HTML Lists – Ordered and Unordered list

Lists are used to group elements under a category. There are two types of lists: Ordered list and Unordered list.

 

Ordered lists are written using <ol> tag and unordered lists are written using <ul> tag.

These tags are followed by <li> tags which indicates the list items. Each item is placed between an opening <li> and a closing</li> tag.

By default ordered list are shown using numbers and unordered lists are shown using bullets. But these numberings and bullets can be changed and styled using CSS.

Example of an unordered list:

<ul>
<li>apple</li>
<li>banana</li>
<li>grapes</li>
</ul>

Output: •apple
              •banana
              •grapes

Example of ordered list:

<ol>
<li>apple</li>
<li>banana</li>
<li>grapes</li>
</ol>

Output: 1. apple
              2. banana
              3. grapes

Control list counting:

By default, an ordered list will start counting from 1. To start counting from a specified number, start attribute is generally used.

For example:

<ol start=”20”>

 

HTML lists also include definition list and it is created with <dl> element. It usually consists of a series of terms and their definitions. Inside the <dl> element, there are <dt> and <dd> elements.  <dt> is used to contain the term being defined and <dd> is used to contain the definition. For example:

<dl>
<dt>Software</dt>
<dd>The programs and other operating information used by a computer.</dd>
<dt>Gauge</dt>
<dd>An instrument that measures and gives a visual display of the amount, level and contents of something.</dd>
<dt>Catastrophe</dt>
<dd>An event causing great and usually sudden damage or suffering; a disaster.</dd>
</dl>

Nested lists:
HTML lists can be nested which means we can put another list inside the already defined list.

For example:

<ul>
<li>eraser</li>
<li>pen
<ul>
<li>ink pen</li>
<li>gel pen</li>
</ul>
</li>
<li>pencil</li>
</ul>

Output:
•eraser
•pen
    °ink pen
    °gel pen
•pencil