Semantic HTML Elements

Semantic elements communicate content meaning to browsers, search engines, and assistive technologies — enabling better SEO rankings and screen reader navigation without any extra JavaScript.

In this lesson

STEP 1

<header> wraps introductory content or navigational aids for its nearest sectioning ancestor.

STEP 2

<main> represents the dominant content — there should be exactly one per page.

STEP 3

<article> holds self-contained content that could be independently syndicated (blog post, news story).

Interactive Example

A semantic blog layout

Editable in-browser

Interactive Editor

typescript

· A semantic blog layout

Output Console

In-Browser Sandbox

Modify code and click "Run Code" (or ⌘+Enter) to evaluate output in real time.

What happens here?

Wrap the headline and date in <header> inside the article.
Each thematic section gets its own <section> with a heading.
The author byline goes in <footer> scoped to the article.

Quick check

How many <main> elements should a page have?

Next: Phase 2 Hands-On Drill

Ready to write code?

Solve the coding challenge in the in-browser IDE with live visible and hidden specification tests.