Links and anchors

Links and Anchors

Creating Links

Links allow users to navigate to other web pages, files, locations within the same page, or even perform actions like sending an email. They are created using the <a> (anchor) tag.

Basic Link:

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

This creates a link that, when clicked, will take the user to https://www.example.com. The text "Visit Example" is what the user sees and clicks on.

Attributes:

• href: Specifies the destination URL. This is required.
• target: Specifies where to open the linked document.
  • _self (default): Opens the link in the same frame/window.
  • _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.
• title: Provides extra information about the link, displayed as a tooltip when the user hovers over it.
• rel: Specifies the relationship between the current document and the linked document. Important for SEO and accessibility. Common values include:
  • nofollow: Tells search engines not to follow the link.
  • noopener: Improves security when using target="_blank".
  • noreferrer: Prevents the linked page from knowing which page the user came from.

Example with Attributes:

<a href="https://www.example.com" target="_blank" title="Go to Example Website" rel="noopener noreferrer">Visit Example</a>

Linking to Files

You can link to files (like PDFs, images, or documents) using the href attribute.

<a href="document.pdf">Download PDF</a>
<a href="image.jpg">View Image</a>

Linking to Sections Within a Page (Anchors)

Anchors allow you to create links to specific sections within the same page. This is useful for long pages with distinct sections.

1. Define the Anchor:

Use the id attribute on the element you want to link to.

<h2 id="section1">Section 1</h2>
<p>Content of section 1...</p>

<h2 id="section2">Section 2</h2>
<p>Content of section 2...</p>

2. Create the Link:

Use the href attribute with a # followed by the id of the anchor.

<a href="#section1">Go to Section 1</a>
<a href="#section2">Go to Section 2</a>

When a user clicks these links, the browser will scroll to the corresponding section on the page.

Email Links

You can create links that open the user's email client with a pre-filled "to" address.

<a href="mailto:email@example.com">Email Us</a>
<a href="mailto:email@example.com?subject=Inquiry&body=Hello,">Email Us with Subject</a>

The mailto: scheme is used. You can also include a subject and body using query parameters.

Styling Links with CSS

Links can be styled using CSS pseudo-classes to indicate their state:

• a:link: The link has not been visited.
• a:visited: The link has been visited.
• a:hover: The mouse pointer is over the link.
• a:active: The link is being clicked.

Example CSS:

a:link {
  color: blue;
  text-decoration: none;
}

a:visited {
  color: purple;
}

a:hover {
  text-decoration: underline;
}

a:active {
  color: red;
}

Important Considerations:

• Accessibility: Ensure link text is descriptive and clearly indicates the destination. Avoid vague phrases like "click here." Use title attributes for additional context.
• SEO: Use relevant keywords in link text for search engine optimization.
• Security: When using target="_blank", always include rel="noopener noreferrer" to prevent potential security vulnerabilities.
• Usability: Visually distinguish links from surrounding text (e.g., using color and underline). Provide clear feedback on hover and active states.