How to Create Bulleted Lists in HTML5 - dummies

How to Create Bulleted Lists in HTML5

By Ed Tittel, Chris Minnick

A bulleted list contains one or more items each prefaced by a bullet (often a big dot). Use this kind of list on your web page if the items’ order isn’t necessary for understanding the information it presents.

A bulleted list requires the following:

  • The unordered list element (<ul>) specifies a bulleted list.

  • A list item element (<li>) marks each item in the list.

  • The closing tag for the unordered list element (</ul>) indicates that the list has come to its end.

An unordered list (another name for bulleted list) with three items requires elements and content in the following order:

  1. <ul>

  2. <li>

  3. Content for the first list item

  4. </li>

  5. <li>

  6. Content for the second list item

  7. </li>

  8. <li>

  9. Content for the third list item

  10. </li>

  11. </ul>

The following markup formats a three-item list as a bulleted list:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bulleted Lists</title>
  </head>
  <body>
    <h1>Things to do today</h1>
    <ul>
      <li>Feed cat</li>
      <li>Wash car</li>
      <li>Grocery shopping</li>
    </ul>
  </body>
</html>

This figure shows how a browser renders this with bullets.

image0.jpg

Use CSS to exert more control over the formatting of your lists, including the ability to use your own graphics as bullet symbols.