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>
Example of ordered list:
<ol> <li>apple</li> <li>banana</li> <li>grapes</li> </ol>
Output: 1. apple
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.
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>
HTML lists can be nested which means we can put another list inside the already defined list.
<ul> <li>eraser</li> <li>pen <ul> <li>ink pen</li> <li>gel pen</li> </ul> </li> <li>pencil</li> </ul>