HyperLink and Anchor Tag in HTML

Last Updated: 22nd June, 2023

Links in HTML

HTML links, also known as hyperlinks, are one of the most fundamental features of the World Wide Web. They enable users to navigate between web pages and access a wide variety of online resources, including text, images, audio, video, and more.

To create a link in HTML, you need to use the <a> tag, which stands for anchor. The <a> tag is used to define the starting and ending points of a link. The basic syntax for creating a link is as follows:

<a href="url">link text</a>

In this syntax, href stands for hyperlink reference, and it specifies the URL or destination of the link. The link text is the text that appears as a hyperlink on the web page. For example, the following code creates a hyperlink to the Google homepage:

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

When a user clicks on the link, their web browser will navigate to the specified URL.

Types of Links

There are several types of links that you can create in HTML, each serving a different purpose:

1. Internal links: These are links that navigate within the same web page or between different pages on the same website.

Example: <a href="#about">About</a>

2. External links: These are links that navigate to a different website or online resource.

Example: <a href="<https://www.example.com\>">Example\

3. Email links: These are links that allow users to send an email to a specific email address.

Example: <a href="mailto:info@example.com">Email Us</a>

4. File links: These are links that allow users to download a file from the website.

Example: <a href="example.pdf">Download PDF</a>

5. Anchor links: These are links that navigate to a specific section of a web page.

Example: <a href="#top">Back to Top</a>

Anchors

HTML anchors are an essential element of web development. They are used to create links within a web page or to another web page, and they make it possible to jump to specific sections of a page without having to scroll manually.

Creating an anchor in HTML is a straightforward process. First, you must decide where you want the anchor to be located on the page. This can be any element, such as a header, paragraph, or image. Once you have chosen the element, you will need to add the "id" attribute to it. The "id" attribute is used to create a unique identifier for the element, which is necessary for creating the anchor. Here's an example:

<h2 id="example-anchor">Example Anchor</h2>

In this example, we have added the "id" attribute to a heading element, and we have given it the value "example-anchor". This creates a unique identifier for the element, which can be used to create the anchor.

Creating a Link to an Anchor

Once you have created an anchor, you can create a link to it. To do this, you will need to use the "a" element, which is used to create links in HTML. Here's an example:

<a href="#example-anchor">Jump to Example Anchor</a>

In this example, we have created a link that jumps to the anchor we created earlier. To do this, we have used the "#" symbol followed by the value of the "id" attribute we created earlier. In this case, the value is "example-anchor". When a user clicks on this link, they will be taken to the location of the anchor.

Using Links to Open in a New Window

By default, when a link is clicked, the linked page replaces the current page. However, you can use the target attribute to specify where the linked page should be opened. For example, to open the linked page in a new window, you can use the following code:

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

The target attribute

The "target" attribute in links is used to specify where to open the linked document or resource. It tells the web browser to open the link in a new window or tab, or to open the linked document in the same window/tab. The target attribute can take different values depending on where you want the linked page to be opened. For example: _self(default): Opens the linked document in the same window/tab as the current document. _blank: The linked page will open in a new window or tab, depending on the user's browser settings. _parent: Opens the linked document in the parent frame of the current frame, if the current document is inside a frameset. _top: Opens the linked document in the full body of the current window, replacing any frames that might be present.

Using Links with Images in HTML

You can also create links using images in HTML. To do this, you use the <a> tag and include an <img> tag within it. For example:

<a href="<https://www.google.com/>"><img src="google-logo.png" alt="Google"></a>

In this example, clicking on the image will take the user to the Google homepage. The image file "google-logo.png" is displayed as the link

Linking to Email Addresses

Anchors can also be used to link to email addresses. Here's an example:

<a href="mailto:example@example.com">Send an email to Example</a>

In the example above, the anchor links to an email address, which opens up the user's default email client and pre-fills the "To" field with the email address specified.

Absolute vs. Relative URLs

There are two types of URLs that can be used in links: absolute and relative. An absolute URL is the complete address of the target page, including the protocol (http or https) and the domain name. A relative URL, on the other hand, is a partial address that is relative to the current page.

Absolute URL example:

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

Relative URL example:

<a href="/about.html">About Us</a>

In this example, the target page is a file called "about.html" that is located in the same directory as the current page. The forward slash at the beginning of the URL indicates that it is a relative URL.

Conclusion

In conclusion, HTML links or hyperlinks are an essential part of web development that enable users to navigate between web pages and access online resources. By using the <a> tag and href attribute, developers can create different types of links, such as internal links, external links, email links, file links, and anchor links. Moreover, HTML anchors allow us to create links within a web page or to another web page, and we can easily jump to specific sections of a page without having to scroll manually. Knowing how to create and use links in HTML is crucial for creating an effective and user-friendly website.