Summary - Magazine page

Build a magazine home page skeleton with all landmarks.

Magazine page plan

A magazine home page quickly shows three things: who it is (logo), what is on this week (featured posts) and where to go (menu). So the skeleton is built from four landmarks: <header>, <main>, <aside>, <footer>.

At the top, header holds logo and menu. In the middle, main holds the featured posts; beside it, aside holds complementary bits (best sellers, related links). At the bottom, footer holds copyright and contact. Both people and machines then grasp the page at a glance.

Exercise Build the magazine skeleton

Build a magazine skeleton inside body. Add in order:

A <header>; inside it an <h1> (text Cheese Magazine) and a <nav> holding a <ul> with at least two <li>, each holding an <a> (non-empty text)
A <main>; inside it an <article> holding an <h2> (text This week)
An <aside>; inside it an <h2> (text Best sellers) and an <ol> with at least two <li>
A <footer>; inside it an <address> holding <a href="mailto:info@magazine.com">Write to us</a>

Show example solution

<body>
  <header>
    <h1>Cheese Magazine</h1>
    <nav>
      <ul>
        <li><a href="/posts">Posts</a></li>
        <li><a href="/archive">Archive</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>This week</h2>
    </article>
  </main>
  <aside>
    <h2>Best sellers</h2>
    <ol>
      <li>Ezine cheese</li>
      <li>Tulum cheese</li>
    </ol>
  </aside>
  <footer>
    <address>
      <a href="mailto:info@magazine.com">Write to us</a>
    </address>
  </footer>
</body>

Semantic layout summary

In this group you met the core landmarks of semantic layout. <header> holds the identity, <main> the real content, <aside> the side content, <footer> the bottom. <article> marks a stand-alone post, <section> a theme part.

Semantic tags are not for looks but for meaning. Picking the right tag raises both accessibility and search ranking at once. In the next group we will strengthen this structure on the accessibility side.

Test yourself

What does <main> most carry on a magazine home page?
- The site logo
- A banner ad
- Featured posts
- The copyright line
Show answer

Featured posts — Correct. main holds the real content; on a magazine page those are the featured posts.
Match the landmarks

header

Top section
main

Main content
aside

Side content
footer

Bottom section

Complete the magazine copyright

<footer>
  <small>© 2026 ____</small>
</footer>

Show answer

<footer>
  <small>© 2026 Cheese Magazine</small>
</footer>

Next lesson: ARIA basics

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies