Bulleted lists in HTML

Bulleted lists in HTML
 
Bulleted lists in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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">
  • validity of all links
  • different browsers support
  • readability
<ul type="circle">
  • validity of all links
  • different browsers support
  • readability
<ul type="square">
  • validity of all links
  • different browsers support
  • readability

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.

Tequila-based cocktails
  • 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.

 

Read also

Numbered lists in HTML

Numbered lists in HTML

Nested lists in HTML

Nested lists in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation