Lists are an important way to make information in your page accessible and memorable.
Most people can more quickly understand, and remember, information that is in a list.
There are three types of lists in HTML:
Please note that line breaks and indents are automatically applied to lists in HTML.
The ordered list HTML tag is <ol>.
The items in the list use the <li> tag.
And please NOTE that both of these tags must be closed.
The above list of list types is, in fact, an ordered HTML list. The actual code looks like this:
<ol> <li>Ordered</li> <li>Unordered</li> <li>Definition</li> </ol>
If you ever want to continue an ordered list later in your text, you can use the start attribute in the <ol> tag, like this:
<ol start="7">
<li>This item should be number 7.</li>
<li>This item should be number 8.</li>
</ol>
and it will look like this:
You can even change the type of the ordered list, with the list-style-type CSS property, like this:
<ol style="list-style-type: lower-alpha">
<li>This item should be number a.</li>
<li>This item should be number b.</li>
</ol>
and it will look like this:
And, of course, you can combine these attributes, like this:
<ol style="list-style-type: lower-alpha" start="3">
<li>This item should be number c.</li>
<li>This item should be number d.</li>
</ol>
and it will look like this:
Please note that the start attribute has a numeric value even if you are using one of the alphabetic types.
Some of the available list-style-type values for an ordered list are:
The "upper-roman" list-style-type value gives a list like this:
The unordered list HTML tag is <ul>.
The items in the list use the <li> tag.
And please NOTE that both of these tags must be closed.
Here is an example of an unordered list:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
and the resulting list looks like this:
You can change the type of "marker" that the unordered list uses, with a list-style-type CSS property.
The available list-style-type values for an unordered list are:
Here are samples of the square and the circle marker types:
<ul style="list-style-type:square;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
gives this list:
<ul style="list-style-type:circle;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
gives this list:
You can override the default marker images.
The simplest way to override the marker images is to use a CSS rule.
You could, for instance, use the following code in your stylesheet:
li {
list-style-image: url(images/customBullet.gif);
}
Please NOTE that the CSS property is list-style-image. It automatically replaces the default list image.
As a complete example, here is page customBullet.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom List Marker</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="customBullet.css">
</head>
<body>
<div>
<header class="w3-center">
<h2>Custom List Marker</h2>
</header>
<div>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<footer>
<h4>© Copyright 2021</h4>
</footer>
</div>
</body>
</html>
And here is the stylesheet, customBullet.css:
body
{
font-family: Arial, sans-serif;
font-size: 1.3em;
}
li {
list-style-image: url(images/customBullet.gif);
}
And now you can see the custom marker in the page here.
You can nest lists within lists. The browser will usually change and manage the marker and number type for nested lists, but you can use the list-style-type CSS property for the lists if you want to control the markers and numbers yourself.
PLEASE NOTE: Paragraphs, headings, and lists have some restrictions on how they may be nested!
(But this restriction does NOT apply to nested lists. You may nest any kind of list within any other kind of list.)
ALSO PLEASE NOTE: A nested list MUST BE contained by one of the list items (<li>...</li> tags) in the outer/containing list.
Nested list code will look something like this:
<ul>
<li>The first item</li>
<li>The second item
<ul>
<li>A sub-item under the second item</li>
<li>Another sub-item</li>
</ul>
</li>
<li>The third item</li>
</ul>
and this list will display like this:
Also please note that it is possible to nest a list inside a definition list (see below). The nested list is normally contained by a <dd>...</dd> tag.
The definition list tag is <dl>.
Each term to be defined is marked by a <dt> tag.
Each definition is marked by a <dd> tag.
Such a list's code looks like this:
<dl>
<dt>Aardvark</dt>
<dd>Is a weird animal.</dd>
<dd>It eats ants.</dd>
<dt>Antinomy</dt>
<dd>Is a seeming paradox that is true.</dd>
<dd>An example is light: It is both a particle and a wave.</dd>
</dl>
and it displays a list like this:
The <p>...</p> tag causes the browser to insert two line breaks (above the opening <p> tag). (And remember that XHTML requires you to close all tags, so be sure to use the </p> tag, too.) The primary, and correct, usage of the <p>...</p> tag, though, is to "contain" a small portion of text, and to (optionally, with CSS rules) apply some formatting rules to the contained text.
The <br> tag causes the browser to insert one line break.
The <pre>...</pre> tag (preformatted text) causes the text contained by it to be formatted pretty much as you type it into the .html file.
Here is a sample of preformatted text:
<pre> This is a text table: Planet Distance from Sun --------- ----------------- Mecury 0.3 AU Venus 0.7 AU Earth 1.0 AU Mars 1.4 AU Jupiter 3.2 AU </pre>
and it will display like this:
This is a text table: Planet Distance from Sun --------- ----------------- Mecury 0.3 AU Venus 0.7 AU Earth 1.0 AU Mars 1.4 AU Jupiter 3.2 AU
But WITHOUT the <pre> tag, this same text would look like this (in a paragraph tag):
This is a text table: Planet Distance from Sun --------- ----------------- Mecury 0.3 AU Venus 0.7 AU Earth 1.0 AU Mars 1.4 AU Jupiter 3.2 AU