What’s an Anchor Tag?
If you’ve ever clicked on anything on a webpage – literally anything that took you to another destination or location, that was probably done with an anchor tag. Anchor tags, or <a> tags, are the clickable links that take users to alternate destinations either internally within your website or externally to another site.
There are three primary places you can link to, or have as destinations with anchor tags:
- A specific section of your webpage(internal)
- Another page on your website(internal)
- Another webpage (external)
Without Anchor Tags:
With Anchor Tags:
Notice a difference? Under the header, there are two links: “Home” and “About”. These links are created with <a> tags and allow users to navigate either back to the “Home” page, or to an “About” page within your website.
Let’s look at how to code it!
Coding an <a> Tag
Try to find the <a> tags in the image below:
If you’re stuck, they look like this:
These two lines of code will create and display links to both your “Home” page and your “About” page(if you’ve built one already).
Note: We are going to use temporary placeholders as destinations for your <a> tags. (Which means all links just bring users back to the current “Home” Page). So do not fret if you have not built your “About” page yet!
If we want to give an id to the <a> tag, you can do so in the opening tag! Recall giving an element an ‘id’ helps to style it in CSS!
You’ll see now that the two anchor tags have an id of “HomeBtn” and “AboutBtn”.
Now let’s break down the anchor tag, or the <a> tag.
Components of an Anchor Tag
Opening tag <a>: Your opening anchor tag, or <a> tag indicates to your editor that you will be “anchoring” or linking the current page to a destination– or URL (either internally or externally)
href = “” : This stands for hypertext reference, a fancy way of saying your URL, or the destination your <a> tag will take the user
URL: This is the hyperlink destination for your <a> tag. It can either be external(to another website) or internal(to another location within your website)
#: I use this as a placeholder when I do not have the exact URL for my <a> tag. Using “#” in place of your URL causes the <a> tag to take the user back to the top of the page. It’s a great way to ensure your anchor tag works without having to have a destination!
Title: This is what your users will see when they visit your webpage. It is the title of what they will click!
We’ve given our <a> tags the names “Home” and “About”, so users will see “Home” and “About” as clickable links!
Id or Class: Giving your <a> tag an id or class allows you to easily identify and style your tags in CSS! The id’s I’ve given to my two <a> tags are “HomeBtn” and “AboutBtn”. When I head over to my stylesheet, I can easily style “HomeBtn” and “AboutBtn”!
Closing tag </a>: This indicates to your editor that that’s the end of your <a> tag.
Feel free to play around with adding more <a> tags! You can add more of them if you have multiple buttons you want in your NavBar. You can also play around with the title of each of the buttons!
What types of places are you sending your users with Anchor tags?!
Don’t forget to Subscribe to Tech. Talk. Code. for more Easy to Use Web Dev tutorials!
And for you Spongebob lovers… ANCHOR ARMS!