What Is an <a> Tag in HTML?
An HTML <a> tag is a bit of code for including hyperlinks from one net useful resource to a different. It is usually often called an anchor tag or anchor ingredient.
An <a> tag appears to be like like this:
<a href="https://www.semrush.com">Our homepage</a>
Assets that <a> tags can hyperlink to incorporate webpages, electronic mail addresses, pictures, 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.”
Maintain 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 wish to hyperlink to a different useful resource. HTML stands for “Hypertext Markup Language.” It’s one of many languages net builders use to create webpages.
For instance, this Semrush article on content material enhancing instruments hyperlinks readers to the web optimization Writing Assistant device:
Whereas the header menu of Bokksu’s on-line retailer has HTML anchor parts linking to the model’s numerous product and present card choices:
And take a look at the desk of contents for this text.
It incorporates anchor tags that assist readers who click on them “bounce” to totally different article sections.
The site owners of the above pages added their HTML anchor tags to textual content.
However you may 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 data 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 assessment widespread <a> attributes under.
- 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.
Not like different <a> tag attributes, utilizing the “href” attribute in your <a> tag is obligatory. In any other case, the hyperlink is not going to work.
As a result of it doesn’t comprise data on its meant 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 embrace:
- Nofollow: Tells search engines like google and yahoo 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 forestalls 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 net analytics companies like Google Analytics (GA4) will categorize these guests as “direct visitors” of their experiences. As a substitute of categorizing these guests as “referral 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 comprise 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 comprise a “goal” attribute worth, it should 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 might be the “grasp copy” of comparable variations of the identical web page—by utilizing the canonical attribute
- Pages which might 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. Which means they’re full tags on their very own and don’t have to be closed.
In distinction, net 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 Listing: HTML Cheat Sheet
Anchor tags may also help you:
Enhance the Consumer 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 components of the web page. Within the case of anchor hyperlinks.
- Directing customers to detailed guides to matters 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 is probably not conscious of them. A lot much less have the ability to navigate to them to view their content material.
Cross Hyperlink Juice By way of 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 and yahoo on account 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 probably have handed to it.
In consequence, search engines like google and yahoo could regard that web page as extra authoritative. And rank it larger in search outcomes.
A high-authority web page can even go hyperlink juice to different pages on the identical web site by linking to them.
So take this straightforward 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 could differ. 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 kind (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.
Easy methods to 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 carry you to their meant locations.
However this technique is unfeasible in case your web site has 1000’s of hyperlinks.
So, use Semrush’s Website Audit device to mass-check your <a> tags as a substitute.
Right here’s how:
Launch the device, enter your web site area, and click on “Begin Audit.”
A “Website Audit Settings” window will seem.
Below the window’s “1. Area and restrict of pages” tab, use the “Crawl scope” setting to pick whether or not the device also needs to verify your area’s subdomains for points.
Use the “Restrict of checked pages” drop-down to decide on the variety of pages the device ought to verify each time it runs.
Go away the “Crawl supply” drop-down setting as “Web site” to have the device audit your complete web site.
Go away the “Ship an electronic mail each time an audit is full.” checked in order for you the device to provide you with a warning by way of electronic mail when it has completed checking your web site.
In the event you’d like, you may optionally use the tabs numbered two to 6 to configure your audit additional.
Then, click on “Begin Website Audit.”
The device will begin checking your web site for technical points. When it’s carried out, click on your area identify to view the device’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 a substitute.
Click on both message to view its record 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 interchange the damaged hyperlink with a working one
- Establishing a 301 redirect to direct customers of the damaged hyperlink to a special—and dealing—hyperlink
- Enhancing your webpage to take away the hyperlink solely in case you not want it
Aside from figuring out damaged hyperlinks, Website Audit can verify for over 140 different technical points. Together with:
You can too schedule your audits to occur daily or each week. So that you keep on high of any technical points that pop up.
HTML <a> tags play vital roles in facilitating person navigation and enhancing search engine rankings.
They could 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 device. Recurrently verify your web site for damaged hyperlinks. And guarantee your <a> tags work as meant.