# How to Link in HTML: A Complete Guide to Anchor Tags and Hyperlinks Linking is one of the most fundamental skills in HTML. Whether you're connecting pages within your own site, pointing to external resources, or triggering an email client, HTML links are what make the web navigable. Here's exactly how they work — and the variables that affect how you should use them. ## The Basic HTML Link Syntax Every HTML link uses the **anchor element**: ` `. The core structure looks like this: ```html Visit Example ``` Breaking that down: - ` ` — the opening anchor tag - `href` — stands for **Hypertext Reference**; this is where the link points - The text between the tags — this is the **clickable link text** (also called anchor text) - `` — the closing tag This is the foundation. Everything else builds from it. ## Types of Links You Can Create in HTML ### 🔗 External Links These point to pages on other websites. Always use the full URL including `https://`: ```html Go to Wikipedia ``` ### Internal Links (Same Website) These connect pages within your own site. You can use **relative paths** instead of full URLs: ```html About UsContactRead This Post ``` Relative paths are shorter and more portable — they work regardless of the domain name, which matters when moving a site between development and live environments. ### Anchor Links (Jump to a Section) You can link to a specific section on the same page using an **ID attribute**: ```html

Pricing

Jump to Pricing ``` You can also link to a section on a different page: ```html Web Design Services ``` ### Email Links The `mailto:` scheme opens the user's default email client: ```html Send us an email ``` You can pre-fill the subject line too: ```html Email Support ``` ### Phone Links For mobile-friendly sites, `tel:` links allow tap-to-call: ```html Call Us ``` ## Key Attributes That Change Link Behavior The `href` attribute is required, but several other attributes meaningfully change how a link functions: | Attribute | What It Does | Common Use | |---|---|---| | `target="_blank"` | Opens link in a new tab | External links | | `target="_self"` | Opens in same tab (default) | Standard navigation | | `rel="noopener noreferrer"` | Security measure for new-tab links | Always pair with `_blank` | | `rel="nofollow"` | Tells search engines not to follow | Sponsored or untrusted links | | `title="..."` | Tooltip text on hover | Accessibility, extra context | | `download` | Prompts file download instead of navigation | PDFs, images, files | ### Opening Links in a New Tab ```html Open in New Tab ``` The `rel="noopener noreferrer"` attribute is a **security best practice** — without it, the opened page can access your page's window object, which creates a vulnerability. ### Downloadable Links ```html Download the Report ``` You can also specify the downloaded filename: ```html Download ``` ## 📋 Linking Best Practices Worth Knowing **Anchor text matters** — both for usability and SEO. Avoid generic text like "click here." Descriptive anchor text like "read our HTML guide" gives users and search engines meaningful context. **Absolute vs. relative URLs** is a real decision. Absolute URLs (`https://example.com/page`) are safer for links that might be shared or syndicated. Relative URLs (`/page`) are cleaner for internal navigation and easier to manage during development. **Broken links hurt user experience and SEO.** If you rename or move pages, old links pointing to those URLs will return a 404 error. Using root-relative paths (starting with `/`) makes bulk updates easier to manage than deeply nested relative paths. **Accessibility requires descriptive links.** Screen readers read anchor text in isolation, so "click here" or "more" is meaningless out of context. Writing "download the accessibility checklist" is always the better choice. ## Variables That Affect How You Should Link The right linking approach depends on several factors that vary by project: - **Site structure** — flat sites (few pages) handle relative links differently than deep hierarchies - **CMS or framework** — WordPress, React, Next.js, and static HTML all handle internal linking differently; some generate links programmatically - **SEO requirements** — whether you need `nofollow`, canonical considerations, or hreflang for multilingual sites - **User device** — `tel:` links are useful on mobile but irrelevant on most desktops - **Security posture** — whether you're embedding third-party links and how much you trust those sources affects your use of `rel` attributes - **Accessibility standards** — projects built to WCAG compliance need more attention to anchor text quality and keyboard focus styling A simple personal portfolio and a large e-commerce site both use ` `, but the decisions around link structure, attributes, and management look completely different in practice. ## 🧩 When the Same Tag Does Different Things The anchor tag is deceptively flexible. The same `` element can navigate to another page, jump within a page, trigger a download, open a mail client, initiate a phone call, or — when used with JavaScript — execute code entirely without navigation. The `href` value controls all of it. That flexibility is useful, but it also means the "right" way to link depends heavily on what you're building, who's using it, and what environment it's running in. HTML's syntax is consistent; the decisions around it are where your specific situation starts to matter.