html · level 2 · unit 4 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
wraps a piece that makes sense on its own.
elements say what a part of a page is, not how it looks. You already know some: <header>, <nav>, <main> and <footer>. They look no different from a <div>, but browsers and screen readers learn what each part is for.
An article is a complete piece that would still make sense on another page: a blog post, a recipe, a review or a product card. Wrap each one in <article>, starting with its own heading.
A news page holds many articles. A shop page has one for each product.
<main>
<h1>Bake club blog</h1>
<article>
<h2>The perfect scone</h2>
<p>Cold butter is the secret.</p>
</article>
<article>
<h2>Bread with no kneading</h2>
<p>Let time do the work.</p>
</article>
</main>Press show my page to see it here.
Ask yourself: could this piece be printed on its own and still make sense? Then it is an article.
guess first
Does <article> change how this looks?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<article>
<h2>Pip the cat</h2>
<img src="cat.svg" alt="A ginger cat curled up in a box">
<p>Pip is 3 and loves cardboard boxes.</p>
</article>your turn
Your turn. Wrap each review.
There are two customer reviews on this page. Wrap each one, heading and paragraph together, in its own <article>. Fill all four blanks.
Press show my page to see it here.
- there are two articlesnot checked yet
- each article holds a heading and reviewnot checked yet
- the articles are not nestednot checked yet
fix it
The second post has landed inside the first. Can you fix it?
Press show my page to see it here.
- there are two articlesnot checked yet
- neither post is inside the othernot checked yet
- Each post should stand alone. Where does the first one end?
- The first
<article>is never closed, so the second post lands inside it. - Add
</article>on a new line after line 3, then press run.
nailed it
your posts stand on their own. :D
- Semantic elements say what a part is for.
<article>wraps a piece that makes sense alone.- Give each article its own heading.
new words in your collection
- semantic
- article
This lesson isn’t saved. A free account remembers every lesson you finish.