HTML Tags – Part 3: The HTML Anchor Tag

Now that you’ve learned how to add content to your site and structure them properly, it’s time to get into the functionality of a website. We click on links everyday as we surf the web and without it, there would be no way to navigate to our favorite websites. Learning how the Anchor Tag works will help you determine which pages you want your audience to view.

HTML Tags - The HTML Anchor Tag

HTML Tags – Part 3: What is The HTML Anchor Tag

The HTML Anchor Tag, <a>, is one of the most important tags used for the web. It allows you to jump from one page to another just by clicking on a word, a set of words, or even an image. How can you tell when you’re clicking on a link? When you move your mouse cursor across the screen, it will turn from being an arrow to a hand with a finger extended. No, not the middle finger, though I’m sure someone has created one for their system.

Another method for knowing whether you are clicking on a link is its color. Usually the links on a web page will have a different color than the rest of the copy on the screen. That color is normally blue but depending on the color scheme a site has, it could be any color.

HTML Tags – Part 3: Required HTML Anchor Tag Attribute

All HTML tags have the option of using an attribute, a word/value pair that helps expand the use of an HTML tag within a web document. To better understand how an attribute works, lets use a car as an example. When you think of a car you’re focusing on whether it can get you from point A to point B, how good it looks, and the price. There are many other components that we don’t necessarily focus on because we know it should be there, such as:

  • four wheels
  • steering wheel
  • speedometer

These are some of the features that a car has, yet without them it wouldn’t work properly or at all. Attributes work the same way in some HTML tags.

There is one attribute that is required when using the <a> tag and it’s called the href attribute. HREF stands for Hypertext REFerence and it tells you what website to go to when you click on the link. The <a> tag will not function properly without this attribute so you must use it every time you want your audience to go to a different part of your website or anywhere else on the web.

How does the href attribute work? Below is a screenshot of it in the program Adobe Dreamweaver. Because of its responsiveness, when I create an HTML anchor tag, Adobe Dreamweaver knows to immediately make the words between the opening and closing tags blue.

HTML Anchor Tag Code and Preview Example

HTML Tags – Part 3: Other HTML Anchor Tag Attributes

There are two more attributes that are commonly used with the anchor tag. The name attribute you may have experienced before. Have you ever reached a certain section of a page and saw a button that said “back to top”? If you have and clicked on it, you were taken back to the beginning of that article or page without having to use the scroll bar on the right side of the browser. The name attribute allows you to name a particular section of your page and then use another <a> tag to reference it.

Below is a screenshot of this attribute in action. The thing to remember is to use words that make sense when using this attribute.

HTML Anchor Tag - Name Attribute Example

The second attribute can be used with any HTML tag but are generally used with the <a> tag and the image tag, <img />. We’ll get into images in the next article entitled HTML Tags Part 4 – The HTML Image Tag. The title attribute provides additional information about the link you’re about to click. Before clicking on a link, I will sometimes hover my cursor over it to see what might pop up. I like to know where I’m going before clicking on any random link. If you happen to do this and see a description, the title attribute is what causes this to happen.

You’re not necessarily required to do this but there are people who are visually impaired and use screen readers to read the content on a website and it helps you rank higher through search engines. What you’ll do is within the anchor tag, type the word title, place an equal sign (=) after it, and, in double quotes, type the message you want people to read. You can see how it looks in the screenshot I have below using Adobe Dreamweaver.

HTML Anchor Tag - Title Attribute

Using this attribute will give your readers a preview of where you’re going to take them once they click on it, and makes Google happy because you’re being descriptive with your content, which makes your page relevant.

Conclusion

The HTML anchor tag is a very powerful, yet simple tag to use in your webpage development. Once you get familiar with how it works, you’ll be able to connect all of your pages together within no time.

Tell Me What You Think

What questions do you have concerning the HTML anchor tag? Post your questions by going to my Facebook Fan Page and I’ll make sure to answer them for you.