html · level 1 · unit 5 · lesson 3
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
<div> groups blocks and <span> wraps a few words.
Some elements are blocks: each starts on a new line and stretches across the page, like <h1>, <p> and <ul>. Others are : they sit inside a line of text, like <a> and <strong>.
<div> is a plain block. It groups other elements together, like a box holding a pile of things. On its own it adds no look at all.
<span> is a plain inline element. It wraps a few words inside a line without changing them. Both become useful once you give them names, in the next lesson.
<div>
<h2>Biscuit</h2>
<p>Age: <span>3</span></p>
</div>
<div>
<h2>Mittens</h2>
<p>Age: <span>5</span></p>
</div>Press show my page to see it here.
Run it: the page looks the same as it would without the boxes, but the code is grouped.
guess first
A span around one word. What changes?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p>I like <span>red</span> apples.</p>your turn
Your turn. Box up a recipe card.
Fill the tag names on lines 1 and 4 so a <div> wraps the card. Then type how many minutes it takes inside the span.
Press show my page to see it here.
- the heading sits inside a divnot checked yet
- the span holds a numbernot checked yet
fix it
Both days are on one line. Can you fix it?
Press show my page to see it here.
- each day is its own blocknot checked yet
- monday comes firstnot checked yet
- Both days sit side by side on one line. Why?
- A
<span>is inline, so it stays in the line. Each day needs a block. - Change both spans to
<div>and</div>, then press run.
nailed it
you can box things up now. :D
- Block elements start on a new line.
<div>groups blocks.<span>wraps words inside a line.- Neither changes the look on its own.
new words in your collection
- block
- inline
This lesson isn’t saved. A free account remembers every lesson you finish.