Anchor Tags3: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:
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.
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!
You need to sign up for Treehouse in order to download course files.Sign up