Semantic layout landmarks (header, nav, main, footer)
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which semantic element wraps the site title and navigation at the top of a page?
2. Which element contains the primary navigation links of a site?
3. True or false: a page can have more than one <main> element.
4. Which element wraps copyright and contact information at the bottom of a page?
5. True or false: semantic landmarks add visible styling to the page automatically.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<header> <h1>My Site</h1> <nav>Links</nav> </header> | A<head> is for metadata, not visible content - use <header> for the visible page header | |
| 2<footer> <p>Copyright 2024.</p> </footer> | B<main> <h2>Welcome</h2> <p>Page content here.</p> </main> | |
| 3<main> contains the unique primary content - only one <main> per page is allowed | CHTML tag names must be lowercase - <HEADER> and </HEADER> should be <header> and </header> | |
| 4<nav> groups navigation links and tells assistive technology this is the site menu | DThe page header landmark - wraps introductory content like the site title and navigation at the top | |
| 5<head><h1>Site Title</h1></head> | EThe page footer landmark - wraps closing information like copyright, legal text, and contact links | |
| 6<HEADER> <h1>Title</h1> </HEADER> | F<nav> <a href="home.html">Home</a> <a href="about.html">About</a> </nav> |
C
Definitions
<main>
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<___>
<h1>My Site</h1>
<nav>Links</nav>
</header>
2.
<header>
<___>
<a href="home.html">Home</a>
</nav>
</header>
3.
<___>
<h2>Welcome</h2>
<p>Content here.</p>
</main>
4.
<___>
<p>Copyright 2024.</p>
</footer>
5.
<header>
<h1>Title</h1>
</___>
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<HEADER>
B
<h1>My Site</h1>
C
<nav>Links</nav>
D
</header>
Question 2
A
<body>
B
<header><header>
C
<main><p>Content.</p></main>
D
<footer>Info</footer>
E
</body>
Question 3
A
<body>
B
<header><h1>Site</h1></header>
C
<NAV>Links</NAV>
D
<main>Content.</main>
E
<footer>Info</footer>
F
</body>
Question 4
A
<header>
B
<nav>
C
<a href="home.html">Home</a>
D
<a href=about.html>About</a>
E
</nav>
F
</header>
Question 5
A
<body>
B
<header><h1>Title</h1></header>
C
<nav><a href="home.html">Home</a></nav>
D
<main><p>Content.</p></main>
E
<Footer>Info</Footer>
Answer Key
Semantic layout landmarks (header, nav, main, footer)
Section A: Quick Questions
Q1
A — <header>
Q2
B — <nav>
Q3
B — False
Q4
A — <footer>
Q5
A — False
Section B: Match the Pairs
Q1
<header>
<h1>My Site</h1>
<nav>Links</nav>
</header> → The page header landmark - wraps introductory content like the site title and navigation at the top
Q2
<footer>
<p>Copyright 2024.</p>
</footer> → The page footer landmark - wraps closing information like copyright, legal text, and contact links
Q3
<main> contains the unique primary content - only one <main> per page is allowed → <main>
<h2>Welcome</h2>
<p>Page content here.</p>
</main>
Q4
<nav> groups navigation links and tells assistive technology this is the site menu → <nav>
<a href="home.html">Home</a>
<a href="about.html">About</a>
</nav>
Q5
<head><h1>Site Title</h1></head> → <head> is for metadata, not visible content - use <header> for the visible page header
Q6
<HEADER>
<h1>Title</h1>
</HEADER> → HTML tag names must be lowercase - <HEADER> and </HEADER> should be <header> and </header>
Section C: Definitions
Q1
<main> — The HTML5 semantic element that wraps the unique primary content of a page. There should be only one <main> per page.Section D: Fill in the Blanks
Q1
<header>
<h1>My Site</h1>
<nav>Links</nav>
</header>Q2
<header>
<nav>
<a href="home.html">Home</a>
</nav>
</header>Q3
<main>
<h2>Welcome</h2>
<p>Content here.</p>
</main>Q4
<footer>
<p>Copyright 2024.</p>
</footer>Q5
<header>
<h1>Title</h1>
</header>Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <HEADER> should be written as <header>.
Q2
B — The header closing tag is missing its forward slash. It should be </header> not <header>.
Q3
C — HTML tag names must be lowercase. <NAV> and </NAV> should be written as <nav> and </nav>.
Q4
D — The href value must be in double quotes: href="about.html". href=about.html without quotes is invalid HTML.
Q5
E — HTML tag names must be lowercase. <Footer> and </Footer> should be written as <footer> and </footer>.