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>