course icon

HTML Lists

Fundamentals Course

Introduction

HTML lists are essential for organizing and structuring content on web pages. They allow you to present information in a structured and readable format, making it easier for users to navigate and understand you content.

Lesson overview

In this lesson overview, you will find a comprehensive outline of the topics covered in each section.

  • Unordered Lists
  • Ordered Lists and start attribute
  • Description Lists

Unordered List

Unordered lists are used to present items in no particulare oreder, typically represented by bullet points.

unordered-list.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML Lists</title>
    </head>
    <body>
        <h1>Most Popular Web Browsers</h1>
        <ul>
            <li>Google Chrome</li>
            <li>Mozilla Firefox</li>
            <li>Opera Browser</li>
            <li>Microsoft Edge</li>
            <li>Safari Browser</li>
        </ul>
    </body>
</html>

Output:

unordered list output

  • Use unordered lists when the order of items doesn't matter.
  • The bullet point is the default of the <ul> tag items, signify a lack of sequential order, making unordered lists ideal for presenting items without hierarchy.

Ordered Lists

Ordered lists are used to present items in a sequential order, typically represented by numbers or letters.

ordered-list.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML Lists</title>
    </head>
    <body>
        <h1>Ordered Lists Example</h1>
        <ol>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ol>
    </body>
</html>

Output:

ordered list output

  • Use ordered lists when presenting items in a specific order or sequence.
  • The numbered format guides users through a logical progression, making orderd lists suitable for ste-by-step instructions or hierarchy content.

Start Attribute

start attribute specifies the starting value of the ordered-list.

ordered-list.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML Lists</title>
    </head>
    <body>
        <h1>Ordered Lists Example</h1>
        <ol start="5">
            <li>Fifth item</li>
            <li>Sixth item</li>
            <li>Seventh item</li>
        </ol>
    </body>
</html>

Output:

ordered list output

Explanation:

The start attribute allows you to specify the starting value of ther ordered-list, the list starts from the value "5" instead of the default "1". This is useful when you want to continue a list from a specific number or customize the starting point for easthetic or organizational purposes.

Definition Lists

Definition lists are used to present terms and their corresponding definitions.

  • The <dl> and </dl> tag pair defines the description list.
  • The <dt> and </dt> tag pair defines the term (name).
  • The <dd> and </dd> tag pair describes each term.
definition-lists.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML Lists</title>
    </head>
    <body>
        <h1>Definition Lists Example</h1>
        <dl>
            <dt>Web Page</dt>
            <dd>
                is a document commonly written in HTML that is accessible through 
                the internet or other network using a web browser. 
            </dd>
            <dt>Web Site</dt>
            <dd>
                is a collection of related web pages, including multimedia content, 
                typically identified with a common domain name, and published on at 
                least one web server.
            </dd>
        </dl>
    </body>
</html>

Output:

definition lists output

  • Use definition lists when presenting glossaries, dictionaries, or sets of terma and their explanantions.
  • The term and definition structure clarifies relationships between terms, aiding comprehension for users seeking specific information.