Build a page the browser understands

Structure is meaning before it is styling.

A browser does more than draw boxes. It builds a document outline from your HTML so keyboards, screen readers, search engines, and your future CSS can understand what each part is for.

Start every page with a small, valid skeleton. The metadata belongs in <head>; everything a person sees belongs in <body>.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first article</title>
  </head>
  <body>
    <!-- Visible page content goes here -->
  </body>
</html>

Why the language matters

lang="en" helps assistive technology use the right pronunciation rules. It is a tiny detail with a real user effect.

Choose elements by purpose, not appearance.

Semantic elements name the job a region performs. A <header> introduces content, <main> holds the page’s unique focus, and <footer> closes it with supporting information.

<header>Identity and navigation

<main>The page’s unique content

<article>A complete, standalone story

<footer>Supporting context

Use <article> when content could stand on its own, such as a tutorial or post. Use <section> to group a themed part of that content. Reach for <div> only when no meaningful element fits.

Build a heading outline someone can scan.

Headings communicate hierarchy. Use one clear <h1> for the page topic, then <h2> for its direct sections. Do not pick a heading level because of its default font size; CSS controls appearance.

<body>
  <header>
    <nav aria-label="Main navigation">…</nav>
  </header>

  <main>
    <article>
      <h1>How the browser reads a page</h1>
      <section>
        <h2>Start with landmarks</h2>
        <p>…</p>
      </section>
    </article>
  </main>

  <footer>Written by Kunal</footer>
</body>

Two-minute build

Build the structure before you style it.

Use the workspace below to recreate the example without copying it. Then point to each element and say its job aloud. If you cannot name the job, reconsider the element.

Course tutor · Semantic HTML only

Ask while the structure is fresh.

Get a short answer grounded in this lesson. If the course does not cover it, the tutor will say so instead of guessing.

Lesson-bound

Ready when you are

Ask about the document, landmarks, semantic elements, headings, or language.

Private lesson notes

Put the idea in your own words.

Capture the explanation, question, or example you want to remember before you start the assignment.

Your space

What do you want to remember?Keep passwords and personal information out of your notes. 0/2,000

Only your account can return to this note.

Assignment · Semantic HTML

Build an accessible article page.

Complete the starter file with the landmarks and headings taught in this lesson. Your finished page should explain its structure to browsers, assistive technology, and readers without relying on visual styling.

Expected outcomeOne semantic article that passes all five rubric checks.

Not submitted2/5rubric checks

index.htmlLocal draft

Semantic HTML

Live previewNetwork blocked

Submission rubric

Five checks, graded on the server.

2/5 passing

Introduce the page with a header

Add one <header> before <main> for the page identity or navigation.

Put the article inside one main landmark

Use exactly one <main>, then place one complete <article> inside it.

Give the article one clear page heading

Add an <h1> inside the <article> to name its main topic.

Group one idea in a labelled section

Add a <section> inside the article and introduce that section with an <h2>.

Close the page with a footer

Add one <footer> after <main> for the author or supporting context.

Starter code is ready. Submit when your article structure is complete.