html · level 1 · unit 5 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
and are name tags for elements.
A class is a group name you can give to many elements, like a team shirt. Write it as an attribute, such as class="note". Lots of elements can share one class.
An id is a name for one element only, like a passport. No two elements on a page may share an id. Use letters and dashes, with no spaces.
Neither changes the look. But a link can jump to an id: href="#rules" jumps to the element with id="rules". Later on, both help you colour and style your page.
<a href="#rules">Jump to the rules</a>
<h2 class="section">Prizes</h2>
<p class="note">Win a cake!</p>
<h2 class="section" id="rules">Rules</h2>
<p class="note">Be kind.</p>Press show my page to see it here.
The # belongs only in the link. It means look for this id.
guess first
Where will the link jump to?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<a href="#pudding">Skip to pudding</a>
<h2 id="starter">Soup</h2>
<h2 id="main">Pie</h2>
<h2 id="pudding">Trifle</h2>your turn
Your turn. Link to the jokes.
Give the Jokes heading the id jokes, and make the link on line 1 jump to it. Then give the joke paragraph the class joke.
Press show my page to see it here.
- the link points to
#jokesnot checked yet - the jokes heading has the id jokesnot checked yet
- the joke paragraph has the class jokenot checked yet
fix it
The link will not jump. Can you fix it?
Press show my page to see it here.
- the contact heading's id is contactnot checked yet
- the link still points to
#contactnot checked yet
- Click the link and nothing happens. Compare the link with the id it is looking for.
- The
#belongs only in the link. It tells the link to look for an id. - Change
id="#contact"toid="contact", then press run.
nailed it
your elements have name tags. :D
- A
classcan be shared by many elements. - An
idbelongs to one element only. href="#name"jumps to the element with that id.
new words in your collection
- class
- id
This lesson isn’t saved. A free account remembers every lesson you finish.