Bulleted lists in HTML
Bulleted lists allow to split large text into separate blocks. The reader pays more attention to the text and doesn't lose concentration. Taking into account the fact that the perception of the screen-text is worse than the printed one, this is a very useful trick.
To set bulleted list use tags ul and li (example 1).
Example 1. Creating bulleted list.
<p>What to consider when testing site:</p> <ul> <li>validity of all links</li> <li>different browsers support</li> <li>readability</li> </ul>
Here is the result of example 1.
What to consider when testing site:
- validity of all links
- different browsers support
- readability
Please note that bulleting the text increases spacing between the lines. To get rid of it, add to the ul tag parameter style="margin:0" (example 2).
Example 2. Creating bulleted list without additional spacing.
<p>What to consider when testing site:</p> <ul style="margin:0;"> <li>validity of all links</li> <li>different browsers support</li> <li>readability</li> </ul>
Here is the result of this example.
What to consider when testing site:
- validity of all links
- different browsers support
- readability
There are three types of markers: disc (default), circle and square. To select the type of marker you want use the parameter type of the ul tag. Substitute periods with one of three values shown in table 1.
Table 1. Types of markers.
| HTML code | Example |
|---|---|
<ul type="disc"> |
|
<ul type="circle"> |
|
<ul type="square"> |
|
Example 3 shows how to create a bulleted list, with circular type markers.
Example 3. Changing the type of marker.
Tequila-based cocktails <ul type="circle"> <li>Old Mexican</li> <li>Blue Moon</li> <li>Brave Bull</li> <li>Serra Margarita</li> </ul>
The result of this example is shown below.
- Old Mexican
- Blue Moon
- Brave Bull
- Serra Margarita
With CSS, you can extend this list and instead of the built-in symbols (disc, circle, square) use images as markers. For this purpose use the style attribute list-style-image, it's value is the path to the image. It should be added instead of the url keyword, as shown in example 4.
Example 4. Using styles to add an image as a marker.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
ul {
list-style-image: url(images/square.gif); /* The path to the graphic file with the image */
}
</style>
</head>
<body>
<ul>
<li>The header must be shorter than three lines;</li>
<li>If the section's title, uses well-established terms, such as guest book, chat, link, home page etc.;</li>
<li>Before using a special term or word, try to figure out whether or not the meaning is clear to the reader.</li>
</ul>
</body>
</html>The result of this example is shown below.
- The header must be shorter than three lines;
- If the section's title, uses well-established terms, such as guest book, chat, link, home page etc.;
- Before using a special term or word, try to figure out whether or not the meaning is clear to the reader.
