What Is an <a> Tag in HTML?
An HTML <a> tag is a bit of code for including hyperlinks from one internet useful resource to a different. Additionally it is referred to as an anchor tag or anchor component.
An <a> tag appears like this:
<a href="https://www.semrush.com">Our homepage</a>
Assets that <a> tags can hyperlink to incorporate webpages, e-mail addresses, photos, and movies.
If the <a> tag creates a hyperlink from one useful resource to a different on the identical web site, that hyperlink known as an “inside hyperlink.”
But when the <a> tag creates a hyperlink from one useful resource to a different on a totally different web site, that hyperlink known as an “exterior hyperlink.”
Hold studying to study extra about HTML <a> tags—together with their advantages. And how one can detect any technical points with yours.
Web sites use anchor tags in HTML anyplace they need to hyperlink to a different useful resource. HTML stands for “Hypertext Markup Language.” It’s one of many languages internet builders use to create webpages.
For instance, this Semrush article on content material enhancing instruments hyperlinks readers to the search engine optimisation Writing Assistant software:
Whereas the header menu of Bokksu’s on-line retailer has HTML anchor components linking to the model’s numerous product and present card choices:
And take a look at the desk of contents for this text.
It comprises anchor tags that assist readers who click on them “soar” to totally different article sections.
The site owners of the above pages added their HTML anchor tags to textual content.
However you’ll be able to add HTML hyperlink code to pictures, too.
For instance, clicking the picture of a black widow on the Nationwide Geographic Children invertebrates web page leads customers to the group’s info web page on black widows:
Parts of an HTML <a> Tag
An <a> tag has 4 parts:
- The opening tag: Which signifies the beginning of the <a> tag
- Tag attribute and attribute values: Which state the web page the tag hyperlinks to. And have an effect on how the tag behaves when customers click on it. We evaluate widespread <a> attributes beneath.
- Anchor textual content: The textual content customers click on to go to the hyperlink
- The closing tag: Which is “</a>” and signifies the tip of the <a> tag
<a> Tag Attributes
Listed below are some widespread HTML <a> attributes:
Href
“Href” stands for “hypertext reference.” It states the useful resource the <a> tag ought to hyperlink to.
So, on this “a href hyperlink” instance:
<a href="https://www.semrush.com">Our homepage</a>
The “href” attribute has a worth of “https://www.semrush.com.” Inflicting customers who click on the hyperlink to go to that web page.
In contrast to different <a> tag attributes, utilizing the “href” attribute in your <a> tag is necessary. In any other case, the hyperlink won’t work.
As a result of it doesn’t include info on its supposed vacation spot.
Rel
“Rel” is brief for “relationship.” It states the connection between the present useful resource and the one it hyperlinks to.
Right here’s an instance of an HTML <a> tag with a “rel” attribute:
<a href="https://www.amazon.com/headphones" rel="sponsored" >Store headphones on Amazon (affiliate hyperlink)</a>
The worth of this “rel” attribute is “sponsored.” Indicating that the web page it hyperlinks to (i.e., “https://www.amazon.com/headphones”) is a paid commercial or sponsored content material.
Different “rel” attribute values embody:
- Nofollow: Tells search engines like google to not go “hyperlink juice” from the present web page to the one within the <a> tag. (Extra on the passing of “hyperlink juice” later.)
- Noopener: A safety measure that stops the linked useful resource from taking management of the present web page when customers click on a hyperlink that opens in a brand new tab or window. So the linked useful resource can’t redirect customers to a phishing rip-off or different unsafe pages.
- Noreferrer: Prohibits the linked useful resource from figuring out the present web page as a supply of holiday makers for it. Such that internet analytics companies like Google Analytics (GA4) will categorize these guests as “direct site visitors” of their studies. As an alternative of categorizing these guests as “referral site visitors” and naming the present web page as a referral supply. “Noreferrer” additionally brings concerning the results of the “noopener” attribute even when the <a> tag doesn’t have it.
A single “rel” attribute can include a number of values.
Check out this hyperlink on the SparkToro weblog, for instance:
The hyperlink’s underlying <a> tag has a “rel” attribute of “noreferrer noopener.”
Goal
The “goal” attribute tells the person’s browser the place to open the linked useful resource.
One instance of an HTML <a> tag with a “goal” attribute is:
<a href="https://www.semrush.com" goal="_blank">Open our homepage in a new tab</a>
If the <a> tag doesn’t include a “goal” attribute worth, it is going to default to a “goal” attribute worth of “_self.” Which opens the linked useful resource in the identical body.
A preferred “goal” attribute is “_blank.” Which opens the linked useful resource in a brand new browser tab or window.
The “a href” tag in HTML is to not be confused with the hyperlink tag.
That is the construction of an HTML <hyperlink> tag:
<hyperlink [link tag attributes go here] />
Net builders use hyperlink tags in a web page’s <head> part to state a useful resource’s “hyperlink,” or relationship with one other useful resource. Like:
- Pages which can be the “grasp copy” of comparable variations of the identical web page—by utilizing the canonical attribute
- Pages which can be language and regional variants of one other—by utilizing the hreflang attribute
Hyperlink tags don’t have closing </hyperlink> tags; they’re self-closing. That means they’re full tags on their very own and don’t should be closed.
In distinction, internet builders use HTML <a> tags in a web page’s <physique> part so as to add “hyperlinks”—or “hyperlinks” for brief—from one useful resource to a different.
Additionally they want to shut every <a> tag with an </a> one.
This desk summarizes the variations between <a> and hyperlink tags:
Additional studying: HTML Tags Record: HTML Cheat Sheet
Anchor tags can assist you:
Enhance the Person Navigation Expertise
By utilizing anchor tags to hyperlink your web site’s sources collectively, you assist customers uncover different content material inside it.
In methods like:
- Letting customers browse numerous sections of your web site. Within the case of inside hyperlinks in navigation menus.
- Enabling customers to conveniently skip to particular elements of the web page. Within the case of anchor hyperlinks.
- Directing customers to detailed guides to subjects you’ve briefly talked about on the present web page. Which is particularly useful for constructing content material pillars.
- Recommending different pages for customers to take a look at after they’ve completed studying the present one. To encourage customers to proceed interacting together with your web site for longer.
With out you including hyperlinks to your pages in these methods, customers might not be conscious of them. A lot much less be capable to navigate to them to view their content material.
Cross Hyperlink Juice By Inside Hyperlinks
“Hyperlink juice,” or hyperlink fairness, refers to a rise in a web page’s authority within the eyes of search engines like google as a result of one other web page linking to it.
This enhance happens as a result of a hyperlink to a sure web page can symbolize a vote of confidence for that web page’s usefulness. The extra hyperlinks from authoritative web sites a web page receives, the extra hyperlink juice these web sites will doubtless have handed to it.
Because of this, search engines like google might regard that web page as extra authoritative. And rank it increased in search outcomes.
A high-authority web page also can go hyperlink juice to different pages on the identical web site by linking to them.
So take this simple alternative to spice up your pages’ authoritativeness by including inside hyperlinks out of your high-authority pages to them.
Additional studying: Inside Hyperlinks: Final Information + Methods
Trendy web site platforms like WordPress make creating HTML <a> tags for hyperlinks simple. With no coding wanted.
The precise steps might fluctuate. However they usually contain typing your anchor textual content into the web site platform’s content material editor.
Spotlight that textual content.
Click on the editor’s “Hyperlink” icon, then sort (or copy and paste) the URL the textual content ought to hyperlink to.
Press “Enter” or “Return” in your keyboard to verify.
And that’s it! You’ve created your hyperlink—with out typing its underlying HTML <a> tags your self.
How you can Detect HTML <a> Tag Points
A method of checking whether or not your <a> tags work is to manually click on their related hyperlinks in your web page. And see if the hyperlinks convey you to their supposed locations.
However this technique is unfeasible in case your web site has hundreds of hyperlinks.
So, use Semrush’s Website Audit software to mass-check your <a> tags as an alternative.
Right here’s how:
Launch the software, enter your web site area, and click on “Begin Audit.”
A “Website Audit Settings” window will seem.
Beneath the window’s “1. Area and restrict of pages” tab, use the “Crawl scope” setting to pick whether or not the software also needs to test your area’s subdomains for points.
Use the “Restrict of checked pages” drop-down to decide on the variety of pages the software ought to test each time it runs.
Go away the “Crawl supply” drop-down setting as “Web site” to have the software audit your total web site.
Go away the “Ship an e-mail each time an audit is full.” checked if you’d like the software to provide you with a warning by way of e-mail when it has completed checking your web site.
In the event you’d like, you’ll be able to optionally use the tabs numbered two to 6 to configure your audit additional.
Then, click on “Begin Website Audit.”
The software will begin checking your web site for technical points. When it’s executed, click on your area identify to view the software’s report.
Click on the report’s “Points” tab.
If a few of your web site’s inside hyperlinks have defective <a> tags, you’ll see a “# inside hyperlinks are damaged” message within the “Errors” part:
Alternatively, if a few of your web site’s exterior hyperlinks have defective <a> tags, you’ll see a “# exterior hyperlinks are damaged” message within the “Warnings” part as an alternative.
Click on both message to view its checklist of damaged hyperlinks.
You’ll see a report of the assorted damaged URLs. Plus the URLs of the pages on which they are often discovered.
You may then repair every damaged hyperlink in methods like:
- Enhancing your webpage to exchange the damaged hyperlink with a working one
- Organising a 301 redirect to direct customers of the damaged hyperlink to a unique—and dealing—hyperlink
- Enhancing your webpage to take away the hyperlink totally if you happen to now not want it
Aside from figuring out damaged hyperlinks, Website Audit can test for over 140 different technical points. Together with:
You can even schedule your audits to occur day-after-day or each week. So that you keep on prime of any technical points that pop up.
HTML <a> tags play essential roles in facilitating person navigation and enhancing search engine rankings.
They might look sophisticated. However creating them is simple.
And managing them is even simpler.
Merely begin a free trial of Semrush to make use of the Website Audit software. Recurrently test your web site for damaged hyperlinks. And guarantee your <a> tags work as supposed.