Skip to content
preservelog

Links Images Media— Links / Navigation

  • Anchor Tags (<a>)
  • Creating hyperlinks
  • Adding titles and targets to links
  • Absolute vs Relative URLs
  • Differences and use cases for each type of URL
  • Linking to External Websites and Internal Pages
  • Creating internal links within a website
  • Adding Email Links
  • Using the mailto: protocol

Certainly! Let’s dive into a detailed explanation of these HTML linking concepts:

  1. Anchor Tags (<a>)

The anchor tag (<a>) is used to create hyperlinks in HTML. It’s one of the most important elements for navigation on the web.

Basic structure:

<a href="URL">Basic structure</a>

Key attributes:

  • href: Specifies the URL of the page the link goes to.
  • title: Provides additional information about the link (appears as a tooltip).
  • target: Specifies where to open the linked document.

Examples:

a. Simple link:

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

b. Link with a title:

<a href="https://www.example.com" title="Learn more about our services"
  >Our Services</a
>

c. Link opening in a new tab:

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

Common target values:

  • _self: Default. Opens the link in the same frame/tab.
  • _blank: Opens the link in a new tab or window.
  • _parent: Opens the link in the parent frame.
  • _top: Opens the link in the full body of the window.
  1. Absolute vs Relative URLs

a. Absolute URLs:

  • Include the full web address, including the protocol (http:// or https://).
  • Always point to the same location regardless of where they’re used.

Example:

<a href="https://www.example.com/about.html">About Us</a>

b. Relative URLs:

  • Specify the location relative to the current page.
  • Change based on the location of the current page.

Example:

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

Use cases:

  • Use absolute URLs for external links.
  • Use relative URLs for internal links within your website. They’re shorter and keep working if you move your site to a different domain.
  1. Linking to External Websites and Internal Pages

a. External links: Always use absolute URLs for external links.

<a href="https://www.externalsite.com">Visit External Site</a>

b. Internal links: Use relative URLs for better maintainability.

Example structure:

website/
├── index.html
├── about.html
└── products/
    └── item1.html

Links in index.html:

<a href="about.html">About Us</a>
<a href="products/item1.html">View Product 1</a>

Link in products/item1.html back to home:

<a href="../index.html">Back to Home</a>
  1. Adding Email Links

Email links use the mailto: protocol to open the user’s default email client.

Basic structure:

<a href="mailto:email@example.com">Send Email</a>

You can also add subject lines and body text:

<a href="mailto:email@example.com?subject=Hello&body=How%20are%20you"
  >Send Email</a
>

Note: Spaces in the subject or body should be replaced with %20.

Best practices for links:

  1. Use descriptive link text. Avoid “click here” or “read more”.
  2. Ensure external links open in new tabs (target="_blank") to prevent users from leaving your site unexpectedly.
  3. Use the title attribute to provide additional context when necessary.
  4. Be cautious with email links as they can be harvested by spambots.
  5. Check your links regularly to ensure they’re not broken.
  6. Use relative URLs for internal links to make your site more portable.

Accessibility considerations:

  • Screen readers announce links, so make sure your link text is meaningful out of context.
  • If a link opens in a new window, indicate this in the link text or title for users who can’t see visual cues.

By mastering these linking techniques, you can create more navigable and user-friendly websites, improving both user experience and SEO.