Certified HTML5 Developer Learning Resources Unordered Lists

Learning Resources

Unordered Lists

Unordered lists do not use numbers. An unordered list starts with the

    tag. Each list item starts with the
  • tag.

    The list items are marked with bullets (typically small black circles).

    Attribute definitions

    • type  =  style-information [CI]
    •     Deprecated. This attribute sets the style of a list item. Currently available values are intended for visual user agents. Possible values are described below (along with case information).
    • start = number [CN]
    •     Deprecated. For OL only. This attribute specifies the starting number of the first item in an ordered list. The default starting number is "1". Note that while the value of this attribute is an integer, the corresponding label may be non-numeric. Thus, when the list item style is uppercase latin letters (A, B, C, ...), start=3 means "C". When the style is lowercase roman numerals, start=3 means "iii", etc.
    • value = number [CN]
    •     Deprecated. For LI only. This attribute sets the number of the current list item. Note that while the value of this attribute is an integer, the corresponding label may be non-numeric (see the start attribute).
    • compact [CI]
    •     Deprecated. When set, this boolean attribute gives a hint to visual user agents to render the list in a more compact way. The interpretation of this attribute depends on the user agent.

    Attributes defined elsewhere

        id, class (document-wide identifiers)
        lang (language information), dir (text direction)
        title (element title)
        style (inline style information)
        onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

    Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered.

    Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted).

    This example illustrates the basic structure of a list.

    • ... first list item...
    • ... second list item...

    Unordered Lists - Uses Bullets
    If you want this style of list... Here's the code to make it...
    • First things first.
    • Second things not first.
    • Add an
    • for each list item.

    • First things first.

    • Second things not first.

    • Add an
    • for each list item.

    • Smiles...
    • increase your face value!

    • Smiles...

    • increase your face value!

    • Friends are...
    • family we choose!

    • Friends are...

    • family we choose!

    • Lists are handier to use than creating simulated lists by coding your own numbers because you can insert a list item at any point and the browser automatically renumbers all items.
    • Using a list means all your text for each list item is indented. Coding list by hand means long sentences or paragraphs will wrap under the number instead of remaining indented.
    • You can interrupt your list at any point by canceling it, add commentary, then restart the list at the number or letter you left off with using CSS. This can also be done with HTML, but that method is deprecated.
    • You can use other HTML tags within a list, such as paragraphs, bold and italic text for emphasis, or other elements.
    • You can also create lists...
      1. ...within lists using the list-style-type property and value
        1. to create the desired
        2. list marker variations.
      2. As you cancel each list the indentation stops and
      3. the list items continue from the previous list.
 For Support