Lists — Content layout fundamentals

• Bulleted lists
• Numbered lists
• Description lists
• List styling
  • Using a picture as a list marker

Lists are one of the main ways to present content on a page. They allow you to group related pieces of data and combine them by meaning. There are three kinds of lists in HTML:

• Bulleted lists
• Numbered lists
• Description lists

In the sentence above, the list types have been grouped together using a bulleted list. It has a small indent on the left and has a bullet point for each individual item. Each list type has distinguishing features that enable you to immediately identify it on the page.

In addition, all lists have tags containing the list information itself. These containers help the page identify where the list starts and ends.

Each list item is a block element. This means that it will take up all the available width and each new element will start on a new line.

Bulleted lists

Bulleted lists are a popular tool for grouping fragments. It's useful as elements don't need to be placed in a particular order. There's no kind of scale to decide what's more or less important, and there's no "step 1, step 2" etc. You simply list the content that the user needs to see.

Like other lists, creating a bulleted list starts by specifying a container. The <ul></ul> tag acts as a container in this case. Each element is placed inside this container and enclosed in a <li></li> tag. This is how the browser separates the lists from each other.

Let's present the list from the beginning of the lesson as HTML markup. To do this, the container and the three <li></li> tags are specified. Inside each of these tags is one list item.

<ul>
  <li>Bulleted</li>
  <li>Numbered</li>
  <li>Description lists</li>
</ul>

Lists in HTML can be nested inside each other. This allows you to structure information in a more meaningful way. To create a nested list, the new container is placed inside the <li></li> tag. As you'll see, lists can be combined. Bulleted lists can be inserted inside numbered lists. Numbered lists can go inside bulleted ones. In general, nesting can be described as follows:

<h1>HTML Tags</h1>
<ul>
  <li>Paragraphs</li>
  <li>Lists
    <ul>
      <li>Bulleted</li>
      <li>Numbered</li>
      <li>Description lists</li>
    </ul>
  </li>
</ul>

The bullet points for the nested list have changed. This allows you to separate nested list from the parent one, even if there is no indentation. CSS allows you to control bullets and customize their appearance. At the end of the lesson, we'll explore a property that allows you to style bullets and even use your own images to do so.

Numbered lists

The structure of numbered lists is the same as bulleted lists. Since it has its own special wrapper, list items can be nested. The semantic difference between numbered lists is that they have a sequence. These lists have to be in order and give information in some form of sequence. A numbered list uses the <ol></ol> container, with the <li></li> tag for the list items. An example of such a list would be a to-do list for the day.

<h1>Tuesday's to-do list</h1>
<ol>
  <li>Breakfast</li>
  <li>Pay for subway ticket</li>
  <li>Go to grandma's house</li>
  <li>Go to bed</li>
</ol>

Numbered lists can be nested inside each other. You can have bulleted lists inside numbered lists.

<h1>Tuesday's to-do list</h1>
<ol>
  <li>Breakfast</li>
  <li>Pay for subway ticket</li>
  <li>Go to grandma's house
    <ul>
      <li>Buy flowers</li>
      <li>Buy candy</li>
    </ul>
  </li>
  <li>Go to bed</li>
</ol>

Description lists

In terms of HTML, description lists are the most difficult for layout designers. They include more tags for markup and allow you to create a structure with a term and a definition. Such lists are useful for compiling dictionaries or glossaries.

We use the tag <dl></dl> as a container for the lists of definitions, but we don't use the <li></li> scheme, but rather a system of two tags:

• <dt></dt>⁣ – term
• <dd></dd>⁣ – definition

Each new pair repeats the two-tag pattern. A list of several terms is marked up as follows:

<dl>
  <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

List styling

The main way to style lists is to change the marker that appears on the left side of the list item. In bulleted and numbered lists, you can change it using the list-style-type property. It takes many different values. You can see all of them using web inspectors. The value square is used to create a square-shaped marker.

The list-style-type property allows you to hide the list marker. This is common practice when creating menus through lists, where there is no need to highlight items with markers. To hide the marker, use the none value.

You can change the marker in one of two ways:

• Setting the property for the container. In this case, all list elements will get the given marker
• Setting the property for a list item. Only one item on the list will have its marker changed, the others will remain the default one

As an example, let's give the bulleted list a square marker, and delete the marker for the second item

Using a picture as a list marker

In addition to the built-in list marker values in the browser, CSS allows you to set custom markers in the form of images. This allows you to make unique list styling for the project, either for the whole project or for individual lists.

To set the marker as your image, use the list-style-image property, whose value is a link to the image. It's specified inside url(), for example:

.list-image {
  list-style-image: url('./good.png');
}

Important: You cannot control the size of this marker. This means that the image has to be adjusted for size in advance. Pseudo-elements are used to style lists with the ability to resize the marker, this is something that'll be explored in upcoming lessons.