Module 4: Structure and Semantics · Lesson 5 of 5
How to Make a Blog Page in HTML: Semantic Layout
All lessons in Module 4
Goal: Build a full blog page out of meaningful structure tags only.
Learn
Now you plan a whole blog page with the tags from this module. Sketch the floor plan before you type anything:
- A
<header>with the blog name and a<nav>menu. - One
<main>holding the post as an<article>, split into<section>s with their own headings. - An
<aside>about the author, next to the post. - A
<footer>with closing info.
For each box, choose the tag that says what the content is. How it looks comes later, from CSS. That split is the core idea of semantic HTML (opens in a new tab). Every box here has a meaningful tag, so the page needs zero <div>s.
The short version
- Draw the floor plan before coding: a header with nav, a main with the article and aside, and the footer.
- Split the post into
<section>s whose headings sit one level below the post title. - The author box goes in an
<aside>inside<main>, next to the article. - Once every box has a meaningful tag, the page has no use for
<div>.
Example
<header>
<h1>Trail Notes</h1>
<nav>
<a href="#posts">Posts</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<article>
<h2>Three Days in the Alps</h2>
<section>
<h3>Day one</h3>
<p>Rain, then the best sunset of the trip.</p>
</section>
</article>
</main>Your task
Build a blog page about something you love. Inside <body>, add:
- A
<header>with an<h1>blog name and a<nav>of at least 3 links. - Exactly one
<main>, containing an<article>with an<h2>post title. - At least 2
<section>s inside the article, each starting with an<h3>. - An
<aside>inside main with a paragraph about the author. - A
<footer>with a paragraph. - No
<div>anywhere.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<article>
<h2>Keeping a Cactus Alive</h2>
<section>
<h4>Light</h4>
<p>Use the sunniest windowsill.</p>
</section>
</article>Right
<article>
<h2>Keeping a Cactus Alive</h2>
<section>
<h3>Light</h3>
<p>Use the sunniest windowsill.</p>
</section>
</article>Heading levels go down one step at a time, so sections under an h2 post title get h3.
Wrong
<main>
<article>
<h2>Keeping a Cactus Alive</h2>
</article>
<footer>
<p>© 2026 Pocket Jungle</p>
</footer>
</main>Right
<main>
<article>
<h2>Keeping a Cactus Alive</h2>
</article>
</main>
<footer>
<p>© 2026 Pocket Jungle</p>
</footer>Put the site footer after main, because a footer inside main loses its page-level landmark role and no longer marks the closing info of the page.
Go deeper
A real blog usually has two kinds of pages, both built from these tags. The post page you just made holds one full article. The homepage lists many posts, and each preview is an <article> of its own with a heading, a short summary and a link to the full post.
Posts also carry details meant for machines. Wrap the publish date in a <time> element with a machine-readable value (opens in a new tab), like <time datetime="2026-03-14">March 14</time>. Browsers, feed readers and search engines then get the exact date. Author and date often sit in the article's own <header>, with tags or a share link in the article's <footer>.
Search engines read your heading structure to work out what the post covers. Google's SEO Starter Guide (opens in a new tab) advises descriptive titles, so "Watering a cactus" beats a clever pun.
Try opening your page with styles turned off, or in the browser's reader view. If it still reads in a sensible order, the structure holds up.
Frequently asked questions
How do I make a simple blog page in HTML?
Start from the page skeleton and add the regions in order. A blog (opens in a new tab) post page makes a good first layout. First a <header> with the blog name in an <h1> and a <nav> of links. Next a <main> with the post in an <article>, split into <section>s, plus an <aside> for the author. A <footer> closes the page. Colors and columns come later with CSS.
Where should the aside go in a blog layout?
It depends on what the aside is about. Site-wide content, like an author bio or a list of popular posts, goes inside <main> after the article. Content about the post itself, such as a quick tip, goes inside the <article>. Its spot on screen (left, right or below) is decided by CSS. Moving it around in the HTML won't change that.
Do I need CSS to make a blog layout?
For a two-column look with a sidebar, yes. HTML says what each part is, and CSS decides where it goes and how it looks. Get into the habit of finishing the HTML first and checking that the page reads well unstyled, from top to bottom. After that, arrange the regions with CSS and leave the HTML structure alone. The CSS basics module gets you started.