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