HTML Links and Anchors

HTML Links and Anchors: Connecting the Web

Links are what make the web "web-like." They connect pages and resources together. Let's explore how to create them in HTML.

1. Basic Link Syntax

<a href="url">Link Text</a>

2. Types of Links

Absolute URL (external site)

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

Relative URL (internal page)

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

Email Link

<a href="mailto:contact@example.com">Email Us</a>

Phone Link

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

3. Link Attributes

target="_blank" (open in new tab)

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

title (tooltip text)

<a href="image.jpg" title="View larger image">View Image</a>

download (force download)

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

4. Anchor Links (Page Jump)

<!-- Create the anchor point -->
<h2 id="section1">Section 1</h2>

<!-- Link to the anchor -->
<a href="#section1">Jump to Section 1</a>

5. Linking to File Types

<!-- PDF -->
<a href="doc.pdf">View PDF</a>

<!-- Image -->
<a href="photo.jpg">View Photo</a>

<!-- ZIP -->
<a href="files.zip">Download Files</a>

Mastering links is essential for creating interconnected, user-friendly websites!