# How to Create a Hyperlink in HTML Hyperlinks are the connective tissue of the web. Every clickable link you've ever followed — whether jumping between pages, downloading a file, or opening an email client — was almost certainly built with the same fundamental HTML element: the **anchor tag**. Understanding how to create and control hyperlinks in HTML is one of the most foundational skills in web development. ## The Basic Anchor Tag Syntax The HTML element responsible for hyperlinks is the ` ` tag, short for **anchor**. Its core structure looks like this: ```html Visit Example ``` Breaking this down: - **` `** — opens the anchor element - **`href`** — stands for *hypertext reference*; this attribute holds the destination URL - **The text between the tags** — this is what the user sees and clicks - **``** — closes the anchor element That single line is a fully functional hyperlink. It doesn't need JavaScript, CSS, or anything else to work in a browser. ## Absolute vs. Relative URLs The value you put inside `href` determines where the link goes — and the format of that value matters depending on your situation. **Absolute URLs** include the full web address, including the protocol: ```html About Us ``` Use absolute URLs when linking to external websites or when you need a fully self-contained reference regardless of where your HTML file lives. **Relative URLs** point to files within the same website or directory structure: ```html About UsContact ``` Relative URLs are common in internal navigation because they adapt automatically when your site moves between environments (local development, staging, production). If you link to an external page using a relative path, the browser will misinterpret it as an internal path — a common beginner mistake. ## Controlling How Links Open: The `target` Attribute By default, clicking a link replaces the current page with the destination. You can change this behavior with the **`target`** attribute: ```html Open in New Tab ``` | Target Value | Behavior | |---|---| | `_self` | Opens in the same tab (default) | | `_blank` | Opens in a new tab or window | | `_parent` | Opens in the parent frame | | `_top` | Opens in the full browser window, breaking out of frames | 🔒 When using `target="_blank"`, it's best practice to also include `rel="noopener noreferrer"` for security reasons: ```html Visit Site ``` Without this, the linked page can potentially access your page's context through the `window.opener` object — a known security vulnerability. ## Linking to Email Addresses and Phone Numbers The `href` attribute isn't limited to web URLs. HTML supports several **URI schemes** that trigger other actions: **Email links** using the `mailto:` scheme: ```html Send us an email ``` You can pre-fill subject lines and body text: ```html Email Us ``` **Phone links** using the `tel:` scheme (especially useful on mobile): ```html Call Us ``` These links behave differently depending on the user's device and installed applications — a phone link on desktop may do nothing, while on a smartphone it opens the dialer. ## Anchor Links: Jumping to a Section on the Same Page You can link to a specific section within the same page using **fragment identifiers**. This requires two parts: an `id` on the target element and a `#` reference in the `href`: ```html

Pricing Information

Jump to Pricing ``` You can also combine this with a page URL to link to a specific section of a different page: ```html Meet the Team ``` This is the mechanism behind table-of-contents links, skip navigation for accessibility, and long-form page navigation. 🔗 ## Making Images Clickable Anything placed between the ` ` tags becomes clickable — including images: ```html ``` The `alt` attribute on the image remains important here for accessibility and SEO. Screen readers will read the alt text as the link label if there's no visible text alongside the image. ## Variables That Shape Your Hyperlink Decisions Creating a working link is technically simple, but the *right* approach depends on context: - **Internal vs. external linking** — whether you use relative or absolute URLs, and whether you add `target="_blank"`, often depends on site architecture and user experience goals - **Security posture** — teams handling sensitive applications apply stricter controls around `rel` attributes and outbound link policies - **Accessibility requirements** — meaningful link text ("Read our pricing page") matters far more than generic text ("click here") for screen reader users and SEO - **Mobile vs. desktop context** — `tel:` and `mailto:` links behave very differently across device types and deserve testing on real devices - **JavaScript-heavy frameworks** — React, Vue, Angular, and similar frameworks often handle internal navigation with their own router components rather than standard ` ` tags, to avoid full page reloads ## The Spectrum of Hyperlink Complexity At one end: a basic `` tag is all a beginner building a static HTML page ever needs. At the other end: developers working in single-page applications manage routing logic, prefetching, link state management, and accessibility ARIA attributes as a deliberate system. Most use cases fall somewhere in between — and what "correct" looks like for a personal portfolio page is meaningfully different from what it looks like for an e-commerce site with thousands of internal links, analytics tracking, and multi-language URL structures. The syntax stays the same. What changes is how much intentional layering you apply on top of it — and that depends entirely on the complexity of what you're building. 🧩