~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/3html-links

# HTML Links & Navigation

Links are what make the web a web. The `<a>` (anchor) element creates hyperlinks that connect pages, files, and resources.

## Basic Link Syntax

Every link uses the `<a>` element with an `href` attribute:

```html
<a href="https://example.com">Visit Example</a>
```

## Types of Links

### Absolute Links

Full URLs that point to external resources:

```html
<a href="https://www.google.com">Google</a>
<a href="mailto:hello@example.com">Email Us</a>
<a href="tel:+1234567890">Call Us</a>
```

### Relative Links

Paths relative to the current file:

```html

<a href="about.html">About</a>

<a href="pages/contact.html">Contact</a>

<a href="../index.html">Home</a>

<a href="/css/styles.css">Styles</a>
```

## Link Best Practices

### Always Use Descriptive Text

```html

<a href="https://example.com">Click here</a>

<a href="https://example.com">Visit Example Company</a>
```

### External Links: Security

When linking to external sites, add security attributes:

```html
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External Site
</a>
```

- `target="_blank"` — Opens in new tab
- `rel="noopener"` — Prevents the new page from accessing your page
- `rel="noreferrer"` — Also hides the referrer information

## Email and Phone Links

```html

<a href="mailto:hello@example.com?subject=Hello&body=Hi there!">
  Send Email
</a>

<a href="tel:+1234567890">+1 (234) 567-890</a>
```

## Download Links

Force a file to download instead of opening:

```html
<a href="files/resume.pdf" download>Download Resume</a>
<a href="files/image.png" download="my-image.png">Download Image</a>
```

## Navigation Structure

Basic navigation menu:

```html
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
```

## Page Jump Links (Anchors)

Link to specific sections on the same page:

```html

<a href="#services">Our Services</a>

<section id="services">
  <h2>Our Services</h2>
  <p>Content here...</p>
</section>
```

## Complete Example

Here's a complete navigation structure:

```html
<header>
  <nav>
    <a href="/" class="logo">MySite</a>
    <ul>
      <li><a href="/about">About</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <h1>Welcome to My Site</h1>
  <p>
    Learn more about
    <a href="/about">our mission</a> or
    <a href="/contact" target="_blank" rel="noopener">get in touch</a>.
  </p>

<section id="features">
    <h2>Features</h2>
    <ul>
      <li><a href="/features/fast">Fast Performance</a></li>
      <li><a href="/features/secure">Security First</a></li>
      <li><a href="/features/easy">Easy to Use</a></li>
    </ul>
  </section>
</main>

<footer>
  <p>
    <a href="/privacy">Privacy Policy</a> |
    <a href="/terms">Terms of Service</a>
  </p>
</footer>
```

## Common Mistakes

1. **Using "click here"** — Bad for accessibility and SEO
2. **Forgetting rel="noopener"** — Security risk with target="_blank"
3. **Broken relative paths** — Test all links before publishing
4. **Missing href** — `<a>` without href isn't clickable
5. **Using links for buttons** — Use `<button>` for actions, `<a>` for navigation

No changes yet

cancel