Widget skeleton

Build the widget skeleton with semantic tags.

Build the widget shell

In this lesson we'll build the semantic shell of the widget. Inside the <body> of the empty skeleton we add a <section> that marks the panel boundary.

Inside the section we place, in order:

<header>: for the panel title
<main>: for the widget's main content
<article>: for an independent data unit

Screen readers then treat the panel as one region.

What do header and main do?

<header> is the introductory group of a section; it carries the widget's name and short description. It usually holds an <h1>.

<main> wraps the dominant content of the page; only one <main> should appear per page. Inside <main> we place an <article> so the data unit stays independent.

This separation keeps screen reader shortcuts working correctly.

Exercise Add lang, meta, title and the widget shell

Take the empty skeleton from the previous lesson. Add lang="en" to <html>. Inside <head> add meta charset=utf-8, viewport (width=device-width, initial-scale=1), and title with content Sales Dashboard. Inside <body> add in order a <section>, then inside it a <header> with an <h1> (content: Sales Dashboard), then a <main> containing an empty <article>.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sales Dashboard</title>
  </head>
  <body>
    <section>
      <header>
        <h1>Sales Dashboard</h1>
      </header>
      <main>
        <article>
          <!-- content arrives in later lessons -->
        </article>
      </main>
    </section>
  </body>
</html>

Test yourself

Which element is best for 'independent, self-contained content'?
- section — thematic grouping
- article — independent content unit
- header — section header
- main — main content region
Show answer

article — independent content unit — Correct! article carries independent, self-contained content.

Complete the header tag

<section>
  <____>
    <h1>Sales Dashboard</h1>
  </header>
</section>

Show answer

<section>
  <header>
    <h1>Sales Dashboard</h1>
  </header>
</section>

Match each tag to its role

section

Thematic section
header

Section header group
main

Main content region
article

Independent content unit

Next lesson: Visual data structure

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies