Hyperlinks: Navigating the Web and Anchor Points

Hyperlinks are what make the web a web. They connect pages, websites, and different parts of a single page together. In HTML, hyperlinks are created using the anchor (<a>) element.

1. Syntax of the Anchor Tag

An anchor tag requires the href (hypertext reference) attribute to specify the destination URL:

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

Opening in a New Tab:

By default, clicking a link opens the new page in the current window. If you want to open it in a new browser tab, use target="_blank":

<a href="https://google.com" target="_blank" rel="noopener noreferrer">Go to Google (New Tab)</a>

(Tip: Always add rel="noopener noreferrer" when using target="_blank" to protect your website's performance and prevent security vulnerabilities like Tabnabbing.)

2. Absolute vs. Relative Paths

When linking to files, you will use either an absolute or a relative path.

A. Absolute Path

Links to an external site or resource on a different domain. It must include the protocol (http:// or https://).

<a href="https://github.com">GitHub</a>

B. Relative Path

Links to a file on your own website, relative to the current file's directory.

• Same folder: <a href="about.html">About Us</a>
• Subfolder: <a href="blog/post-1.html">Read Blog</a>
• Parent folder: <a href="../index.html">Back to Home</a>

3. Anchor Points (Internal Jumps)

You can link to specific sections on the same page using the id attribute. This is commonly used for tables of contents or "back to top" buttons.

Step 1: Assign an ID to the target element

<h2 id="faq-section">Frequently Asked Questions</h2>

Step 2: Create a link pointing to that ID

Use the hash (#) symbol followed by the target's ID value:

<a href="#faq-section">Jump to FAQs</a>

To create a "Back to Top" link, simply point to # without an ID:

<a href="#">Back to Top</a>

4. Other Link Types

You can also use the anchor tag to trigger email clients or make phone calls:

• Email: <a href="mailto:support@example.com">Email Us</a>
• Phone Call: <a href="tel:+123456789">Call Now</a>

In the next guide, we will examine tables, basic layouts, and structural optimization.