Semantic Page Layout

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Build a semantic page layout using header, nav, main, section, article, and footer. Focus on correct landmarks, heading hierarchy, and structure rather than styling or layout hacks so the document outline remains clear and accessible.

Solution

Overview

A semantic layout uses header, nav, main, section, article, and footer to describe the page structure to assistive tech and search engines. The goal is to place content in the correct landmarks with a clear heading hierarchy so the page is navigable even without CSS and the document outline is meaningful and consistent.

Approach 1 — Replace wrappers with semantic layout

Create a header with an h1, a nav for links, a main containing two articles, and a footer. Each article should include an h2 and a section for the body. Avoid extra div wrappers unless needed, and keep heading levels consistent to reflect the document outline and meet the tests. Ensure there is exactly one main element and that semantic elements are used for structure, not presentation.

<html>

<!DOCTYPE html>
  <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <title>
        Semantic Page Layout
      </title>
    </head>
    <body>
      <header>
        <h1>
          My Blog
        </h1>
        <p>
          Welcome to your semantic HTML layout exercise.
        </p>
      </header>
      <main>
        <article>
          <h2>
            First Post
          </h2>
          <section>
            <p>
              This is the first article’s main content.
            </p>
          </section>
        </article>
        <article>
          <h2>
            Second Post
          </h2>
          <section>
            <p>
              This is the second article’s main content.
            </p>
          </section>
        </article>
      </main>
      <footer>
        <p>
          Footer placeholder.
        </p>
      </footer>
    </body>
  </html>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  line-height: 1.6;
}
header, footer {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: 6px;
}
main {
  margin-top: 1.5rem;
}
article {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}
article h2 {
  margin-top: 0;
}

Notes & Pitfalls

Pitfalls

Don’t change CSS/JS — tests expect structure only.
Ensure there is exactly one <main> and exactly two <article> elements.
Each <article> must include both an <h2> and a <section> (not just a <div>).

Techniques

Use one clear page hierarchy: header → main → article/section → footer.
Put the page’s primary heading (<h1>) inside <header>.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep