HTML Links and Navigation: Creating Hyperlinks

HTML Links and Navigation

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

Basic Links

<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>

Link Attributes

<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>

Anchor Links

<!-- Link to anchor -->
<a href="#introduction">Go to Introduction</a>

<!-- Anchor target -->
<h2 id="introduction">Introduction</h2>

Navigation Menu

<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