In HTML there are several ways to show information in lists, it can be done manually using the <p> tag but the best way is to use HTML lists. There are 3 types of HTML lists: ordered list, unordered list and description list.
Ordered lists are itemized by numbers (1, 2, 3, 4 ....) or letters (A, B, C, D ......,), they are used especially when we need to reference back to the specific item in the webpage text or when the sequence of action is very important (like the steps to take to complete a task or make a cake) .
Unordered lists are bullet point lists, used when we do not need to return to the single items in our text or when the items are simple object we can remember (like a list of ingredients in a recipe).
Description lists are used when we need to define and describe a specific term, like a list of acronyms or a vocabulary.
Ordered list:
A list of items in order is particularly useful when we need to reference to the items in the webpage text, i.e. a list of tasks that need to be done in a specific order.
The tag to be used for ordered lists is <ol> and for each item the tag <li>. We have 2 attributes we can use for <ol>, the first one is start="value" where in the value we can use the starting number of our list i.e. start="10".
The second attribute is type, that defines what kind of numberic/alphabetical sequence we want to use to order our list, here some examples:
type="1" for numbered lists where items are identified as item 1, item 2, item 3, etc.
type="A" for alphabetical lists where items are identified with uppercase letters as item A, item B, item C, etc.
type="a" for alphabetical lists where items are identified with lowercase letters as item a, item b, item c, etc.
type="I" for numbered lists in uppercase roman numbers where items are identified as item I, item II, item III, etc.
type="i" for numbered lists in lowercase roman numbers where items are identified as item i, item ii, item iii, etc.
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
Ordered list example using start and type attribute:
<ol start="10" type="A">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
In this example you can see how the list is using uppercase letters and it's strating with the 10th letter of the alphabet:
Bullet point lists are very useful to organize text listing items without the need to keep them in a specific order as in example a list of ingredients of a recipe or a list of software.
The tag used for unordered list is <ul> and each item is contained in the usual <li> tag.
The marker that identify the item is a simple black bullet point, that we can change with the list-style-type CSS property that needs to be applied using the style attribute.
<ul style="list-style-type:disc;"> - The disc value defines the list item marker as the default bulletpoint
<ul style="list-style-type:circle;"> - The circle value defines the list item marker as a circle
<ul style="list-style-type:square;"> - The square value defines the list item marker as a square
<ul style="list-style-type:none;"> - None value defines doesn't show any list item marker
<ul>
<li>300gr Savoiardi</li>
<li>500gr Mascarpone cheese</li>
<li>300gr Coffee</li>
<li>4 Eggs</li>
<li>100gr Sugar</li>
</ul>
The code above returns a list of bulletpoints, ingredients for a perfect italian Tiramisu:
When we need to list items together with their definition the description list <dl> tag comes handy, especially when we our website needs an internal vocabulary or an acronym list.
The <dl> element contains the terms we need to list in the <dt> tag and their definition in the <dd> tag.
The term in the <dt> element is identified in bold while the definition of it in the <dd> tag has standard text properties.
It is possible to add more than one definition per term, each definition will be separated in a new line similarly to what happens when using the <br> break line.
The <dd> tag has only one attribute called nowrap that is per default setup as "false", so if for any crazy reason you are going to need the text not to wrap when space on screen is finished you can setup nowrap with value "true".
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
Code result: