Creating Hyperlinks using Anchor Tags

Hyperlinks are an essential element of any webpage, enabling users to navigate between different pages or sections within a website. In HTML, hyperlinks can be created using the <a> (anchor) tag. By defining the href attribute of the anchor tag, we can specify the destination URL or the target element within the same page.

Syntax

The basic syntax for creating a hyperlink using an anchor tag is as follows:

<a href="destination_url">Link Text</a>

Here, the href attribute defines the target URL or destination for the hyperlink. The text enclosed between the opening and closing anchor tags represents the visible text of the hyperlink.

Absolute and Relative URLs

Hyperlinks can have either absolute or relative URLs as their destinations.

  • Absolute URLs provide the complete address of the target page or resource, including the protocol (http:// or https://). For example: https://www.example.com

  • Relative URLs specify the destination in relation to the current webpage. They can be used to link to another page within the same website or reference resources within the same domain. For example: ../about.html

Linking to External Websites

To create a hyperlink that points to an external website, we can use an absolute URL. Let's say we want to link to the homepage of Google. We can achieve this with the following code:

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

Linking to Internal Webpages

To link to a page within the same website, we can use a relative URL. Suppose we have an "About" page in the same directory as the current page, and we want to create a hyperlink to it. We can do this as follows:

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

Linking to Sections within the Same Page

HTML also allows us to link to specific sections within the same webpage. This is achieved by using anchor names.

First, we need to assign a unique id attribute to the target element. For instance, let's assign the id "section1" to a particular section.

<h2 id="section1">Section 1</h2>

We can then create a hyperlink that scrolls to this section when clicked, using the following code:

<a href="#section1">Go to Section 1</a>

Linking to Email Addresses and Phone Numbers

Apart from webpages, anchor tags can also be used to create hyperlinks for email addresses and phone numbers.

To create an email hyperlink, we use the mailto: scheme followed by the email address. For example:

<a href="mailto:contact@example.com">Contact Us</a>

Similarly, to create a hyperlink for phone numbers, we use the tel: scheme followed by the phone number. For example:

<a href="tel:+1234567890">Call Us</a>

Conclusion

Hyperlinks are a fundamental aspect of web development, allowing users to navigate seamlessly through different pages or sections within a webpage. By utilizing the anchor tags in HTML, and specifying the appropriate href attribute, we can create diverse types of hyperlinks that enhance the functionality and user experience of a website.


noob to master © copyleft