Lists and list items

Let’s say you have a list of different items on your page. If it’s a simple shopping list, it may look like this:

• apple
• bananas
• oranges
• milk
• cheese

In HTML, it’ll look like this:

<ul>  
    <li>apple</li>  
    <li>bananas</li>  
    <li>oranges</li>  
    <li>milk</li>  
    <li>cheese</li>  
</ul>

A common mistake is not to use the proper markup for styling reasons.“I didn’t want indentation” or “I didn’t like the bullet points” are not valid reasons not to use lists or list items. You style the document in the CSS later and make all the modifications you need.

(When you get to the styling of lists, though, it’s important to notice that the ul element has a padding value by default; you need to give it a padding-left: 0; on CSS. And you can style the list-style-type with a myriad of different markers.)

List headings

If you want to break your list in different sections, you may want to use headings, as in:

Produce

• apple
• bananas
• oranges

Dairy

• milk
• cheese

In HTML, it’ll look like this:

<h3>Produce</h3>  
<ul>  
    <li>apple</li>  
    <li>bananas</li>  
    <li>oranges</li>  
</ul>

<h3>Dairy</h3>  
<ul>  
    <li>milk</li>  
    <li>cheese</li>  
</ul>

A common mistake is to include the headings inside the list, nesting the h3in the ul. But only list items can be nested inside a list.

Immediately after the <ul> or <ol> tag, you want to see a <li> tag. And immediately after the </li> tag, you want to see either a new list item (<li>) or the end of the list (</ul> or </ol>). Again, only list items can be nested inside a list. I can’t seem to emphasize it enough.

List items headings

Sometimes, your list items are not as simple. If there are different hierarchies within a list item, make sure that all the elements that belong in the list item are nested in the <li>.

Let’s say you have a list of the GrC professors with office in the hallway close to the DRT lab:

• Lorraine Donegan
• Ken Macro
• Bruno Ribeiro

In HTML, it’ll look like this:

<ul>  
    <li>Lorraine Donegan</li>  
    <li>Ken Macro</li>  
    <li>Bruno Ribeiro</li>  
</ul>

But let’s say you want to include rank and office room. You want the name of each professor to become a heading within the list item.

• Lorraine Donegan

  Professor

  26-215

• Ken Macro

  Professor

  26-216

• Bruno Ribeiro

  Associate Professor

  26-214

In HTML, it’ll look like this:

<ul>  
    <li>  
        <h3>Lorraine Donegan</h3>  
        <p>Professor</p>  
        <p>26-215</p>  
    </li>  
    <li>  
        <h3>Ken Macro</h3>  
        <p>Professor</p>  
        <p>26-216</p>  
    </li>  
    <li>  
        <h3>Bruno Ribeiro</h3>  
        <p>Associate Professor</p>  
        <p>26-214</p>  
    </li>  
</ul>

A common mistake is to make only the first line as the list item, leaving the other elements lost inside a list, but outside a list item.

Don’t do this:

<ul>  
        <li><h3>Lorraine Donegan</h3></li>  
        <p>Professor</p>  
        <p>26-215</p>  

        <li><h3>Ken Macro</h3></li>  
        <p>Professor</p>  
        <p>26-216</p>  

        <li><h3>Bruno Ribeiro</h3></li>  
        <p>Associate Professor</p>  
        <p>26-214</p>  
  </ul>

Another common mistake is to make each line a new list item, which is not correct, either. Each professor with rank and office number is one item.

Don’t do this either:

<ul>  
        <li><h3>Lorraine Donegan</h3></li>  
        <li><p>Professor</p></li>  
        <li><p>26-215</p></li>  
        <li><h3>Ken Macro</h3></li>  
        <li><p>Professor</p></li>  
        <li><p>26-216</p></li>  
        <li><h3>Bruno Ribeiro</h3></li>  
        <li><p>Associate Professor</p></li>  
        <li><p>26-214</p></li>  
  </ul>

The best strategy to avoid these mistakes is to think semantically what lists and lists items are.

Summary (checklist)

1. List headings are not part of the list.

2. Immediately after the <ul> or <ol> open tag, you necessarily need a <li> open tag. No exceptions.

3. Immediately after the </li> closing tag, you necessarily need either a <li> open tag or a </ul> (or </ol>) close tag. No exceptions.

4. If you have a heading inside a list item, it needs to be heading something within the list item.

Again, if it’s a list item, it necessarily belongs in a list. If it’s not a list item, it absolutely doesn’t belong in a list.