Navigation & Links

Without the anchor tag, the internet would just be billions of disconnected files. The <a> tag is the thread that stitches the web together.

The Anchor Element (<a>)

The <a> tag (short for "Anchor") defines a hyperlink. It is an inline element — it can wrap around text or images, and it flows within a sentence without breaking to a new line.

Think of it as a teleporter. You are standing in a room (Page A). You see a glowing blue door. When you walk through it, you are instantly transported to a different castle (Page B). The <a> tag builds that door.

The href Attribute

The href (Hypertext Reference) attribute is where the portal leads. It is the most important attribute on this tag — without it, the link goes nowhere.

Types of href Values

Absolute URL — links to an external website:

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

Relative URL — links to a file within your own project:

<a href="about.html">About Us</a>
<a href="../images/logo.png">Our Logo</a>

Anchor link — jumps to a specific section on the current page using an element's id:

<a href="#contact">Jump to Contact Section</a>

<!-- The destination element: -->
<section id="contact"> ... </section>

Email link — opens the user's default email app:

<a href="mailto:hello@skybrance.com">Email Us</a>

Phone link — opens the dialer on mobile devices:

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

Download link — prompts the browser to download instead of navigate:

<a href="files/brochure.pdf" download>Download Brochure</a>
<a href="files/report.pdf" download="Q3-Report.pdf">Download Report</a>

---

The target Attribute

Controls where the linked document opens.

Value	Behaviour
_self	Opens in the same tab (default)
_blank	Opens in a new browser tab

Use _blank for external links so users don't lose your page:

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

Security warning: When using target="_blank", always add rel="noopener noreferrer". Without it, the new page can access and manipulate your original page — a common phishing technique.

<!-- The correct, secure way to open external links -->
<a href="https://www.github.com" target="_blank" rel="noopener noreferrer">
  GitHub
</a>

---

Wrapping Images in Links

Because <a> is an inline element, it can wrap around anything — including images. Clicking the image then acts as a link.

<a href="https://skybrance.com">
  <img src="logo.png" alt="SkyBrance Home">
</a>

---

Navigation Menus

In practice, the <a> tag almost never appears alone. Most navigation bars are built from an unordered list of anchor tags, styled with CSS:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

CSS then removes the bullet points and lays the items out horizontally, producing the clean nav bars you see on every professional website.

---

Quick Reference

<!-- External link (opens new tab, secure) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>

<!-- Internal page link -->
<a href="/about">About Us</a>

<!-- Jump to section on same page -->
<a href="#pricing">See Pricing</a>

<!-- Email -->
<a href="mailto:hello@skybrance.com">Email Us</a>

<!-- Phone -->
<a href="tel:+911234567890">+91 123 456 7890</a>

<!-- Download -->
<a href="file.pdf" download>Download PDF</a>

Pro tip: Make link text descriptive. "Click here" tells neither the user nor Google what the destination is. "Download the Q3 Report" is clear, accessible, and helps SEO.