HTML Lists
Lists are used to write the instructions with a manner, the terms or the definitions of terms. There are three types of lists.
<div style="width:100%; height:100%; float:left;">
<h2>Ordered lists</h2>
<ol>
<li>Mix both solutions</li>
<li>Stir them well.</li>
<li>Add a few drops of the sulphuric acid.</li>
<li>Heat it up to 20 minutes at 88 Celsius temperature.</li>
</ol>
</div>
<div style="width:100%; height:100%; float:left;">
<h2>Unordered lists</h2>
<ul>
<li>Sulphuric Acid</li>
<li>Temperature</li>
<li>Solution1</li>
<li>Solution2</li>
</ul>
</div>
<div style="width:100%; height:100%; float:left;">
<h2>Definition lists</h2>
<dl>
<dt>String</dt>
<dd>The string is the group of characters in the double quotation marks.</dd>
<dt>Operators</dt>
<dd>The operators perform operations on operands and do calculations.</dd>
</dl>
</div>
1. Ordered list
we make ordered lists where the order is necessary for the items or instructions. When we give instructions in an ordered manner then we use ordered list.
We take the same example of the recipe to make a difference between ordered and unorodered lists. For example, we are given instructions in an ordered manner to make a recipe.
ol stands for ordered list. li stands for list item.
By default, ordered lists are marked with the decimal numbers.
Ordered list Attributes
reversed Attribute
reversed attribute reverses the numbering for the list items.
<p>Directions to make a recipe(with order)</p>
<ol reversed>
<li>Place all ingredients except the kitchen in the crock pot.</li>
<li>stir until mixed.</li>
<li>add the chicken and coat well with the sauce.</li>
<li>cover and cook on higher for 2-3 hours or on low for 7-8 hours.</li>
</ol>start Attribute
start attribute gives a starting numbering value to the ordered list.
<p>Directions to make a recipie(with order)</p>
<ol start="45">
<li>place all ingredients except the kitchen in the crock pot.</li>
<li>stir until mixed.</li>
<li>add the chicken and coat well with the sauce.</li>
<li>cover and cook on higher for 2-3 hours or on low for 7-8 hours.</li>
</ol>type Attribute
type attribute defines the type of list item markers.
<p>Directions to make a recipie(with order)</p>
<ol type="A">
<li>place all ingredients except the kitchen in the crock pot.</li>
<li>stir until mixed.</li>
<li>add the chicken and coat well with the sauce.</li>
<li>cover and cook on higher for 2-3 hours or on low for 7-8 hours.</li>
</ol>2. Unordered list
We use unordered lists where the order of items is not necessary. For example, ingredients can be written in an unordered manner.
ul stands for unordered list. li stands for list item.
By default, unordered lists are marked with the bullets.
3. Definition lists
When we define the terms, then we use definition lists. Here is a simple example
dl stands for description list. dt is for description term. dd stands for description definition.
It is mostly used for name-value, question-answer pairs.
Nested lists
We can make lists of the list. We can make a combination of ordered list and unordered lists.