HTML 03: Organizing Content with Lists

We're going to explore another fundamental aspect of HTML: lists. Lists are everywhere on the web. From recipes to to-do lists, they help organize content in an easily digestible format.

HTML 03:  Organizing Content with Lists

Over the past two days, you've created your first web page and learned about headings and paragraphs. Today, we're going to explore another fundamental aspect of HTML: lists.

The Power of Lists in HTML

Lists are everywhere on the web. From recipes to to-do lists, they help organize content in an easily digestible format. In HTML, there are two main types of lists:

  1. Ordered Lists (<ol>): These are used when the order of the items is important, like in a recipe.
  2. Unordered Lists (<ul>): These are used for a collection of items where order isn't important, like a shopping list.

Creating Lists in HTML

Creating lists in HTML is straightforward. Here's a quick guide:

Ordered List Example:

<!DOCTYPE html>
<html>
        <head>
            <title>My Ordered List</title>
        </head>
        <body>
            <h1>My Daily Routine</h1>
            <ol>
                <li>Wake up</li>
                <li>Brush teeth</li>
                <li>Have breakfast</li>
            </ol>
        </body>
</html>

Unordered List Example:

<!DOCTYPE html>
<html>
    <head>
        <title>My Unordered List</title>
    </head>
    <body>
        <h1>My Shopping List</h1>
        <ul>
            <li>Milk</li>
            <li>Bread</li>
            <li>Eggs</li>
        </ul>
    </body>
</html>

Your Mission: Enhance Your Web Page with a List. Now, it's your turn. Add a list to your web page. It can be about anything that interests you. Remember to structure it with the full HTML document setup.

Need Assistance? If you're facing any hurdles, our SkillSprints community on Slack is always here to help. Don't hesitate to ask your questions and share your progress. You can join the conversation ​here​.

Final Thought: Incorporating lists into your web page not only structures your content better but also enhances the user experience. You’re doing great at building a solid foundation in HTML. Keep up the enthusiasm – every step you take is an exciting leap in your web development journey!