Attributes and links
Send people to another page with a link, and find out that its address sits inside the opening tag.
Every click you make on the web, from a search result to a shop menu, follows a link written like this.
Some words on a page should take you somewhere else. A link does that, and it is the first tag you meet that needs extra information inside it.
- Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
- Run: Run it and compare the result with your prediction.
- Investigate: Trace how each line of code connects to what you see.
- Modify: Change the code on purpose and check the result.
- Make: Build something new using what you have learned. Expect a few tries; that is normal.
Make your prediction first. Help opens once you've locked it in.
Predict
<p>Read the <a href="https://example.com/rules">club rules</a> before you join.</p>
<a> makes a link. Read the code. What will the page show, and what happens on a click?
Run
Compare the page with your prediction, then click a link (it opens in a new tab). Look for the two parts: the words that show, and the address that does not.
| Code | What it does | Why |
|---|---|---|
<a href="https://example.com/rules">club rules</a> |
Makes a link | <a> opens it and </a> closes it. Whatever is between them is what people click |
href="https://example.com/rules" |
Says where the link goes | This is an attribute: a name="value" pair. The address is the value, in quotes |
<a href="…"> |
The attribute sits in the opening tag | Information about a tag goes inside its opening tag, after the tag name and a space. The closing tag never has one |
club rules |
The words people click | Only these show on the page. The address is not shown, and it is not what you click |
<h1>Sports day</h1>
<p>Read the <a href="https://example.com/rules">club rules</a> before you join.</p>
<p>Ask your house captain for the <a href="https://example.com/timetable">timetable</a>.</p>
Investigate
<h1>Sports day</h1>
<p>Read the <a href="https://example.com/rules">club rules</a> before you join.</p>
<p>Ask your house captain for the <a href="https://example.com/timetable">timetable</a>.</p>
Think about which part names the attribute, and where it goes.
Two of these three links work.
The page shows Timetable href=... as plain text next to a word that does not click, while the other two links work. Click the line that causes it.
Modify
Make the link go to https://example.com/join. The words stay the same.
Need a hint?
The address is the part inside the quotes after href=.
Another hint
Change only what is between the quotes. Leave the words alone.
Show the expected result
Change the link's words to rulebook. The address stays the same.
Need a hint?
The words people click sit between <a ...> and </a>.
Another hint
Change only those words. Leave the address alone.
Show the expected result
The last line has a word that should click. Make timetable a link to https://example.com/timetable.
Need a hint?
Put <a href="..."> just before the word timetable and </a> just after it.
Another hint
The address is https://example.com/timetable.
Show the expected result
Change the link's address to https://example.com/join.
This ticks when your page has all of the above.
Change the words of the link to rulebook.
This ticks when your page has all of the above.
Make the word timetable a link.
This ticks when your page has all of the above.
Mix it up
Three clubs, each a link. One of them is in the wrong place.
Art should be the third club in the list, but it shows without a bullet and further left. Click the line that causes it.
Make
Here is a top 5 list. Change the title and the items to your own favourites (books, games, places, songs). Then make two of the items links. Use https://example.com/ followed by a name as the address, and click each link to test it.
Need a hint?
Pick two items. Put <a href="..."> just inside the <li>, before the words.
Another hint
Close them in reverse order: </a> first, then </li>.
Show the expected result
Make at least two items in your top 5 into links.
This ticks when your page has all of the above.
For teachers
Students find out that a link is words plus an address in an href attribute, and that only the words show on the page. About 40 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can write a link with <a href="..."> and </a>.
- I can say which part of a link people see and which part says where it goes.
- I can put an attribute inside an opening tag as name="value".
Before class
Read the unit primer "Lists, links and pictures in 5 minutes" first, then do the Make task yourself in the playground (about 5 minutes).
An attribute is extra information about a tag, written inside the opening tag as name="value". href is the attribute that holds a link's address. The surprise for students is that the address does not show: only the words between <a> and </a> do. Links to example.com open a real placeholder page, so students can test a click.
Running the lesson
- Predict and Run: many students pick the option where the address shows. Let them run it and click, then use Modify to change only the address and only the words, so they see the two parts are separate.
- Investigate: the question is about where the attribute goes. In the bug, read line 4 aloud: the text after the > is just text.
- Modify: three small changes: the address only, the words only, then a new link. Ask which part of the tag each change touched.
- Mix it up: the list bug is from last lesson. Ask what closed the list before the third item.
- Make: the check ticks when the page has a list with a link in it; look at the page to see that two items are links.
The hard part (on purpose)
Putting the attribute in the right place. Ask which part of the tag is the opening one, rather than fixing the line.
When students get stuck
- The address shows on the page next to the words. Ask: Is the href inside the opening tag, before the first >? Fix: Move href="..." between a and the first >, so the tag reads <a href="...">.
- The words are not a different colour and nothing clicks. Ask: Does the link have both its <a href="..."> and its </a>? Fix: Add the missing opening tag with href, or the closing </a>, around the words.
- Everything after the link is clickable. Ask: Where does the link end? Fix: Add </a> straight after the words that should click.
Stretch and support
Stretch: Make a link to one of your own other pages in the playground, or a whole sentence into a link, and test where it ends.
Support: Give students the Modify starter and do the first task together, then link one item in the Make list.
Where it leads
Next lesson adds pictures, which are another tag with attributes: a name for the file and words for people who cannot see it. Class idea: show a real school page and hover over links to see the address in the browser's status bar.
What each step is for
- Predict: Many students expect the address to appear on the page, or to be the part you click; the address hides inside the tag.
- Run: A link has two separate parts: the words people click, and the address in href. Changing one leaves the other alone.
- Investigate: The attribute belongs inside the opening tag, as name="value"; anywhere else it is just text.
- Modify: The words and the address are separate parts of a link: change one and the other stays.
- Mix it up: Review of lists: every li belongs inside a list, even when each item is a link.
- Write a link with <a href="..."> and </a>.
- Say which part of a link people see and which part says where it goes.
- Put an attribute inside an opening tag as name="value".