Lesson 7
Anchors and Links
What is an anchor tag?
Ahoy! One of the coolest things about the internet is how pages can link to each other. The way we create links from one page to another is with the anchor tag.
<a>
The anchor tag works kind of like the anchor on a pirate ship. You drop it where you want it to go, then your ship stays linked to that spot with a chain. With an anchor tag, you tell it the destination you want the link to go to, and it will always take you there.
What attributes does a link need?
An anchor tag can have multiple attributes. The only required attribute is the href, which is short for hyper-reference. The value of the href attribute is the link to where the anchor needs to go.
Another attribute you can use is the target attribute. You can use this to tell your browser if you want a link to open in a new tab. Otherwise it will always open in the same tab.
Are there different types of links?
There are two types of links, relative and absolute. Absolute links use the full web address, but relative links only have part of the address.
It’s like if you wanted to give two cards. If you’re giving a card to your sister who lives in the same house, you don’t need to write the full address, just their name. If you’re giving a card to your friend in another country, you need the entire address. That way it doesn’t get lost in the mail, instead it goes exactly where you need it to go.
Relative URL example
<a href=”../link/”>
Absolute URL example
<a href=”https://web.com/”>
Are you ready to learn?
I need to find a super secret pirate treasure, and I know it’s hiding somewhere on a page called treasure. Below is a treasure map, and I need you to put a link to that webpage on the map.
1. Using the <a> tag in the code, add a relative URL to the page treasure
2. Make it open in a new tab
3. Test it out to see if it works by clicking on the treasure map in the output
