HTML – Links & Navigation

Links (anchors) are what make the web "clickable". They allow users to navigate between pages, websites, or sections of the same page.

The Anchor Tag (<a>)

• The <a> tag defines a link.
• The href (hypertext reference) attribute specifies the destination URL.
• The text between <a> and </a> is the clickable part.

Example:

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

Absolute vs Relative URLs

1. Absolute URL: The full web address (e.g., https://www.example.com/page.html).

• Used for linking to external websites.

1. Relative URL: The path relative to the current file (e.g., about.html, /images/logo.png).

• Used for internal links within your own website.

Opening in a New Tab

Use the target attribute to control where the link opens.

• target="_blank": Opens the link in a new tab or window.
• target="_self": Opens in the same tab (default).

When using target="_blank", it is a security best practice to add rel="noopener noreferrer".

• noopener: Prevents the new page from accessing window.opener property of the original page (security).
• noreferrer: Prevents the browser from sending the Referer header to the new page (privacy).

Example:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open in new tab</a>

Anchor Links (Jumping to a section)

You can link to a specific part of a page using IDs.

1. Give an element an ID: <h2 id="contact">Contact</h2>
2. Link to it with a hash (#): <a href="#contact">Go to Contact</a>

Email and Phone Links

• Email: <a href="mailto:someone@example.com">Send Email</a>
• Phone: <a href="tel:+1234567890">Call Us</a>

Suggested image prompt

"Diagram showing different types of links: one pointing to an external globe (Absolute), one pointing to a local file folder (Relative), and one pointing to a section on the same page (Anchor)."

Interview-style questions from this topic

1. What does the href attribute stand for?
2. What is the difference between absolute and relative URLs?
3. How do you make a link open in a new tab?
4. How do you create a link that jumps to a specific section on the same page?