6. Lists

Welcome to the sixth portion of the HTML tutorial, where we learn to work with lists in HTML. It is very important for the structured readability of content while using lists in HTML. From the list of instruction or items, definitions or even more, the list makes it easily comprehendible and readily available for users.

We will go over in this chapter the kind of lists you can create, how to nest lists, and styling options using CSS.

6.1 Ordered Lists (ol)

Use an ordered list where the sequence is important. This would include step-by-step instructions or rankings. In an ordered list, items are numbered automatically.

Basic Structure:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

So,

• The ordered lists <ol> tag.
• Each list item is enclosed in the <li> tag.

Types of Ordered Lists:

You can modify the number style with type attribute :

• type="1": Numbers (by default)
• type="A": Uppercase letters
• type="a": Lowercase letters
• type="I": Roman numerals (uppercase)
• type="i": Roman numerals (lowercase)

<ol type="I">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

In the above example, the list items are counted by Roman numerals.

Start Attribute:

You can use the start attribute to change the number an ordered list starts at.

<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
</ol>

Activity:
Write an ordered list for a recipe or step-by-step process. Try different types and starting numbers.

6.2 Unordered Lists (ul)

Use unordered lists <ul> if it doesn’t matter which item is first, and so on. By default, each list item is preceded with a bullet point rather than a number or letter.

Basic Structure:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

This one uses the <ul> tag for an unordered list, and the list items are enclosed in <li> tags.

Bullet Types:

You can also change the bullet style with CSS’s list-style-type:

• disc: Bullet (solid circle)
• circle: Hollow circle
• square: Solid square
• none: No bullet

<ul style="list-style-type: square;">
  <li>Item one</li>
  <li>Item two</li>
</ul>

Activity:
Create an unordered list of some movies or hobbies with <ul>. Make an attempt to mix up the <ordered>, bulleted as well as appropriately styled inline CSS.

6.3 Description Lists (dl)

Description lists are used to associate terms with their definitions. They are commonly used for glossaries, FAQs, and any other content that needs a term to be defined.

Basic Structure:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>

  <dt>CSS</dt>
  <dd>A style sheet language used for describing the presentation of a document.</dd>
</dl>

• <dl>: Defines a description list.
• <dt>: Defines a term (name or title).
• <dd>: Defines the description or definition for the term.

This syntax allows you to associate multiple terms with their descriptions.

Multiple Descriptions:

A term can have more than one description. You just add multiple <dd> elements for the same <dt>.

<dl>
  <dt>HTML</dt>
  <dd>A language for building web pages.</dd>
  <dd>Stands for HyperText Markup Language.</dd>
</dl>

Task:
Create a description list for a glossary of web development terms. You should try to include multiple descriptions for a single term.

6.4 Nesting Lists

Lists are sometimes required to appear inside other lists. This is called nesting and is done by nesting one list inside another list item. You can nest ordered, unordered and description lists .

Nesting Unordered Lists:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Peppers</li>
    </ul>
  </li>
</ul>

As in this example the second <ul> is inside the first list item (). That nested list will be indented and the bullet style will be different from your browser’s default.

Nesting Ordered Lists:

<ol>
  <li>Chapter 1
    <ol>
      <li>Introduction</li>
      <li>Background</li>
    </ol>
  </li>
  <li>Chapter 2
    <ol>
      <li>Methods</li>
      <li>Results</li>
    </ol>
  </li>
</ol>

Putting ordered lists within each other enables you to construct hierarchies of any number of tiers, like chapters and sections in a book.

Nesting Description Lists:

You can also nest description lists, although this is more rarely done.

<dl>
  <dt>HTML</dt>
  <dd>A markup language</dd>
  <dd>Components:
    <dl>
      <dt>Elements</dt>
      <dd>Building blocks of HTML</dd>
    </dl>
  </dd>
</dl>

Activity:
Generate a nested list for a project breakdown (such as tasks and subtasks). Attempt to mix the list types together.

6.5 Styling Lists with CSS

Now that you know how to create and nest lists, let’s go ahead and explore how we can style them using CSS. We can change bullet styles, spacing, indentation, and so much more.

Customizing Bullets with list-style-type:

You can control how the mark is generated for bulleted or numbering lists with the list-style-type property. Here are a few common ones:

• Unordered Lists:

  ul {
    list-style-type: square;
  }

• Ordered Lists:

  ol {
    list-style-type: lower-alpha;
  }

You can also eliminate bullets altogether with list-style-type: none;.

Changing Indentation:

Browsers add padding or margin to lists by default. You can control that with CSS:

ul {
  padding-left: 20px;
}

You can also eliminate indentation:

ul {
  padding-left: 0;
}

Custom Bullet Images:

To replace standard bullets with a custom image, use the list-style-image CSS property:

ul {
  list-style-image: url('bullet.png');
}

This allows you to switch the standard bullet with any image you want.

Styling Nested Lists:

You can select nested lists with your CSS using descendant selectors:

ul ul {
  list-style-type: circle;
}

This CSS selects all unordered lists that are nested inside other unordered lists, and applies a different bullet style to each of them.

Activity:
Try making a bespoke-list. You can use CSS to modify the look of your bullets, change the indenting and even replace bullets with images.

Quiz Time:

Summary

This chapter has explored HTML's different list types and how these can be styled with CSS. Lists are a simple yet powerful way of structuring content for navigation, instructions and definitions and can be nested as well as styled for more intricate designs.

Tables: We will learn how to present structured data on your web pages!