Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Anchor Tags

3:25 with Treasure Porth

An anchor tag is how we create clickable links. Links are what we use to string related web pages together to create whole websites.

The Anchor element is an especially useful and powerful tool for web developers, and is what helps create the interconnected World Wide Web that we use today. Anything wrapped in <a> </a> is clickable, even images or sections of text within another element! Links can point to other pages, to other places on your website, or to new locations elsewhere on the web.

In this video, you were able to experiment with a few different features of the <a> tag, or what we commonly refer to as attributes.

Almost all elements in HTML have their own attributes. You can think of these as special settings or features for an element that can be customized, adjusted, or tailored for a specific purpose. As web developers, we often refer back to the documentation to see all the different types of attributes an element has, and you're not expected to remember all of these!

When adding an <a> tag to the twitter button at the bottom of the screen, you were able to customize two of these attributes:

href

The hypertext reference or, put more simply, the URL that the hyperlink points to. This is used to specify a target website, location, or element on a page that can be accessed when the link is clicked. We can implement this in a variety of ways:

  • <p><a href="#top"> Jump to the top of the page </a></p>
  • <p> Go to the <a href="https://teamtreehouse.com/"> Team Treehouse </a> website </p>

There are a range of different links you can create, including to email addresses, phone numbers, or other pages on your own website. We'll return to some of these later in the course.

target

We were also able to experiment with the target attribute. This allows us to determine where we will display the linked URL. By default, <a> tags will open links within the current page, and will navigate away from the current website. However, if we set the target to "_blank" then we can open the link in another tab or window.

<p> Go to the <a href="https://teamtreehouse.com/" target="_blank"> Team Treehouse </a> website </p>

Note that in all of these examples above, we place the instruction within " " quotation marks. If your attributes aren't acting as you intended, then you may want to check that you've entered them correctly!

Further Reading:

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up