# How to Add a Hyperlink: A Complete Guide for Every Platform Hyperlinks are the connective tissue of the web. Whether you're building a webpage, writing an email, or formatting a document, knowing how to add a hyperlink correctly — and understanding why the method varies — is a foundational skill in web development and everyday digital work. ## What Is a Hyperlink? A **hyperlink** is a clickable reference that navigates a user from one location to another. That destination can be: - Another webpage or website (external link) - A section within the same page (anchor link) - A file, image, or downloadable resource - An email address (`mailto:` link) - A phone number (`tel:` link) At the code level, a hyperlink is created with the HTML **anchor tag**: ` `. The destination URL lives in the `href` attribute, and the clickable text sits between the opening and closing tags. ```html Visit Example ``` This is the universal building block. Everything else — no matter which platform or tool you're using — is a layer on top of this. ## How to Add a Hyperlink in HTML If you're writing HTML directly, adding a link is straightforward: ```html Learn More ``` Key attributes to know: | Attribute | Purpose | |---|---| | `href` | The destination URL | | `target="_blank"` | Opens link in a new tab | | `rel="noopener noreferrer"` | Security best practice for external links | | `title` | Tooltip text on hover | | `download` | Triggers file download instead of navigation | The `rel="noopener noreferrer"` attribute matters: without it, a page opened in a new tab can technically access the originating page via `window.opener`, which creates a minor but real security risk. ## How to Add a Hyperlink in Common Tools 🔗 ### Microsoft Word and Google Docs In both applications, the process is nearly identical: 1. **Select the text** you want to make clickable 2. Use the keyboard shortcut **Ctrl+K** (Windows) or **Cmd+K** (Mac) 3. Paste or type your URL in the dialog box 4. Confirm In Google Docs, you can also highlight text and a small tooltip will appear suggesting a link. Right-clicking selected text gives you an "Insert Link" option in both platforms. ### WordPress (Block Editor / Gutenberg) 1. Highlight the text inside a paragraph block 2. Click the **link icon** in the formatting toolbar (or press **Ctrl+K / Cmd+K**) 3. Enter the URL and press Enter 4. Toggle the "Open in new tab" option if needed WordPress also lets you search for internal posts and pages by typing a title instead of a full URL — useful for building internal link structures. ### WordPress (Classic Editor) Select text, click the **chain-link icon** in the toolbar, paste your URL, and save. ### HTML Email Builders (Mailchimp, Klaviyo, etc.) Most drag-and-drop email editors follow the same pattern: highlight text, click a link icon, enter the URL. The underlying output is still an HTML ` ` tag, but tracking parameters (UTMs) are often added automatically. ### Markdown Markdown uses a clean, readable syntax: ```markdown [Link Text](https://example.com) ``` For a link that opens with a title tooltip: ```markdown [Link Text](https://example.com "Page Title") ``` Markdown is widely used in platforms like GitHub, Notion, Obsidian, and many static site generators (Jekyll, Hugo, Eleventy). ## Anchor Links: Linking to a Specific Section **Anchor links** jump to a specific element on the same page — common in long-form articles and documentation. First, give the target element an `id`: ```html