Register to get access to free programming courses with interactive exercises

Lists Content layout fundamentals

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.


Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs

From a novice to a developer. Get a job or your money back!

Frontend Developer icon
Profession
beginner
Development of front-end components for web applications
start anytime 10 months
Layout Designer icon
Profession
New Under development beginner
Layout with the latest CSS standards
start anytime 5 months

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions

Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.