What you will be learning
- How to create a link and set its behaviour using an attribute
Attributes: modifying an HTML tag
Ok, so we now know how to create an HTML element. Let's see how we can modify them. And to do that, we are going to use something called attributes.
For this, we're going to use another HTML tag: an anchor link. It starts with <a> and it ends ends with </a>
Exercise
Instructions
After the paragraph, add a
<a>tag, some text in it, and close it.
👀 Hint
Try this piece of code:
<a>Click me, I'm a link</a>
If all goes well, you will notice that the text you added inside is now looking like a link: it has a different style and it is underlined. But it doesn't click anywhere, because we didn't tell it where to go.
That's where an attribute will help us.
Let's modify the tag.
We are going to add an attribute called href and give it a value that will be the destination of the link.
Add the
hrefattribute inside the opening tag so that the link goes to Google.
👀 Hint
Try this piece of code:
<a href="https://www.google.com">Click me I'm a link that goes to Google</a>
By adding the attribute to the element, we changed its behaviour. It didn't react to a click; now it does and it knows where to take the user.
Note: You will likely get a message saying the page cannot be opened in the window. It is expected and normal, we cannot open external pages inside our tutorial preview.