Module 1 · Lesson 3⏱ ~10 minHTML

Lists and Page Structure

Organizing content with lists and building a complete page layout.

Unordered Lists

Lists are everywhere on the web — navigation menus, feature lists, shopping carts, recipe ingredients. HTML gives you two kinds of lists. Let's start with unordered (bullet point) lists:

html

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
  <li>Butter</li>
</ul>

<ul> stands for unordered list. Each item inside it is wrapped in <li> (list item). The browser automatically adds bullet points.

What you'd see in a browser:

• Milk
• Eggs
• Bread
• Butter

Ordered Lists

Ordered lists use <ol> instead of <ul>. The browser automatically numbers them:

html

<ol>
  <li>Preheat the oven to 350°F</li>
  <li>Mix the dry ingredients</li>
  <li>Add the wet ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

The browser renders this as:

1. Preheat the oven to 350°F
2. Mix the dry ingredients
3. Add the wet ingredients
4. Bake for 30 minutes

When to use which: use <ol> when the order matters (steps, rankings, instructions). Use <ul> when the order doesn't matter (shopping list, features, links).

Nested Lists

You can put a list inside another list. This is called nesting:

html

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

Notice how the inner <ul> goes inside the outer <li>, before its closing tag. This creates indented sub-lists — perfect for categories, navigation dropdowns, or any hierarchical information.

Indentation tip: always indent your nested elements. It doesn't change how the page looks, but it makes your code much easier to read. Every developer who works on your code (including future you!) will thank you.

Semantic Structure Tags

Modern HTML includes special tags that describe the role of different parts of your page. These are called semantic tags because they add meaning to the structure:

html

<header>
  <!-- Top of the page: logo, site title, main navigation -->
</header>

<nav>
  <!-- Navigation links go here -->
</nav>

<main>
  <!-- The main content of your page -->
</main>

<section>
  <!-- A group of related content -->
</section>

<footer>
  <!-- Bottom of the page: copyright, contact info, links -->
</footer>

<header> — the top section of your page. Usually contains the site logo, title, and main navigation.
<nav> — a section of navigation links. Screen readers use this to help users jump straight to the menu.
<main> — the primary content of the page. There should be only one <main> per page.
<section> — a thematic group of content, like a chapter or a distinct area of the page.
<footer> — the bottom section. Typically contains copyright, contact details, and secondary links.

Why semantic tags matter: they help search engines understand your page (better SEO), they help screen readers navigate (better accessibility), and they make your code clearer to other developers.

Putting It All Together

Here's what a real webpage looks like using everything from Module 1 — headings, paragraphs, links, images, lists, and semantic structure:

html

<!DOCTYPE html>
<html>
  <head>
    <title>My Personal Page</title>
  </head>
  <body>
    <header>
      <h1>Alex Johnson</h1>
      <p>Web developer in training</p>
    </header>

    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <h2>About Me</h2>
        <p>Hi! I'm learning to build websites from scratch.</p>
        <img src="profile.jpg" alt="Alex smiling at the camera"
             width="300" height="300">
      </section>

      <section>
        <h2>My Hobbies</h2>
        <ul>
          <li>Photography</li>
          <li>Hiking</li>
          <li>Reading sci-fi novels</li>
        </ul>
      </section>
    </main>

    <footer>
      <p>&copy; 2026 Alex Johnson</p>
    </footer>
  </body>
</html>

This is a complete, well-structured HTML page. It has a header with name and tagline, a navigation bar with links, a main content area with sections, and a footer. Every real website is built on top of this exact structure.

Try It Yourself

Build your own personal homepage. Include all of these:

A <header> with your name
A <nav> with 3 dummy links (they don't need to go anywhere real — use # as the href)
A <main> section with a short bio paragraph and a list of your hobbies or interests
A <footer> with your name and the year

Challenge: add an image somewhere on the page! Use a free placeholder like https://placehold.co/200x200.

Key Terms

Unordered List — creates a bullet-point list. Use when the order of items doesn't matter.

Ordered List — creates a numbered list. Use when the sequence is important (steps, rankings).

List Item — each individual item inside a ul or ol list.

Semantic HTML

HTML tags that describe the meaning and role of content (like header, nav, main, footer) rather than just how it looks.

header / footer

Semantic tags for the top and bottom sections of a page. They help search engines and screen readers understand your page structure.

Check Your Understanding

When should you use <ol> instead of <ul>?

Answer: Use <ol> when the order of items matters — like recipe steps, rankings, or instructions. Use <ul> when the order doesn't matter — like a shopping list or feature list.

What is semantic HTML and why does it matter?

Answer: Semantic HTML uses tags that describe what content is (like <header> and <nav>) rather than just how it looks. It helps search engines rank your page and helps screen readers navigate it — both are essential for real websites.

What are the five semantic structure tags introduced in this lesson?

Answer: <header>, <nav>, <main>, <section>, and <footer>.

Previous: Links and Images Next: Introduction to CSS