Web foundations lab

Semantic structure

Landmarks, sections, articles, navigation, and content hierarchy.

Track progress 0/120 lessons 0/18 missions 12 courses
0%
Continue View profile
01 Semantic structure Semantic structure: Site header

Build site header inside the persistent Support center: Site header starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
02 Semantic structure Semantic structure: Primary navigation

Build primary navigation inside the persistent Team directory: Primary navigation starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
03 Semantic structure Semantic structure: Main landmark

Build main landmark inside the persistent Field notes: Main landmark starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
04 Semantic structure Semantic structure: Named sections

Build named sections inside the persistent Civic calendar: Named sections starter project.

Beginner 10 minutes · header, nav, main, section, article, footer
05 Semantic structure Semantic structure: Independent articles

Build independent articles inside the persistent Learning journal: Independent articles starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
06 Semantic structure Semantic structure: Supporting asides

Build supporting asides inside the persistent Product changelog: Supporting asides starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
07 Semantic structure Semantic structure: Page footer

Build page footer inside the persistent Workshop signup: Page footer starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
08 Semantic structure Semantic structure: Contact information

Build contact information inside the persistent Incident summary: Contact information starter project.

Beginner Checkpoint 10 minutes · header, nav, main, section, article, footer
09 Semantic structure Semantic structure: Nested heading order

Build nested heading order inside the persistent Community workshop: Nested heading order starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
10 Semantic structure Semantic structure: Complete page outline

Build complete page outline inside the persistent Neighborhood library: Complete page outline starter project.

Beginner 7 minutes · header, nav, main, section, article, footer
Snippet coverage

Patterns you will practice here.

Run

Render a simulated preview from the current lesson snippet.

Check

Save the lesson after the required task snippets are complete.

Hint

Show the lesson hint without changing progress.

Reset

Clear local Web lab scratch state for this browser.

<!doctype html>

Start an HTML document with an explicit standards-mode marker.

<header> <main> <section> <footer>

Use semantic landmarks so pages have structure.