HTML List Tags


In the HTML document there are three main types of lists:

• Numbered (indexed)
• Numbered
• list of descriptions.

When they are interleaved, nested lists appear.

ol – Numbered lists

In the numbered list, the web browser inserts item indices automatically in order. It is very convenient. If, for example, one or even several elements are deleted from the numbered list, the remaining indexes – numbers or letters will be automatically recalculated.

The start tag <ol> opens a numbered list, and ends with a </ol> tag . Each of its elements begins with the <li> tag , and ends with </li> .

The <ol> tag is its syntax:

<ol [type = “A | a | I | i | 1”] [start = “n”]> Unordered lists – ul

For lists of unnumbered web browser, usually uses markers to highlight a specific element. The browser type configures the appearance of the marker.

The start tag <ul> opens an unnumbered list and ends with the </ul> tag . The beginning of any list item must begin with a <li> tag and end with a </li> tag.

The syntax of the <ul> tag:

<ul [type = “disc | circle | square”]>

type – attribute that defines the type of marker


disc – A filled round marker (used by default).
square – A square marker.
circle – A round empty marker.


<ul type = \ “square \”>
<li> Programs </li>;
<li> Algorithms </li>;
<li> Processes </li> </ol>

Nested lists

By using different list tags or repeating one within another, you can create nested lists. They have (contain) a certain number (several) levels of elements. And each level can also become a list.


<h2> Ingredients </h2>
<li> Light salad
<ul type = \ “square \”>
<li> Crab sticks </li>
<li> Radish li> </ul> </li>
<li> Sauce for salad
<li> Mayonnaise li>
<li> Soy sauce </li> </ul> </li> </ol>

dl – List of descriptions

The beginning and the end of the list of descriptions begins with a <dl> tag , and ends with a </dl> tag . Within this element, pairs are created (defined): “term” – “description”. The term is marked with a <dt> tag , and the description is <dd> .


<dt> <b> Boiled rice </b> </dt>
<dd> Well suited to meat dishes </dd>
<dt> <b> Mashed potatoes </b> </dt>
<dd> Not bad with fish </dd>
<dt> <b> Cauliflower </b> </dt>
<dd> A suitable side dish for poultry </dd>