What Is an <a> Tag in HTML?
An HTML <a> tag is a piece of code for adding links from one web resource to another. It is also known as an anchor tag or anchor element.
An <a> tag looks like this:
<a href="https://www.semrush.com">Our homepage</a>
Resources that <a> tags can link to include webpages, email addresses, images, and videos.
If the <a> tag creates a link from one resource to another on the same website, that link is called an “internal link.”
But if the <a> tag creates a link from one resource to another on a different website, that link is called an “external link.”
Keep reading to learn more about HTML <a> tags—including their benefits. And how you can detect any technical issues with yours.
Websites use anchor tags in HTML anywhere they want to link to another resource. HTML stands for “Hypertext Markup Language.” It’s one of the languages web developers use to create webpages.
For example, this Semrush article on content editing tools links readers to the SEO Writing Assistant tool:
While the header menu of Bokksu’s online store has HTML anchor elements linking to the brand’s various product and gift card offerings:
And check out the table of contents for this article.
It contains anchor tags that help readers who click them “jump” to different article sections.
The webmasters of the above pages added their HTML anchor tags to text.
But you can add HTML link code to images, too.
For example, clicking the image of a black widow on the National Geographic Kids invertebrates page leads users to the organization’s information page on black widows:
Components of an HTML <a> Tag
An <a> tag has four components:
- The opening tag: Which indicates the start of the <a> tag
- Tag attribute and attribute values: Which state the page the tag links to. And affect how the tag behaves when users click it. We review common <a> attributes below.
- Anchor text: The text users click to visit the link
- The closing tag: Which is “</a>” and indicates the end of the <a> tag
<a> Tag Attributes
Here are some common HTML <a> attributes:
Href
“Href” stands for “hypertext reference.” It states the resource the <a> tag should link to.
So, in this “a href link” example:
<a href="https://www.semrush.com">Our homepage</a>
The “href” attribute has a value of “https://www.semrush.com.” Causing users who click the link to visit that page.
Unlike other <a> tag attributes, using the “href” attribute in your <a> tag is mandatory. Otherwise, the link will not work.
Because it doesn’t contain information on its intended destination.
Rel
“Rel” is short for “relationship.” It states the relationship between the current resource and the one it links to.
Here’s an example of an HTML <a> tag with a “rel” attribute:
<a href="https://www.amazon.com/headphones" rel="sponsored" >Shop headphones on Amazon (affiliate link)</a>
The value of this “rel” attribute is “sponsored.” Indicating that the page it links to (i.e., “https://www.amazon.com/headphones”) is a paid advertisement or sponsored content.
Other “rel” attribute values include:
- Nofollow: Tells search engines not to pass “link juice” from the current page to the one in the <a> tag. (More on the passing of “link juice” later.)
- Noopener: A security measure that prevents the linked resource from taking control of the current page when users click a link that opens in a new tab or window. So the linked resource can’t redirect users to a phishing scam or other unsafe pages.
- Noreferrer: Prohibits the linked resource from identifying the current page as a source of visitors for it. Such that web analytics services like Google Analytics (GA4) will categorize these visitors as “direct traffic” in their reports. Instead of categorizing these visitors as “referral traffic” and naming the current page as a referral source. “Noreferrer” also brings about the effects of the “noopener” attribute even if the <a> tag doesn’t have it.
A single “rel” attribute can contain multiple values.
Take a look at this link on the SparkToro blog, for example:
The link’s underlying <a> tag has a “rel” attribute of “noreferrer noopener.”
Target
The “target” attribute tells the user’s browser where to open the linked resource.
One example of an HTML <a> tag with a “target” attribute is:
<a href="https://www.semrush.com" target="_blank">Open our homepage in a new tab</a>
If the <a> tag doesn’t contain a “target” attribute value, it will default to a “target” attribute value of “_self.” Which opens the linked resource in the same frame.
A popular “target” attribute is “_blank.” Which opens the linked resource in a new browser tab or window.
The “a href” tag in HTML is not to be confused with the link tag.
This is the structure of an HTML <link> tag:
<link [link tag attributes go here] />
Web developers use link tags in a page’s <head> section to state a resource’s “link,” or relationship with another resource. Like:
- Pages that are the “master copy” of similar versions of the same page—by using the canonical attribute
- Pages that are language and regional variants of another—by using the hreflang attribute
Link tags don’t have closing </link> tags; they are self-closing. Meaning they are complete tags on their own and don’t need to be closed.
In contrast, web developers use HTML <a> tags in a page’s <body> section to add “hyperlinks”—or “links” for short—from one resource to another.
They also need to close each <a> tag with an </a> one.
This table summarizes the differences between <a> and link tags:
Further reading: HTML Tags List: HTML Cheat Sheet
Anchor tags can help you:
Improve the User Navigation Experience
By using anchor tags to link your website’s resources together, you help users discover other content within it.
In ways like:
- Letting users browse various sections of your website. In the case of internal links in navigation menus.
- Enabling users to conveniently skip to specific parts of the page. In the case of anchor links.
- Directing users to detailed guides to topics you’ve briefly mentioned on the current page. Which is especially helpful for building content pillars.
- Recommending other pages for users to check out after they’ve finished reading the current one. To encourage users to continue interacting with your website for longer.
Without you adding links to your pages in these ways, users may not be aware of them. Much less be able to navigate to them to view their content.
Pass Link Juice Through Internal Links
“Link juice,” or link equity, refers to an increase in a page’s authority in the eyes of search engines due to another page linking to it.
This increase occurs because a link to a certain page can represent a vote of confidence for that page’s usefulness. The more links from authoritative websites a page receives, the more link juice these websites will likely have passed to it.
As a result, search engines may regard that page as more authoritative. And rank it higher in search results.
A high-authority page can also pass link juice to other pages on the same website by linking to them.
So take this easy opportunity to boost your pages’ authoritativeness by adding internal links from your high-authority pages to them.
Further reading: Internal Links: Ultimate Guide + Strategies
Modern website platforms like WordPress make creating HTML <a> tags for links straightforward. With no coding needed.
The exact steps may vary. But they typically involve typing your anchor text into the website platform’s content editor.
Highlight that text.
Click the editor’s “Link” icon, then type (or copy and paste) the URL the text should link to.
Press “Enter” or “Return” on your keyboard to confirm.
And that’s it! You’ve created your link—without typing its underlying HTML <a> tags yourself.
How to Detect HTML <a> Tag Issues
One way of checking whether your <a> tags work is to manually click their associated links on your page. And see if the links bring you to their intended destinations.
But this method is unfeasible if your website has thousands of links.
So, use Semrush’s Site Audit tool to mass-check your <a> tags instead.
Here’s how:
Launch the tool, enter your website domain, and click “Start Audit.”
A “Site Audit Settings” window will appear.
Under the window’s “1. Domain and limit of pages” tab, use the “Crawl scope” setting to select whether the tool should also check your domain’s subdomains for issues.
Use the “Limit of checked pages” drop-down to choose the number of pages the tool should check every time it runs.
Leave the “Crawl source” drop-down setting as “Website” to have the tool audit your entire website.
Leave the “Send an email every time an audit is complete.” checked if you want the tool to alert you via email when it has finished checking your website.
If you’d like, you can optionally use the tabs numbered two to six to configure your audit further.
Then, click “Start Site Audit.”
The tool will start checking your website for technical issues. When it’s done, click your domain name to view the tool’s report.
Click the report’s “Issues” tab.
If some of your website’s internal links have faulty <a> tags, you’ll see a “# internal links are broken” message in the “Errors” section:
Alternatively, if some of your website’s external links have faulty <a> tags, you’ll see a “# external links are broken” message in the “Warnings” section instead.
Click either message to view its list of broken links.
You’ll see a report of the various broken URLs. Plus the URLs of the pages on which they can be found.
You can then fix each broken link in ways like:
- Editing your webpage to replace the broken link with a working one
- Setting up a 301 redirect to direct users of the broken link to a different—and working—link
- Editing your webpage to remove the link entirely if you no longer need it
Apart from identifying broken links, Site Audit can check for over 140 other technical issues. Including:
You can also schedule your audits to happen every day or every week. So you stay on top of any technical issues that pop up.
HTML <a> tags play important roles in facilitating user navigation and improving search engine rankings.
They may look complicated. But creating them is easy.
And managing them is even easier.
Simply start a free trial of Semrush to use the Site Audit tool. Regularly check your website for broken links. And ensure your <a> tags work as intended.
Source link : Semrush.com
