2.7 KiB
| title |
|---|
| Links |
Links
General Links
Links are used everywhere on the web, with the purpose of directing users to various content items. They're usually indicated by your cursor turning into a hand icon. Links can be text, images, or other elements contained within your HTML or webpage.
You use an anchor element/tag <a> to define your link, which also needs a destination address(url) that you'll access with the href attribute.
<a href="url">Link Text</a>
The target attribute can be used to tell the browser where to open the link. If you'd like your link to open in a new tab, you can use the target attribute along with the _blank value inside your opening <a> tag.
Here's a snippet that makes the phrase 'The freeCodeCamp Guide' a link:
<a href="https://guide.freecodecamp.org">The freeCodeCamp Guide</a>
The link ends up looking like this: The freeCodeCamp Guide
target Attribute
Opening a page in a new tab
If you'd like your link to open in a new tab, you'll use the target attribute along with the _blank
value inside your opening <a> tag:
<a href="url" target="_blank">Link Text</a>
Another example, using the official freeCodeCamp Guide as the href="" destination, and "The freeCodeCamp Guide" as the link text:
<!-- target="_blank" makes the link open in a new tab. -->
<a href="https://guide.freecodecamp.org" target="_blank">The freeCodeCamp Guide</a>
Other values of the target attribute include:
_selfto open the linked document in the same frame_parentto open it in the parent frame_topopens the linked document in the full body of the window_targetframeopens the linked document in a named targetframe
Links on the Same Page
When you need to guide users to a specific part of your webpage, let's assume the very bottom, you first need to create an html element with an #id that you want direct your user to - in this case the <footer> at the bottom of the webpage. For example:
<!-- Here we create a <footer> with an id of #footer -->
<footer id="footer">Powered by freeCodeCamp</footer>
Now to link to the footer (make the page scroll down to the footer when you click it), we have to assign the hash # symbol to the href attribute like this:
<a href="#footer>More about us<a/>
To demonstrate how this works, here is a link that takes you to the top of this page: Click Here.