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’s also generally known as an anchor tag or anchor ingredient.
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 is known as an “inside hyperlink.”
But when the <a> tag creates a hyperlink from one useful resource to a different on a completely different web site, that hyperlink is 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 wherever they need 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 modifying instruments hyperlinks readers to the search engine optimisation Writing Assistant instrument:
Whereas the header menu of Bokksu’s on-line retailer has HTML anchor parts linking to the model’s varied product and reward 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 “soar” to completely different article sections.
The site owners of the above pages added their HTML anchor tags to textual content.
However you possibly can add HTML hyperlink code to photographs, too.
For instance, clicking the picture of a black widow on the Nationwide Geographic Youngsters 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 evaluation frequent <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 top of the <a> tag
<a> Tag Attributes
Listed here are some frequent 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 necessary. In any other case, the hyperlink won’t work.
As a result of it doesn’t include data 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 serps to not move “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 net analytics providers like Google Analytics (GA4) will categorize these guests as “direct visitors” of their experiences. As an alternative of categorizing these guests as “referral visitors” and naming the present web page as a referral supply. “Noreferrer” additionally brings in regards to 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 might be the “grasp copy” of comparable variations of the identical web page—through the use of the canonical attribute
- Pages which might be language and regional variants of one other—through the use of 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 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.
In addition 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 assets collectively, you assist customers uncover different content material inside it.
In methods like:
- Letting customers browse varied 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 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 along 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 have the ability to navigate to them to view their content material.
Go Hyperlink Juice By means of Inside Hyperlinks
“Hyperlink juice,” or hyperlink fairness, refers to a rise in a web page’s authority within the eyes of serps resulting from 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 seemingly have handed to it.
In consequence, serps could regard that web page as extra authoritative. And rank it larger in search outcomes.
A high-authority web page can even move 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 easy. 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.
How one can Detect HTML <a> Tag Points
A technique 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 deliver you to their supposed locations.
However this technique is unfeasible in case your web site has hundreds of hyperlinks.
So, use Semrush’s Web site Audit instrument to mass-check your <a> tags as a substitute.
Right here’s how:
Launch the instrument, enter your web site area, and click on “Begin Audit.”
A “Web site 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 instrument must also test your area’s subdomains for points.
Use the “Restrict of checked pages” drop-down to decide on the variety of pages the instrument ought to test each time it runs.
Go away the “Crawl supply” drop-down setting as “Web site” to have the instrument audit your total web site.
Go away the “Ship an e mail each time an audit is full.” checked in order for you the instrument to warn you through e mail when it has completed checking your web site.
When you’d like, you possibly can optionally use the tabs numbered two to 6 to configure your audit additional.
Then, click on “Begin Web site Audit.”
The instrument will begin checking your web site for technical points. When it’s completed, click on your area title to view the instrument’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 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 possibly can then repair every damaged hyperlink in methods like:
- Modifying your webpage to interchange the damaged hyperlink with a working one
- Establishing a 301 redirect to direct customers of the damaged hyperlink to a unique—and dealing—hyperlink
- Modifying your webpage to take away the hyperlink solely if you happen to now not want it
Other than figuring out damaged hyperlinks, Web site Audit can test for over 140 different technical points. Together with:
You can too schedule your audits to occur on daily basis or each week. So that you keep on prime of any technical points that pop up.
HTML <a> tags play necessary roles in facilitating person navigation and bettering 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 Web site Audit instrument. Usually test your web site for damaged hyperlinks. And guarantee your <a> tags work as supposed.
