A Simple Guide for Beginners

What Is an <a> Tag in HTML?

An HTML <a> tag is a chunk of code for including hyperlinks from one net useful resource to a different. Additionally it is often called 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 similar 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 totally different web site, that hyperlink is known as an “exterior hyperlink.”

Hold studying to be taught 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 editing tools hyperlinks readers to the SEO Writing Assistant device:

Whereas the header menu of Bokksu’s on-line retailer has HTML anchor elements linking to the model’s numerous product and reward card choices:

And take a look at the desk of contents for this text.

It accommodates anchor tags that assist readers who click on them “leap” to totally different article sections.

The site owners of the above pages added their HTML anchor tags to textual content.

However you possibly can add HTML link 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:

Elements of an HTML <a> Tag

An <a> tag has 4 parts:

1. The opening tag: Which signifies the beginning of the <a> tag
2. 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 under.
3. Anchor textual content: The textual content customers click on to go to the hyperlink
4. The closing tag: Which is “</a>” and signifies the tip of the <a> tag

<a> Tag Attributes

Listed below 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 link” 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 obligatory. 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 embrace:

• Nofollow: Tells search engines like google to not cross “hyperlink juice” from the present web page to the one within the <a> tag. (More on the passing of “link 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 tourists for it. Such that net analytics companies like Google Analytics (GA4) will categorize these guests as “direct site visitors” of their experiences. As a substitute of categorizing these guests as “referral site 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 consumer’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’ll default to a “goal” attribute worth of “_self.” Which opens the linked useful resource in the identical body.

A well-liked “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 <link> tag:

<hyperlink [link tag attributes go here] />

Internet 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 must 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 List: HTML Cheat Sheet

Anchor tags might help 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 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 matters you’ve briefly talked about on the present web page. Which is very useful for building content 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 is probably not conscious of them. A lot much less be capable to navigate to them to view their content material.

Move 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 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 doubtless have handed to it.

Consequently, search engines like google could regard that web page as extra authoritative. And rank it greater in search outcomes.

A high-authority web page also can cross 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: Internal Links: Ultimate Guide + Strategies

Fashionable web site platforms like WordPress make creating HTML <a> tags for hyperlinks easy. With no coding wanted.

The precise steps could fluctuate. However they sometimes 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 substantiate.

And that’s it! You’ve created your hyperlink—with out typing its underlying HTML <a> tags your self.

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 convey you to their supposed locations.

However this technique is unfeasible in case your web site has 1000’s of hyperlinks.

So, use Semrush’s Site Audit device to mass-check your <a> tags as an alternative.

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 must also 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 e mail each time an audit is full.” checked if you need the device to warn you by way of 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 Website Audit.”

The device will begin checking your web site for technical points. When it’s performed, click on your area title 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 an alternative.

Click on both message to view its checklist of broken links.

You’ll see a report of the varied damaged URLs. Plus the URLs of the pages on which they are often discovered.

You’ll be able to then repair every damaged hyperlink in methods like:

• Modifying your webpage to exchange the damaged hyperlink with a working one
• Establishing a 301 redirect to direct customers of the damaged hyperlink to a distinct—and dealing—hyperlink
• Modifying your webpage to take away the hyperlink fully 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 may also schedule your audits to occur day by day or each week. So that you keep on high of any technical points that pop up.

HTML <a> tags play vital roles in facilitating consumer navigation and enhancing search engine rankings.

They could look difficult. However creating them is straightforward.

And managing them is even simpler.

Merely begin a free trial of Semrush to make use of the Site Audit device. Often verify your web site for damaged hyperlinks. And guarantee your <a> tags work as supposed.