Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
An anchor tag is how we create clickable links. Links are what we use to string related web pages together to create whole websites.
Anything wrapped in <a> </a> is clickable, even images! Links can point to other pages, to other places on your website, or to links anywhere on the web.
Links make the Internet the engaging and
interactive place that it is.
0:00
They make it possible to share articles,
and recipes, and
0:04
cat videos with our loved ones.
0:06
Links are what we use to string
together related web pages to create
0:08
whole websites.
0:12
The Internet without links would be a
lonely sea of single, isolated web pages.
0:13
An anchor tag is how we
create clickable links.
0:19
Let's turn one of the new paragraphs
we just made in the last video
0:21
into a clickable link.
0:24
So, I'm going to type a before
the text and copy and paste this
0:26
closing tag on the other side, so that the
text is enclosed within the anchor tag.
0:31
Let's refresh and take a look.
0:37
Whatever content is between our
anchor tags is going to be clickable.
0:39
It looks like a clickable link now but if
you click on it, nothing actually happens.
0:42
It's just a place holder hyperlink.
0:47
This is where the href attribute comes in.
0:49
Href stands for Hypertext Reference.
0:53
That's how we tell the browser
where we want the browser to go,
0:55
when the user clicks a link.
0:58
We can link to somewhere else on the page
or to a different page entirely.
1:00
As an example of how to link to
a different place on the page,
1:04
lets go back to index.html.
1:08
And on this a,
we'll type an href attribute.
1:11
And in the quotes, we can put #top,
save, refresh that.
1:15
And now if we click on this link,
it takes us to the top of the page.
1:22
Next, I'll show you how to
make an image clickable.
1:27
Let's go back to index.html, and find the
image that we were playing with earlier.
1:31
Let's copy that whole thing, and
1:37
paste it right here next to where it says,
this is a third paragraph.
1:40
We'll save that, refresh.
1:44
And if we look down here,
now we can click on this image.
1:49
And it takes us to the top of the page.
1:53
Let's go down to the footer, and
1:55
see how to use anchor text
to link to an outside page.
1:57
So if we look at these social media
links down here in the footer.
2:02
We can see that they don't
actually lead anywhere.
2:06
In the href, there is a # symbol.
2:08
Which pretty much does
the same thing as #top does.
2:11
Which is it takes you to the top
of the page, if you click on it.
2:15
So let's set this Twitter link so
that it actually goes to Twitter.
2:18
And we'll do that by
deleting this # sign and
2:22
typing the full link to
your Twitter handle.
2:26
Save, refresh and
now the link goes to Twitter.
2:33
Quick tip, if you want users to be able to
see your Twitter post by opening a new tab
2:38
in the browser rather than
navigating away from your website.
2:43
You can add a third attribute to
the anchor element called target blank.
2:46
So here,
we can type a new attribute called target.
2:52
And in the quotes, _blank, save.
2:56
Now we can go back to
the profile project and refresh.
3:03
And when we click on the Twitter link,
3:07
you can see up here that
it opened in a new tab.
3:10
And the profile project is still open.
3:12
We can also set anchor tags to
click through to different pages
3:15
on our own website.
3:18
We'll get into more detail about that
in the last section of this course,
3:19
when we learn how to set up a new page.
3:23
You need to sign up for Treehouse in order to download course files.
Sign up