HTML Beginner

HTML Links and Navigation: Creating Hyperlinks

Imran Nadwi
Imran Nadwi
51 views 30 min read
Share: Twitter Facebook LinkedIn
Table of Contents

Links are the foundation of the web, allowing users to navigate between pages and resources.

<a href="https://www.example.com">External Link</a>
<a href="about.html">Internal Link</a>
<a href="mailto:contact@example.com">Email Link</a>
<a href="tel:+1234567890">Phone Link</a>
<a href="https://example.com" target="_blank" rel="noopener">
    Open in New Tab
</a>

<a href="document.pdf" download>Download PDF</a>

<a href="#section1" title="Go to Section 1">Jump to Section</a>
<!-- Link to anchor -->
<a href="#introduction">Go to Introduction</a>

<!-- Anchor target -->
<h2 id="introduction">Introduction</h2>
<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Best Practices

  • Use descriptive link text
  • Add rel="noopener" for external links
  • Use title attributes for additional context
  • Test all links regularly
Previous HTML Lists: Ordered, Unordered, and Description Lists
Next HTML Images and Media: Adding Visual Content