Introduction to HTML Links

HTML links, created using the <a> (anchor) element, allow users to navigate between web pages, jump to sections within a page, or access external resources. Links are essential for web navigation and user interaction.

• Purpose: Connects content across the internet or within a site.
• Basic Structure: <a href=”URL”>Link Text</a>, where href specifies the destination.

Example: A simple link:

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

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

2. The href Attribute

The href (hypertext reference) attribute defines the link’s destination. It can point to:

• External URLs: Full web addresses (e.g., https://www.google.com).
• Internal Pages: Relative paths (e.g., about.html for a file in the same folder).
• File Downloads: Files like PDFs (e.g., document.pdf).
• Email or Phone: Special protocols like mailto:email@example.com or tel:+1234567890.

Example: Different href uses:

<a href="https://www.example.com">External Site</a>
<a href="contact.html">Contact Page</a>
<a href="files/report.pdf">Download PDF</a>
<a href="mailto:info@example.com">Email Us</a>

<a href="https://www.example.com">External Site</a>
<a href="contact.html">Contact Page</a>
<a href="files/report.pdf">Download PDF</a>
<a href="mailto:info@example.com">Email Us</a>

3. Other Link Attributes

Additional attributes enhance link functionality:

• target: Specifies where the link opens.
  • _blank: New tab/window.
  • _self: Same tab (default).
• title: Displays a tooltip on hover for extra context.
• download: Prompts file download instead of navigation (used with files).
• id: Links to a specific section on a page when paired with #id.

Example: Links with attributes:

<a href="https://www.example.com" target="_blank" title="Opens in new tab">Visit Site</a>
<a href="document.pdf" download>Download File</a>
<a href="#section1">Jump to Section</a>

<a href="https://www.example.com" target="_blank" title="Opens in new tab">Visit Site</a>
<a href="document.pdf" download>Download File</a>
<a href="#section1">Jump to Section</a>

4. Linking to Page Sections

Use the id attribute to create anchors within a page, allowing links to jump to specific sections. The href value uses # followed by the id.

Example: Section linking:

<a href="#about">Go to About</a>
<h2 id="about">About Us</h2>
<p>This is the about section.</p>

<a href="#about">Go to About</a>
<h2 id="about">About Us</h2>
<p>This is the about section.</p>

5. Best Practices for Links

• Descriptive Text: Use clear link text (e.g., “Read More” instead of “Click Here”).
• Accessibility: Ensure links are keyboard-navigable and screen-reader-friendly.
• Avoid Broken Links: Test href values regularly.
• Consistent Styling: Use CSS to make links visually distinct (covered in later lessons).

Example: Accessible link:

<a href="services.html" title="View our services">Explore Our Services</a>

<a href="services.html" title="View our services">Explore Our Services</a>