CodeBlanks Logo Icon CodeBlanks
Login Register

Home page

HTML course · Intermediate · Lesson 60/67

Write the hero and summary content sections for the home page.

Home page structure

The <main> region of the home page usually starts with a hero: an <h1> holding the page title and a short description paragraph. The content is then split into <section> regions.

Each section carries its own <h2> heading. Inside a section go <article> tags, which are self-contained content pieces; each article is written with <h3> and <p>. This keeps the heading hierarchy consistent across pages.

Section and article

A <section> groups related content and is introduced by an <h2> heading. Inside a section go <article> tags; each article is a self-contained piece with its own heading.

The Cheese Magazine home page has a 'Latest articles' section holding two articles: each has an <h3> (article title) and a <p> (short summary). This structure splits the page into meaningful regions for browsers and screen readers.

Exercise Add a hero and a section inside main

Add a <main> between the header and footer. Inside main put an <h1> (page title), a <p> (short description) and a <section>. Inside the section put an <h2> and at least two <article> tags; each article should have an <h3> and a <p>.

Show example solution 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cheese Magazine</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Cheese Magazine</a>
        <a href="/articles">Articles</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
      </nav>
    </header>
    <main>
      <h1>Cheese Magazine</h1>
      <p>Articles, recipes and maker stories about cheese culture.</p>
      <section>
        <h2>Latest articles</h2>
        <article>
          <h3>Ezine cheese</h3>
          <p>We examined the production stages of Thrace's white cheese.</p>
        </article>
        <article>
          <h3>Van herb cheese</h3>
          <p>We met the herbs used in Eastern Anatolia's herb cheese.</p>
        </article>
      </section>
    </main>
    <footer>
      <address>
        Cheese Magazine, Brooklyn, NY
      </address>
      <p>(c) 2026 Cheese Magazine</p>
    </footer>
  </body>
</html>

Test yourself

  1. Complete the hero section heading

    <main><____>Cheese Magazine</h1></main>
    Show answer 
    <main><h1>Cheese Magazine</h1></main>

  2. Which structure gives a section with an h2 and at least one article?

    • <h2><section><article>...</article></section></h2>
    • <section><article><h2>...</h2></article></section>
    • <section><h2>...</h2><article>...</article></section>
    • <section><h2>...</h2></section><article>...</article>
    Show answer

    <section><h2>...</h2><article>...</article></section> — Correct. A section starts with h2 and the article sits inside the section.

  3. Match the heading level to its role

    h1
    Page title
    h2
    Section heading
    h3
    Article heading
    section
    Content group

All lessons in Intermediate

1 Advanced text elements

  1. Abbr, cite and time
  2. Code, kbd and samp
  3. Sub and sup
  4. Pre and code block
  5. Wbr, bdi, bdo
  6. Summary - Technical doc

2 Advanced links

  1. Download links
  2. Ping and rel types
  3. Hreflang and canonical
  4. Link accessibility
  5. Button vs link
  6. Summary - Multilingual menu

3 Project: Landing page

  1. Project: Product landing page
  2. Hero section
  3. Feature list
  4. Pricing table
  5. Project final - Landing

4 Advanced tables

  1. Col and colgroup
  2. Scope and headers
  3. Table accessibility
  4. Responsive tables
  5. Table visual structure
  6. Summary - Comparison table

5 Project: Data table

  1. Project: Data table
  2. Header and caption
  3. Body data
  4. Summary row
  5. Project final - Data table

6 Advanced form elements

  1. Fieldset and legend
  2. Datalist and output
  3. Progress and meter
  4. Input attributes
  5. Autocomplete and inputmode
  6. Summary - Survey form

7 Form validation

  1. Required and pattern
  2. Min, max and step
  3. Minlength and maxlength
  4. Type-based validation
  5. Novalidate and formnovalidate
  6. Summary - Registration validation

8 Project: Contact form

  1. Project: Contact form
  2. Form skeleton
  3. Person fields
  4. Message and subject
  5. Project final - Contact form

9 Semantic layout

  1. Header structure
  2. Main content
  3. Sidebar and aside
  4. Footer structure
  5. Sectioning rules
  6. Summary - Magazine page

10 Accessibility basics

  1. ARIA basics
  2. Visually hidden heading
  3. Skip link
  4. Form accessibility
  5. Table accessibility
  6. Summary - Accessible card

11 Project: Site skeleton

  1. Project: Multi-page site skeleton
  2. Consistent header/footer
  3. Home page
  4. About and contact
  5. Project final - Site skeleton

12 Intermediate final

  1. Challenge - Advanced text
  2. Challenge - Accessible table
  3. Challenge - Validated form
  4. Challenge - Semantic layout
  5. Challenge - Intermediate capstone