HTML lists
HTML lists are a fairly simple yet powerful way of structuring bits of information that belong together. We'll have a look at all 3 types of lists HTML has to offer: the unordered list, the ordered list and the definition list.
Unordered lists
You can think of the unordered list as your typical shopping list where you have a collection of items that have no special order. The <ul>...</ul> tags mark the beginning and end of the list with <li>...</li> elements inside being the list items. By default the list style is vertical with bullets.
HTML unordered list
<li>bananas</li>
<li>orange juice</li>
<li>big family pizza with extra cheese</li>
</ul>
Output
Ordered lists
Ordered lists are numbered lists where the sequence matters. A top 10 list or a list of instructions are good examples. The HTML code is like the unordered list except for the enclosing tags <ol>...</ol>. By default the list style is vertical with Arabic numerals.
HTML ordered list
<li>Have your boiling and salted water ready (with 1-2 tablespoons of olive oil if you like).</li>
<li>Add pasta and cook it for about 7 to 10 minutes (try the pasta as it cooks to see how you like it best).</li>
<li>Enjoy!</li>
</ol>
Output
Definition lists
Unlike the previously mentioned list types, definition lists not only list a bunch of items but associate each item with a name. You can think of them as list of name/value pairs much like in a dictionary or glossary. The hosting terms glossary on this site is a good example of a definition list.
Definition lists start and end with <dl>...</dl> and each list item is made of a definition term <dt>...</dt> followed by its definition data <dd>...</dd>. By default the definition data is displayed below the definition term and slightly indent.
HTML definition list
<dt>Accelerator pedal</dt>
<dd>A foot-operated device which allows the driver to vary the degree of opening of the induction system throttle(s).</dd>
<dt>Brake light</dt>
<dd>A signaling light mounted on the rear of the car, which may be actuated only by driver braking actions.</dd>
<dt>Catalytic converter</dt>
<dd>An emissions control device in the exhaust system which reduces emissions by catalysis.</dd>
</dl>