HTML Lists - How Well Do You Know Them?

Table of contents

Introduction

Types of HTML Lists

• Unordered Lists(<ul>)
• Ordered Lists(<ol>)
• Description Lists(<dl>)

List Attributes

• Attributes for Unordered Lists
• Attributes for Ordered Lists
• Attributes for Description Lists
• Global Attributes

Additional List Features

• Customizing List Styles
• Nested Lists
• List Accessibility Best Practices

Conclusion

Introduction

HTML lists improve web page content organization, making information easier to read and accessible. They enhance user experience by presenting data logically and structurally.

Types of HTML Lists

Unordered Lists(<ul>)

Unordered lists in HTML are used to present items in a bulleted format. The <ul> tag defines them and the <li> tag marks each list item individually.
Displaying items where the order is irrelevant, such as navigation menus or item lists, is best done with unordered lists.

<ul>
 <li>Item one</li>
 <li>Item two</li>
 <li>Item three</li>
</ul>

Ordered Lists(<ol>)

Ordered lists in HTML present items in a numbered sequence format. The <ol> tag defines them and the <li> tag marks each list item individually.
Ordered lists are suitable for sequences where the order of items matters, such as step-by-step instructions or ranked lists.

<ol>
 <li>Step one</li>
 <li>Step two</li>
 <li>Step three</li>
</ol>

Description Lists(<dl>)

Description lists in HTML are used to present terms paired with their descriptions. The <dl> tag defines them, the <dt> tag marks each term, and the <dd> tag specifies each description. They are suitable for glossaries, dictionaries, or defining terms in a structured manner.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

List Item Attributes

Attributes for Unordered Lists(<ul>)

Deprecated Attribute: type
The type attribute was used to set the bullet style for list items (<li>), but it is now deprecated.

 /*DO NOT USE - DEPRECATED */ 
<ul type="circle">
   <li>Item 1</li>
   <li>Item 2</li>   
   <li>Item 3</li>
</ul>

Instead, use the CSS property list-style-type to achieve the same effect.
Values for list-style-type:

• disc: A filled circle (default) known as a disc marker.
• circle: An unfilled circle known as a circle marker.
• square: A filled square is known as a square marker.

<style>
  ul {
    list-style-type: circle; /* Set the marker style using CSS */
  }
</style>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Attributes for Ordered Lists(<ol>)

Type: Defines the numbering style (decimal, Roman numerals, letters) for ordered lists.

Start: Indicates the starting number for the ordered list (<ol>), useful for lists that need to begin from a specific number other than 1.

 <ol start="5"> starts the list from number 5.

Value: Specifies the starting value or counter for an individual list item (<li>) within the ordered list (<ol>).

<li value="10"> assigns the value 10 to that list item,
overriding the default sequential numbering.

Reversed: Reverses the numbering of the ordered list (<ol>), starting from a higher number and counting downwards.

<ol reversed> reverses the order within the list.

Attributes for Description Lists(<dl>)

No specific attributes for modifying behaviour or appearance exclusive to <dl>.

Global Attributes

Attributes such as class, id, style, title, and aria-* attributes can be used with <ul>, <ol>, <dl>, <dt>, and <dd> tags to enhance functionality or styling.

Additional List Features

Customizing List Styles

Use CSS to modify list markers (bullets or numbers) with different shapes, colours, sizes, and positioning.

Nested Lists

HTML lists can be nested within each other, allowing for hierarchical content. This technique is commonly used to create sub-categories or multi-level outlines within a single list structure.

<h2>Nested Unordered List</h2>
    <ul>
        <li>Fruits
            <ul>
                <li>Apple</li>
                <li>Banana</li>
                <li>Cherry</li>
            </ul>
        </li>
        <li>Vegetables
            <ul>
                <li>Carrot</li>
                <li>Broccoli</li>
                <li>Spinach</li>
            </ul>
        </li>
    </ul>

    <h2>Nested Ordered List</h2>
    <ol>
        <li>Main Topic 1
            <ol>
                <li>Sub Topic 1.1</li>
                <li>Sub Topic 1.2</li>
            </ol>
        </li>
        <li>Main Topic 2
            <ol>
                <li>Sub Topic 2.1</li>
                <li>Sub Topic 2.2</li>
            </ol>
        </li>
    </ol>

List Accessibility Best Practices

Ensure lists are created with semantic HTML, meaningful alternative text, and optimized for navigation with assistive technologies.

<h2>Accessible Unordered List</h2>
<ul aria-label="List of fruits" role="list">
    <li role="listitem" tabindex="0">Apple</li>
    <li role="listitem" tabindex="0">Banana</li>
    <li role="listitem" tabindex="0">Cherry</li>
</ul>

<h2>Accessible Ordered List</h2>
<ol aria-label="Steps to complete a task" role="list">
    <li role="listitem" tabindex="0">Step 1: Prepare the ingredients</li>
    <li role="listitem" tabindex="0">Step 2: Mix the ingredients</li>
    <li role="listitem" tabindex="0">Step 3: Cook the mixture</li>
</ol>

<h2>Accessible Description List</h2>
<dl aria-label="Description of terms" role="list">
    <div role="group" aria-labelledby="html-term">
        <dt id="html-term" tabindex="0">HTML</dt>
        <dd>A markup language for creating web pages</dd>
    </div>
    <div role="group" aria-labelledby="css-term">
        <dt id="css-term" tabindex="0">CSS</dt>
        <dd>A stylesheet language for styling web pages</dd>
    </div>
</dl>

Conclusion

HTML lists can transform plain content into well-organized and accessible information. You can achieve clarity using unordered lists for general items, ordered lists for sequences, or description lists for definitions.

Adding visual appeal and depth through customization and nesting of lists, along with implementing accessibility best practices, ensures that everyone, including users with disabilities, can comfortably navigate your content. These techniques enhance the experience for all visitors, making your web pages more user-friendly and inclusive.

I hope this helps in your #webdev journey 🚀

Happy learning! 😊

GO TOP