HTML Anchor Element: A Simple Guide for Beginners

3 months ago 36
ARTICLE AD BOX

What Is an <a> Tag successful HTML?

An HTML <a> tag is simply a portion of codification for adding links from 1 web assets to another. It is besides known arsenic an anchor tag oregon anchor element.

An <a> tag looks similar this:

<a href="https://www.semrush.com">Our homepage</a>

Resources that <a> tags tin nexus to see webpages, email addresses, images, and videos.

If the <a> tag creates a nexus from 1 assets to different connected the same website, that nexus is called an “internal link.”

But if the <a> tag creates a nexus from 1 assets to different connected a different website, that nexus is called an “external link.”

Keep speechmaking to larn much astir HTML <a> tags—including their benefits. And however you tin observe immoderate method issues with yours.

Websites usage anchor tags successful HTML anyplace they privation to nexus to different resource. HTML stands for “Hypertext Markup Language.” It’s 1 of the languages web developers usage to make webpages.

For example, this Semrush nonfiction connected content editing tools links readers to the SEO Writing Assistant tool:

SEO Writing Assistant instrumentality   nexus  successful  Semrush blog

While the header paper of Bokksu’s online store has HTML anchor elements linking to the brand’s assorted merchandise and acquisition paper offerings:

Bokksu’s online store   header menu

And cheque retired the array of contents for this article.

It contains anchor tags that assistance readers who click them “jump” to antithetic nonfiction sections.

The webmasters of the supra pages added their HTML anchor tags to text.

But you tin adhd HTML nexus code to images, too.

For example, clicking the representation of a achromatic widow connected the National Geographic Kids invertebrates leafage leads users to the organization’s accusation leafage connected achromatic widows:

HTML nexus  codification  added to an representation  of a achromatic  widow connected  the National Geographic Kids

Components of an HTML <a> Tag

An <a> tag has 4 components:

  1. The opening tag: Which indicates the commencement of the <a> tag
  2. Tag property and property values: Which authorities the leafage the tag links to. And impact however the tag behaves erstwhile users click it. We reappraisal communal <a> attributes below.
  3. Anchor text: The substance users click to sojourn the link
  4. The closing tag: Which is “</a>” and indicates the extremity of the <a> tag
HTML <a> tag components

<a> Tag Attributes

Here are immoderate communal HTML <a> attributes:

Href

“Href” stands for “hypertext reference.” It states the assets the <a> tag should nexus to.

So, successful this “a href link” example:

<a href="https://www.semrush.com">Our homepage</a>

The “href” property has a worth of “https://www.semrush.com.” Causing users who click the nexus to sojourn that page.

Unlike different <a> tag attributes, utilizing the “href” property successful your <a> tag is mandatory. Otherwise, the nexus volition not work.

Because it doesn’t incorporate accusation connected its intended destination.

Rel

“Rel” is abbreviated for “relationship.” It states the narration betwixt the existent assets and the 1 it links to.

Here’s an illustration 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 worth of this “rel” property is “sponsored.” Indicating that the leafage it links to (i.e., “https://www.amazon.com/headphones”) is simply a paid advertisement oregon sponsored content.

Other “rel” property values include:

  • Nofollow: Tells hunt engines not to walk “link juice” from the existent leafage to the 1 successful the <a> tag. (More connected the passing of "link juice" later.)
  • Noopener: A information measurement that prevents the linked assets from taking power of the existent leafage erstwhile users click a nexus that opens successful a caller tab oregon window. So the linked assets can’t redirect users to a phishing scam oregon different unsafe pages.
  • Noreferrer: Prohibits the linked assets from identifying the existent leafage arsenic a root of visitors for it. Such that web analytics services similar Google Analytics (GA4) volition categorize these visitors arsenic “direct traffic” successful their reports. Instead of categorizing these visitors arsenic “referral traffic” and naming the existent leafage arsenic a referral source. “Noreferrer” besides brings astir the effects of the “noopener” property adjacent if the <a> tag doesn’t person it.

A azygous “rel” property tin incorporate aggregate values.

Take a look astatine this nexus connected the SparkToro blog, for example:

A nexus  highlighted nexus  connected  the SparkToro blog

The link’s underlying <a> tag has a “rel” property of “noreferrer noopener.”

The supra  nexus  connected  the SparkToro blog has a “rel” property  of “noreferrer noopener"

Target

The “target” property tells the user’s browser wherever to unfastened the linked resource.

One illustration of an HTML <a> tag with a “target” property is:

<a href="https://www.semrush.com" target="_blank">Open our homepage in a new tab</a>

If the <a> tag doesn’t incorporate a “target” property value, it volition default to a “target” property worth of “_self.” Which opens the linked assets successful the aforesaid frame.

A fashionable “target” property is “_blank.” Which opens the linked assets successful a caller browser tab oregon window.

The “a href” tag successful HTML is not to beryllium confused with the nexus tag.

This is the operation of an HTML <link> tag:

<link [link tag attributes go here] />

Web developers usage nexus tags successful a page’s <head> conception to authorities a resource’s “link,” oregon narration with different resource. Like:

  • Pages that are the “master copy” of akin versions of the aforesaid page—by utilizing the canonical attribute
  • Pages that are connection and determination variants of another—by utilizing the hreflang attribute

Link tags don’t person closing </link> tags; they are self-closing. Meaning they are implicit tags connected their ain and don’t request to beryllium closed.

In contrast, web developers usage HTML <a> tags successful a page’s <body> conception to adhd “hyperlinks”—or “links” for short—from 1 assets to another.

They besides request to adjacent each <a> tag with an </a> one.

This array summarizes the differences betwixt <a> and nexus tags:

Key differences betwixt  <a> and nexus  tags

Further readingHTML Tags List: HTML Cheat Sheet

What Are the Benefits of Using Anchor Tags?

Anchor tags tin assistance you:

Improve the User Navigation Experience

By utilizing anchor tags to nexus your website’s resources together, you assistance users observe different contented wrong it.

In ways like:

  • Letting users browse assorted sections of your website. In the lawsuit of interior links successful navigation menus.
  • Enabling users to conveniently skip to circumstantial parts of the page. In the lawsuit of anchor links.
  • Directing users to elaborate guides to topics you’ve concisely mentioned connected the existent page. Which is particularly adjuvant for building contented pillars.
  • Recommending different pages for users to cheque retired aft they’ve finished speechmaking the existent one. To promote users to proceed interacting with your website for longer.

Without you adding links to your pages successful these ways, users whitethorn not beryllium alert of them. Much little beryllium capable to navigate to them to presumption their content.

“Link juice,” oregon nexus equity, refers to an summation successful a page’s authorization successful the eyes of hunt engines owed to different leafage linking to it.

This summation occurs due to the fact that a nexus to a definite leafage tin correspond a ballot of assurance for that page’s usefulness. The much links from authoritative websites a leafage receives, the much nexus foodstuff these websites volition apt person passed to it.

As a result, hunt engines whitethorn respect that leafage arsenic much authoritative. And fertile it higher successful hunt results.

A high-authority leafage tin besides walk nexus foodstuff to different pages connected the aforesaid website by linking to them.

An infographic showing however  "link juice" is passed down

So instrumentality this casual accidental to boost your pages’ authoritativeness by adding interior links from your high-authority pages to them.

Further readingInternal Links: Ultimate Guide + Strategies

Modern website platforms similar WordPress marque creating HTML <a> tags for links straightforward. With nary coding needed.

The nonstop steps whitethorn vary. But they typically impact typing your anchor substance into the website platform’s contented editor.

WordPress contented  editor

Highlight that text.

"Our Homepage" substance   highlighted successful  the WordPress contented  editor

Click the editor’s “Link” icon, past benignant (or transcript and paste) the URL the substance should nexus to.

Linking "Our Homepage" substance   to "semrush.com" successful  WordPress editor

Press “Enter” oregon “Return” connected your keyboard to confirm.

And that’s it! You’ve created your link—without typing its underlying HTML <a> tags yourself.

"Our Homepage" substance   linked successfully successful  WordPress

How to Detect HTML <a> Tag Issues

One mode of checking whether your <a> tags enactment is to manually click their associated links connected your page. And spot if the links bring you to their intended destinations.

But this method is unfeasible if your website has thousands of links.

So, usage Semrush’s Site Audit instrumentality to mass-check your <a> tags instead.

Here’s how:

Launch the tool, participate your website domain, and click “Start Audit.

Site Audit instrumentality   hunt  bar

A “Site Audit Settings” model volition appear.

Under the window’s “1. Domain and bounds of pages” tab, usage the “Crawl scope” mounting to prime whether the instrumentality should besides cheque your domain’s subdomains for issues.

“1. Domain and bounds  of pages” tab successful  “Site Audit Settings” window

Use the “Limit of checked pages” drop-down to take the fig of pages the instrumentality should cheque each clip it runs.

"100" pages acceptable   adjacent  to “Limit of checked pages” box

Leave the “Crawl source” drop-down mounting arsenic “Website” to person the instrumentality audit your full website.

"Website" acceptable   adjacent  to “Crawl source” box

Leave the “Send an email each clip an audit is complete.” checked if you privation the instrumentality to alert you via email erstwhile it has finished checking your website.

“Send an email each   clip  an audit is complete" container  checked

If you’d like, you tin optionally usage the tabs numbered 2 to six to configure your audit further.

"Site Audit Settings" tabs

Then, click “Start Site Audit.”

“Start Site Audit" fastener  highlighted

The instrumentality volition commencement checking your website for method issues. When it’s done, click your domain sanction to presumption the tool’s report.

"yourdomain.com" sanction  highlighted connected  the dashboard

Click the report’s “Issues” tab.

“Issues” tab highlighted successful  the Site Audit dashboard

If immoderate of your website’s interior links person faulty <a> tags, you’ll spot a “# interior links are broken” connection successful the “Errors” section:

"12 interior   links are broken” connection   successful  the “Errors” section

Alternatively, if immoderate of your website’s outer links person faulty <a> tags, you’ll spot a “# outer links are broken” connection successful the “Warnings” conception instead.

"18 outer  links are broken” connection   successful  the “Warnings” section

Click either connection to presumption its database of broken links.

You’ll spot a study of the assorted breached URLs. Plus the URLs of the pages connected which they tin beryllium found.

A database  of 12 interior   breached  links

You tin past hole each breached nexus successful ways like:

  • Editing your webpage to regenerate the breached link with a moving one
  • Setting up a 301 redirect to nonstop users of the breached nexus to a different—and working—link
  • Editing your webpage to region the nexus entirely if you nary longer request it

Apart from identifying breached links, Site Audit tin cheque for implicit 140 different method issues. Including:

You tin besides docket your audits to hap each time oregon each week. So you enactment connected apical of immoderate method issues that popular up.

HTML <a> tags play important roles successful facilitating idiosyncratic navigation and improving hunt motor rankings.

They whitethorn look complicated. But creating them is easy.

And managing them is adjacent easier.

Simply commencement a escaped proceedings of Semrush to usage the Site Audit tool. Regularly cheque your website for breached links. And guarantee your <a> tags enactment arsenic intended.