Semantic Blog Post
15 minBeginnerHTML
Aina's recipe blog looks right, but under the hood every element is a <div>. Search engines can't tell the title from the text, and screen reader users can't jump to the main content or list the headings. Give each piece its real meaning.
Requirements
- Site name and menu go in a page
<header>; the three menu links go inside a<nav>. - The post is an
<article>inside<main>. Its title is the page's only<h1>; "The secret…" is an<h2>; body text uses<p>. - The date is a
<time>with a machine-readabledatetimelike2026-10-12. - The photo is a
<figure>with a<figcaption>, and the<img>gets a meaningfulalt. - The copyright line is a page
<footer>.
Keep the class names if you like — the CSS will keep working. Only the tags need to change.
Rewrite the <div> soup in index.html with semantic HTML: header + nav, main + article, one h1, an h2, p, time datetime, figure + figcaption (with alt), and a footer.
Checks
- header with nav, main, and footer landmarks
- Article in main with one h1 and an h2
- Body text uses paragraphs
- The date is a machine-readable <time>
- Photo in a figure with alt text and caption
Preview
Console output from your code appears here.