Introduction

The anchor tag, denoted by the <a> sign in HTML, is appropriate for constructing a hyperlink. A hyperlink is used to reroute traffic to another URL, which could be another website, file, or even another position on the same website. The hyperlink's position is specified by the text we enter in the <a> tag. The URL should be written inside the anchor tag's href attribute.

How to Insert Hyperlink in HTML Page?

The text is placed between the <a> and </a> tags when inserting a hyperlink, which is represented by the anchor tag <a>. To write the URL, employ the href attribute. Use of the anchor tag inside the body tag is recommended.

Syntax

<a href=""></a>

Example

We shall include Google's URL in the href property if we wish to make a hyperlink to their website. The text we wish to display will be put in between the anchor tags the webpage displays.

<a href="https://www.javatpoint.com">Javatpoint</a>

Output

What is the Correct HTML for Making a Hyperlink?

Thus, we can observe that an anchor element has been built that, when clicked, goes to the page defined by the href attribute.

Default Appearance of the HTML Anchor Tag

The hyperlink that has been visited is indicated in purple.
The hyperlink's default colour of blue is used to indicate the unvisited link.
A link that is currently active is indicated in red.

Attributes

Global Attributes

The properties compatible with all HTML elements are referred to as global attributes.

In HTML, the global attributes are supported by the anchor tag.

Event Attributes

Event attributes define event actions in HTML. The anchor element supports all of the HTML Event Attributes.

The other attributes are:

Attribute	Description
href	The hyperlink or URL is specified using this attribute.
hreflang	The referenced URL's language can be specified using this property.
type	The media type of the connected URL is specified using this attribute.
target	This attribute specifies the location at which the hyperlinked link should open.
download	To download the specified URL, use this property. For the user to download it, they must click the hyperlink.
ping	A list of URLs with spaces between them is used with this property. Upon clicking the hyperlink, the browser will send POST requests and a body PING to the specified URLs. Tracking is the purpose of this command.
rel	With this command, you can indicate the relationship between the linked document and the current document.
referrer policy	Selecting which referrer information to send along with the URL is done using this attribute.
media	Specifying the medium or device for which the URL is optimized is done with this property.

Properties

Content Categories:

1. Flow Content:

This wide category includes every element that can be employed within a body tag. It has components such as form-related elements, header elements, interactive elements, embedding elements, phrasing elements, and sectioning elements.

The group of flow content components includes, for instance, anchor tags.

2. Phrasing Content:

Phrasing content can be used anywhere flow content is required. It is a subset of flow content that defines the text and the markup it contains. If the anchor tag has the phrase content, it falls under this type.

3. Interactive Content:

Another subset of flow content is interactive content, which consists of elements specifically created for user interaction and used in contexts where flow content is expected. This also includes the anchor tag.

4. Tag Omission:

Not consented to. It is required to have both the opening and closing tags.

5. Allowed Parents:

Elements that take phrase or flow material are permitted; other <a> elements are not.

6. DOM Interface:

HTMLAnchorElement

More Examples

Example 1: Linking to an Absolute URL

An absolute URL is an address of a domain that also contains the protocol of http/https and the website's full address.

<body>

    <a href="http://www.facebook.com">Facebook</a>

</body>

Output

Example 2: Linking to Relative URLs

The location after the domain is all that is included in the relative URL; the entire web address is absent. It is assumed that the URL we entered is part of the same root domain and is located on the same website.

It causes the browser to remain on the current page and begins with the forward slash.

<body>

    <a href="//site.com">Example 1</a>

    <br>

    <a href="./index.html">Example 2</a>

</body>

Output

Example 3: Linking to an Element on the Same Page

The href attribute is assigned to the ID of an element that we wish to visit to link the URL to an element on the same page.

<body>

<p><a href="#divs"> Click me to go down</a>

</p>

<p> HTML or HyperText Markup Language is used to design web pages. It was released in 1993. The HTML file extension is named ".html". CSS and JavaScript are used to construct an HTML file. In other words, HTML explains the skeleton body of the webpage or how the page is formed. The codes have been written as elements. Another name for these components is HTML tags. The tags make use of HTML markup. All of the major tags in HTML have to be opened and closed. This is known as the golden rule. Each tag in a series of several tags needs to be closed. </p>

<p>Using a markup language such as HTML, we can

Make connections to other documents, arrange the information in our document, and provide the information context and significance. There are two components to an HTML document. It includes hypertext links (HyperText) and structured information (Markup) to other documents. </p>

<p> The anchor tag, denoted by the <a> sign in HTML, is appropriate for constructing a hyperlink. A hyperlink is used to reroute traffic to another URL, which could be another website, file, or even another position on the same website. The URL should be written inside the anchor tag's href attribute. </p>

<p id="divs">You will land here when clicked on the first link</p>

</body>

Output

Before clicking on the link

After clicking on the link

The page focus shifts downward and points to the location where the element's ID matches the configured ID when we click the link. In our example, the attention shifts to the paragraph where the id matches #divs when we click the link with the href set to #divs.

Example 4: Linking to an Email Address

We use the mailto: method to build links that open externally in the user's email program.

<body>

    <a href="mailto:[email protected]">Send email</a>

</body>

Output

A pop-up appears when you click on the link.

Example 5: Linking to Telephone Numbers

The phone number will be inserted in the href property if we wish to link to it. The text we wish to display will be put in between the anchor tags the webpage displays.

<body>

    <a href="tel:+48.397.7986">+48 397 7986</a>

</body>

Output

The hyperlink has been created, and when it is clicked, it directs to the number provided as the value of the attribute href.

Note

The device capabilities affect the behavior of the tel: link.

When using a cellular device, the number is automatically called.

Skype and FaceTime are popular phone apps for operating systems.

Sharing and storing numbers are examples of additional behaviors.

Example 6: Linking to a JavaScript

We shall add text to the href attribute to link our URL to a JavaScript page. The text we wish to display will be put in between the anchor tags the webpage displays.

<body>

    <a href="javascript:alert('This is an alert');">Click me</a>

</body>

Output

An alert appears when you click on the link.

Example 7: Linking to a Non-HTML Resource

The path of the external file, such as a Word document or PowerPoint, should be inserted into the href property if we wish to link to a non-HTML resource. The text we wish to display will be put in between the anchor tags the webpage displays.

<body>

    <a href="chapter1.docx">Word Document</a>

</body>

Output

The Word document with the specified path will open when we click the link.

Example 8: Using the Download Attribute to Save a "canvas" as a PNG

Using the 'download' attribute, which indicates the name by which the painting will be saved on the device, we can download a canvas we have painted. We make a canvas.

HTML

<body>

    <p>Paint by moving the mouse.

        <a href="" download="photo.png">Download image</a>

    </p>

    <canvas width="300" height="300"></canvas>

    <script src="main.js"></script>

</body>

CSS

The background color of the canvas and the color of the tag are set in the following code.

canvas {

  background: #fff;

  border: 1px solid black;

}

a {

  display: inline-block;

  color: dark blue;

}

JavaScript (javascript):

First, we choose the ink color. Next, we construct a function to fill the arc and add certain action listeners for particular activities.

let canvas = document.querySelector('canvas'),

  c = canvas.getContext('2d')

c.fillStyle = 'light green'

function pen(x, y) {

  if (isDrawing) {

    c.beginPath()

    c.arc(x, y, 4, 0, Math.PI * 2)

    c.closePath()

    c.fill()

  }

}

canvas.addEventListener('mousemove', (event) =>

  pen(event.offsetX, event.offsetY),

)

canvas.addEventListener('mousedown', () => (isDrawing = true))

canvas.addEventListener('mouseup', () => (isDrawing = false))

document

  .querySelector('a')

  .addEventListener(

    'click',

    (event) => (event.target.href = canvas.toDataURL()),

  )

Example 9: Using an Image as a Link

The img tag, which is nested inside the anchor tag, is used to input the details of an image when we want to connect to it. The information we wish to display about the image will be written between the anchor tag on the webpage. The src attribute of the img tag is used to indicate the path of the image.

<body>

    <a href="https://www.google.com">

        <img border="0" alt="google" src="img.png" width="90" height="70">

    </a>

</body>

Output

Example 10: Opening a Link in a New Browser Window

The URL's path should be put into the href property, and the target attribute should be set to _blank if we want the URL to open in a new browser window. We will set all the content we want to appear between the head and end anchor tags that the webpage displays.

<body>

    <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>

</body>

Output

When you click the link, a new window opens.

Skip Links

By using skip links, users can avoid navigation, search, and logo elements and get to the main content by double-clicking. It is usually buried before getting to draw attention.

Skip links can speed up frequent information, including headers and paragraphs. Thus, it is easier for people who access the pages through devices, including voice commands or switch controls, to click twice on the same link.

HTML

<body>

    <a href="#content" class="skip-link">Click to skip to the main content</a>

    <header>

        ---------

    </header>

    <main id="content"> </main> <!-- The link jumps here -->

</body>

CSS

.skip-link {

  position: absolute;

  top: -9em;

}

.skip-link:focus {

  top: 0;

}

Default CSS Settings

The majority of browsers have the "a" tag's default CSS setting set to:

a:link,

a:visited {

  color: (internal value);

  text-decoration: underline;

  cursor: auto;

}

a:link:active,

a:visited:active {

  color: (internal value);

}

Size and Proximity

Links must have a substantially large opening so that the connection mechanism works easily. It is convenient for both touchscreen users and individuals with motor difficulties. The size of the icon should be at least 44x44.

The spaces between anchors should be correct. Spacing the links is recommended because if they are crowded, then the person can click on the wrong one, and it serves as another way to make the page look clean.

Security and Privacy

Target = "blank" is an action that makes the link open in a new window. Nevertheless, the operation is mostly carried out through a Windows attack. Opener can also be one of the outcomes of this management renewal. For safety purposes, one advised to use rel = "noreferrer" and rel = "noopener".

Accessibility

The goal of accessibility is to enable as many people as possible to use websites in a variety of ways, like:

Smartphones and tablets.
Browsing on the smartwatches or TV set, keep switching them.
A relatively old version of phone browsers.
Giving an environment on the page for physical disabilities such as those of hearing, vision, movement, and cognitive.

Setting the href property of anchor tags to javascript: void(0) or "#" can be used as buttons by observing the click events. Copying, dragging, opening in a new window or tab, bookmarking and so on leads to removal of benefits from the links. Hence, a href tag should not be used instead of a button.

Ensure the anchor tag code contains the link's destination titles to help visitors understand the content.

Specifications

The platform is designed to offer advertisements and interactive, phrase, and flow content, as pointed out above. Furthermore, it keeps any HTML's event and global attributes.

Conclusion

Links will be linked to the text in a way that allows the user to activate the link seamlessly. Moreover, the gap should also be relevant.

The anchor tag, whose attributes are defined by the sign in HTML, is the appropriate one in case you want to construct a hyperlink.

A hyperlink is a redirection that takes traffic to a different URL, which could be another website, file, or the same page, only in a different spot.

The text is placed between the <a> and </a> tags when inserting a hyperlink, which is represented by the anchor tag <a>.

The listening and speaking skills are applicable on interactive, continue, and sentence levels. The HTML global and event properties are supported, too.

← Prev Next →

HTMLs Tutorial

HTML5 Advance

Misc

HTMLs Tutorial

HTML5 Advance

Misc

What is the Correct HTML for Making a Hyperlink?

Introduction

How to Insert Hyperlink in HTML Page?

Default Appearance of the HTML Anchor Tag

Attributes

Global Attributes

Event Attributes

Properties

Content Categories:

1. Flow Content:

2. Phrasing Content:

3. Interactive Content:

4. Tag Omission:

5. Allowed Parents:

6. DOM Interface:

After clicking on the link

HTML

CSS

JavaScript (javascript):

Skip Links

HTML

CSS

Default CSS Settings

Size and Proximity

Security and Privacy

Accessibility

Specifications

Conclusion