01. Links
Introduction
Section titled “Introduction”Links (hyperlinks) are fundamental to the web, connecting pages and resources together. The HTML anchor tag (<a>) creates clickable links that allow users to navigate between pages, jump to sections, download files, and interact with web content. Understanding how to create and use links is essential for web development.
Basic Link Syntax
Section titled “Basic Link Syntax”<a href="https://example.com">Link Text</a>Link Attributes
Section titled “Link Attributes”The destination URL:
<a href="https://example.com">Visit Example</a><a href="/page.html">Internal Page</a><a href="#section">Jump to Section</a>target
Section titled “target”Where to open the link:
<a href="https://example.com" target="_blank">New Tab</a><a href="/page.html" target="_self">Same Window</a>Relationship type:
<a href="https://external.com" rel="noopener noreferrer">External Link</a>Types of Links
Section titled “Types of Links”External Links
Section titled “External Links”<a href="https://example.com">External Site</a>Internal Links
Section titled “Internal Links”<a href="/about.html">About Page</a><a href="../contact.html">Contact</a>Anchor Links
Section titled “Anchor Links”<a href="#section1">Jump to Section 1</a><section id="section1">Content</section>Email Links
Section titled “Email Links”<a href="mailto:email@example.com">Send Email</a>Phone Links
Section titled “Phone Links”<a href="tel:+1234567890">Call Us</a>Best Practices
Section titled “Best Practices”Descriptive Link Text
Section titled “Descriptive Link Text”<!-- Good --><a href="/about">Learn more about us</a>
<!-- Avoid --><a href="/about">Click here</a>Security
Section titled “Security”Use rel="noopener noreferrer" for external links:
<a href="https://external.com" target="_blank" rel="noopener noreferrer">External</a>