Links and Navigation

Hyperlinks, or simply "links," are the fundamental building blocks of navigation on the World Wide Web. They allow users to jump from one page or resource to another. HTML uses the anchor element (<a>) to create these links.

Creating Hyperlinks (<a>)

The anchor element, <a>, is used to define a hyperlink. The most crucial part of a link is its destination, specified by the href attribute.

Basic Syntax:

<a href="destination-url">Clickable Link Text</a>

• <a> tags: Wrap the content that will become clickable.
• href attribute: Specifies the URL (Uniform Resource Locator) or path the link points to. This is required for the link to function.
• Link Text/Content: The content between the opening <a> and closing </a> tags is what the user sees and clicks on. This can be text, an image, or even other HTML elements (though typically it's text or an image).

<a href="https://www.stepbystack.com/">Visit StepByStack</a>

<a href="about.html">
    <img src="images/about-us-icon.png" alt="About Us">
</a>

Key Link Attributes

Besides href, several other attributes modify the behavior and provide context for links:

• href (Hypertext Reference):

  • Purpose: Specifies the destination of the link. This can be an absolute URL (for external sites), a relative URL (for pages within the same site), a page fragment identifier (to link to a specific part of a page), or special protocols like mailto: or tel:.
  • Example: <a href="../contact.html">Contact Us</a>

• target:

  • Purpose: Specifies where the linked document or resource should be opened.
  • Common Values:
    • _self: (Default) Opens the link in the same browser window or tab.
    • _blank: Opens the link in a new browser window or tab. Commonly used for external links or documents like PDFs to keep users on your site.
    • _parent: Opens the link in the parent frameset (used with HTML frames, less common now).
    • _top: Opens the link in the full body of the window, canceling out all frames (used with HTML frames).
    • [framename]: Opens the link in a specific named <iframe>.
  • Example: <a href="https://example.com" target="_blank">External Site (opens in new tab)</a>

• rel (Relationship):

  • Purpose: Describes the relationship between the current page and the linked resource. It provides metadata that browsers or search engines can use.
  • Common Values for <a>:
    • nofollow: Instructs search engines not to follow the link or pass ranking authority (often used for links in comments or paid advertisements).
    • noopener: Important security feature when using target="_blank". Prevents the newly opened page from accessing the original page's window object via JavaScript (window.opener), which could be a security risk.
    • noreferrer: Prevents the browser from sending the referring page's URL (via the HTTP Referer header) to the target site. This also implies noopener.
    • external: Indicates the link is to an external site (often used with nofollow, noopener, noreferrer).
  • Recommendation: For links using target="_blank", it's highly recommended to use rel="noopener noreferrer" for security and privacy.
  • Example: <a href="https://partner-site.com" target="_blank" rel="noopener noreferrer nofollow">Visit Our Partner</a>

• title:

  • Purpose: Provides advisory information about the link destination. Browsers typically display this as a tooltip when the user hovers over the link.
  • Example: <a href="/dashboard" title="Access your user dashboard">My Account</a>

Linking to Pages on the Same Site (Relative URLs)

When linking to other pages within your own website, it's best practice to use relative URLs. Relative URLs specify the path to the linked file relative to the current page's location.

• File in the same directory: Just use the filename.

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

• File in a subdirectory: Specify the subdirectory name, followed by a forward slash /, then the filename.

  <a href="services/web-development.html">Web Development Services</a>

• File in a parent directory: Use ../ to move one level up in the directory structure.

  <a href="../contact.html">Contact</a>

• File relative to the site root: Start the path with a / to indicate the root directory of the website. This is often useful for consistent navigation links.

  <a href="/portfolio.html">Portfolio</a>

TIP

Using relative URLs makes your website more portable – if you move the entire site to a different domain or folder structure, the internal links won't break (as long as the relative structure within the site remains the same).

Linking to External Sites (Absolute URLs)

To link to a page on a different website, you must use an absolute URL. An absolute URL includes the full web address, including the protocol (http:// or https://).

<a href="https://www.google.com">Search with Google</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML Docs</a>

As mentioned before, it's generally good practice to open external links in a new tab using target="_blank" and include rel="noopener noreferrer":

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
    Search Google (opens new tab)
</a>

Linking to Specific Parts of a Page (Page Fragments)

You can create links that jump the user directly to a specific section of the same page or another page. This is done using fragment identifiers (often called anchors or hash links).

Step 1: Mark the Destination Give the HTML element you want to link to a unique id attribute.

<h2 id="section-features">Our Features</h2>
<p>Details about features...</p>
<h2 id="section-pricing">Pricing Plans</h2>
<p>Details about pricing...</p>

Step 2: Create the Link Create an <a> tag where the href value starts with a hash symbol (#) followed by the id of the destination element.

<a href="#section-pricing">Jump to Pricing</a>

<a href="about.html#section-team">Meet the Team (on About page)</a>

When a user clicks these links, the browser will scroll the page to bring the element with the matching id into view.

Email and Telephone Links

HTML allows you to create special links that interact with device capabilities like email clients or phone dialers.

• Email Links (mailto:): Creates a link that, when clicked, opens the user's default email application with the recipient's address pre-filled.

<a href="mailto:support@stepbystack.com">Contact Support</a>

You can also pre-fill the subject and body using ?subject=Your%20Subject&body=Your%20Message appended to the email address. Note that spaces and special characters need to be URL-encoded (e.g., %20 for a space).

<a href="mailto:info@stepbystack.com?subject=Inquiry%20from%20Website&body=Hello%2C%20I%20have%20a%20question...">Send Inquiry</a>

• Telephone Links (tel:): Creates a link that, when clicked (especially on mobile devices), initiates a phone call to the specified number. Use the international dialing format (+ followed by country code and number).

<a href="tel:+1-555-123-4567">Call Us: +1-555-123-4567</a>
<a href="tel:+201001112233">Call +20 100 111 2233</a>