Scaler
Academy
Data Science
AI/ML
DevOps
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
<a> Tag in HTML

<a> Tag in HTML

By Sejal Somani
6 mins read
Last updated: 4 May 2023
171 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

An anchor tag is one of the many HTML tags. In HTML "a" tag creates a hyperlink to a specified URL. An essential attribute of the anchor HTML tag is the "href" attribute. The href attribute defines the URL to be referenced. Other properties can assist in improving the look and functionality of the link, but they aren't essential.

"a" tag has three different styles. Each style reflects its current iteration :

  • Unvisited links are highlighted in blue and are underlined.
  • A visited link is purple in color and highlighted.
  • An active link is highlighted in red and looks underlined.

The HTML a tag syntax is shown below:

Attributes

  1. Download attribute:

    When the user hits the link, the browser will instantly recognize and download the proper file extension instead of opening the referenced resource.

  2. href attribute:

    The URL of the website, linked document, resource, or location to which the link will lead.

  3. hreflang attribute:

    The referenced document's language is handled by the hreflang property. This attribute can only be used if the href attribute is applied.

  4. target attribute:

    Specifies the location of the linked document to be opened. Blank, self, top, parent, and framename are some of the values it takes.

  5. type attribute:

    This attribute indicates the associated document's media type.

How to Use Anchor Tag in HTML?

The HTML anchor tag (< a > tag) is used to create a link from one page to another. It can make links to other websites, files, locations, and any URL. The most crucial attribute of the HTML tag is the "href" attribute which has a link to the target page or URL.

Examples

Linking to an absolute URL

Output:

Google

Linking to relative URLs

Output:

Google Doodles
Random Wikipedia Article

Linking to an element on the same page

Output:

Click here to go to Section B

Welcome to section B

```

Linking to an email address

Output:

Send mail to : xyz@example.com

Linking to telephone numbers

Output:

Call : +1234567890

Use an image to redirect

Output:

Click on the image to open website.

undefined

Output:

The link will open in a new browser window or tab if the target property is set to "_blank."

Visit google.com

Accessibility Concerns

The platform's accessibility is a fundamental aspect. It's a clear depiction of the site's major pillar: the open and global exchange of data, regardless of language, geography, or impairment.

Link text

The typical problem is to link merely the terms "click here" / "here." Instead, the text of a link must identify the destination of the reference.

For example:

Links that launch in a separate tab/window by or refer to a download file must indicate what will occur once the link is clicked. When a new tab, window, or app appears suddenly, those with eyesight problems, those using text-to-speech equipment, and those with cognitive difficulties may get confused. Some outdated screen-reading software may not notice the change.

For example:

Using alt text can help increase accessibility:

Size

Dynamic components, such as links, should have an appropriate space to be easily activated. This is beneficial to a wide range of people, including those who use uncertain inputs like a touchscreen. Although there is no compulsion, it's still a great practice to ensure that all the components are easily accessible.

Onclick events

A particular markup misuse has become common: href = "#" This type of HTML anchor element does not function as a link. Instead of delivering the user to a location, these links operate as user interface controls. Clicking on them changes the UI in some way. The problem is that there is an HTML element dedicated to manipulating user interfaces: the button tag.

In general, a hyperlink should only be used to navigate to an actual URL. Screen readers interpret the anchor and button tags differently because they respond to various keyboard inputs. Because of this inconsistency, visually handicapped users have to struggle with confusing encounters.

Browser Support

BrowsersChromefirefoxInternet ExplorerSafariOpera
CompatibilityYesYesYesYesYes

Conclusion

  • Anchor or " a" tag is an HTML tag that is used to add a hyperlink to a web page.

    A hyperlink is a link from one page to the other that is defined by the tag. The "a" tag is only a placeholder for a hyperlink if the tag doesn't have a href attribute.

    Here, href is the property that requires the hyperlink's URL, and the text between the open and closed tags act as the link's display text.

  • Anchor tag supports a variety of attributes like the target attribute, download attribute, href, hreflang, and type attribute are a few to mention.

  • There are a few accessibility concerns when it comes to a tag in HTML, such as the size of the link, connecting to external links, the text link, and onclick events are a few of them.

  • The anchor tag is compatible with a lot of browsers including, google chrome, safari, Mozilla firefox, internet explorer and opera.

  • <link> tag
  • <button> tag
  • <base> tag