html · level 3 · unit 6 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
keeps HTML ready to copy, but never shows it.
A template is like a stencil: you keep it ready and stamp out copies. In HTML it is <template>. Everything inside is : not shown, not read out by screen readers, and its pictures are not even downloaded.
On its own, a template does nothing. A script, which you will meet in JavaScript, copies it to add new cards, rows or messages, each one built the same way.
That makes it a tidy home for spare parts: a product card ready to repeat, or a message kept for later.
<h2>Our cakes</h2>
<ul id="cakes">
<li>Lemon drizzle, £3</li>
</ul>
<template id="cake-card">
<li>
<img src="cake.svg" alt="A slice of cake" width="80" height="80">
<span>New cake</span>
</li>
</template>Press show my page to see it here.
The cake picture in the template is not downloaded until a copy is placed on the page.
guess first
What will this page show?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h2>Sold out today</h2>
<p>Sourdough loaf</p>
<template>
<p>Cinnamon buns</p>
</template>your turn
Your turn. Put the spare card on standby.
The card on line 4 is a spare, ready to copy. Fill the blanks on lines 3 and 5 so a template keeps it off the page.
Press show my page to see it here.
- only Biscuit's card showsnot checked yet
- the spare card is in a templatenot checked yet
- one card is on the pagenot checked yet
fix it
The spare card shows on the page. Can you fix it?
Press show my page to see it here.
- only one card showsnot checked yet
- the spare card is in a templatenot checked yet
- The spare card should be kept out of sight. Which tag is meant to do that?
- Look closely at the spelling of the tag on line 3.
- Change
<tempalte>and</tempalte>to<template>and</template>, then press run.
nailed it
your spare parts are on standby. :D
<template>holds HTML that is never shown.- Its contents are inert: not shown, loaded or read out.
- A script copies it to make new parts.
new words in your collection
- template
- inert
This lesson isn’t saved. A free account remembers every lesson you finish.