Page chrome with landmarks

Real sites repeat a pattern: branding and navigation at the top, main content in the middle, footer at the bottom. HTML landmarks express that structure; CSS makes it look polished.

Landmark elements

• <header> — intro for page or section (logo, nav).
• <nav> — major navigation links.
• <main> — primary content (one per page).
• <footer> — meta links, copyright.

Skip link (accessibility win)

The playground includes a visually hidden skip link that appears on keyboard focus—jumps to #main. This is a small habit that impresses in interviews and helps real users.

Practice

1. Tab from the top—watch the skip link appear.
2. Add a second link in nav and style nav a:hover.
3. Change header to a column layout on narrow widths using flex-wrap.

Important interview questions and answers

1. Q: How many `
   ` elements should a page have?
   A: One visible main landmark per page (hidden off-screen mains are special cases).
2. Q: Difference between `
   ` and ``?
   A: `head` is metadata; `header` is usually visible page/section header content.
3. Q: Why add a skip link?
   A: Keyboard users avoid tabbing through long nav lists on every page load.