← Back to all tutorials

HTML Links

Master the anchor tag to create links to other pages, sections, emails, and external websites.

HTML Links

Links are what make the web a web — they connect pages together. The <a> (anchor) tag creates clickable links.

Basic Syntax

<a href="https://notearc.info">Visit NoteArc</a>

The href attribute specifies the destination URL.

Types of Links

1. External Links

Link to other websites using the full URL:

<a href="https://www.google.com">Go to Google</a>

2. Internal Links (Same Website)

Link to other pages on your own site using relative paths:

<a href="about.html">About Us</a>
<a href="pages/contact.html">Contact</a>
<a href="../index.html">Home</a>

3. Anchor Links (Same Page)

Link to a specific section on the same page using an ID:

<a href="#section2">Jump to Section 2</a>

<!-- Further down the page -->
<h2 id="section2">Section 2</h2>

4. Email Links

<a href="mailto:hello@notearc.info">Send Email</a>

5. Phone Links

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

The target Attribute

ValueBehavior
_selfOpens in the same tab (default)
_blankOpens in a new tab
<a href="https://google.com" target="_blank">Google (new tab)</a>

The title Attribute

Shows a tooltip when the user hovers over the link:

<a href="about.html" title="Learn more about us">About</a>

Linking an Image

You can wrap an image inside a link to make it clickable:

<a href="https://notearc.info">
    <img src="logo.png" alt="NoteArc Logo">
</a>

Key Takeaways

  • Use <a href="..."> to create links
  • Use full URLs for external links, relative paths for internal links
  • Use #id for anchor links within the same page
  • Use target="_blank" to open links in a new tab
  • Images can be wrapped in <a> tags to make them clickable