Skip to content
preservelog

Links / Navigation

We are going to look at one of the most important elements for navigation on the web. HTML itself means Hypertext Markup Language, so you can imagine how deeply baked in hyperlinks are into HTML.

Let us look at the wikipedia definition of hypertext

Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access. Hypertext documents are interconnected by hyperlinks, which are typically activated by a mouse click, keypress set, or screen touch. Apart from a text, the term “hypertext” is also sometimes used to describe tables, images, and other presentational materials with integrated hyperlinks. Hypertext is one of the key underlying concepts of the World Wide Web, where Web pages are often written in the Hypertext Markup Language (HTML). As implemented on the Web, hypertext enables the easy-to-use publication of information over the Internet.

As described above, In computing, a hyperlink, or simply a link, is a digital reference providing direct access to data by a user’s clicking or tapping.

Let us look at how we can use hyperlinks by ourselves.

Anchor Tags (<a>)

Section titled “Anchor Tags (<a>)”

The anchor tag (<a>) is used to create hyperlinks in HTML.

The anchor tag has three major attributes.

a.href attribute specifies the URL of the page the link goes to when users click on the link element. In the below example we have give attribute value for href attribute as https://preservelog.com/. When clicked, it gets redirected to the URL.

b. title attribute provides additional information about the link it appears as a tooltip while hovering on the link.


c. target attribute specifies where to open the linked document, in the above example it opens in the same tab, if the document needs to be opened differently, you can specify one of 4 predefined attribute values which we will discuss below.

Section titled “1. Simple link:”
<a href="https://preservelog.com/">Go to preservelog</a>

it will look like this, you can try clicking on it.

Go to preservelog
Section titled “2. Link with a title:”

The title attribute content appears as a tooltip when the user hovers over the link in most browsers. It enhances usability and accessibility.

<a
  href="https://preservelog.com/"
  title="Your go to place for learning technologies"
  >Go to preservelog</a
>

It will get rendered like below you can hover over the Go to preservelog and see the title displayed.

Go to preservelog
Section titled “3. Link opening in a new tab:”

If you clicked on any of the above two links, you might have gotten redirected to the home page. and you might have gone through the sidebar

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

It will get rendered like below, if you click on it, preservelog will open on new tab.

Open preservelog in New Tab

Following are the common target attribute 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, useful if you are working with nested iframes. If the document is nested within an iframe or another frame, the linked content will be loaded in the immediate parent frame that encloses the current frame.
  • _top: Opens the link in the full body of the window, useful if you are working with nested iframes. When you want to break out of all nested frames/iframes and load the link in the main browser window, avoiding any constrained views.

Absolute vs Relative URLs

Section titled “Absolute vs Relative URLs”

a. Absolute URLs:

Absolute URLs, has the full web address, including the protocol (http:// or https://). It will always point to the same location regardless of where they’re used

Using absolute URLs is commonly used for external links.

<a href="https://preservelog.com/html/links-images-media/links-navigation/">
  Absolute URL: Preservelog -> Links / Navigation
</a>

It will get rendered like below, if you click on it, you can see the link redirecting to same page.


Absolute URL: Preservelog -> Links / Navigation

b. Relative URLs:

Specify the location relative to the current page. Change based on the location of the current page. Use relative URLs for internal links within your website. They’re shorter and keep working if you move your site to a different domain since they are internal links.

<a href="/html/links-images-media/links-navigation/"
  >Relative URL: Preservelog -> Links / Navigation</a
>

It will get rendered like below, if you click on it, you can see the link redirecting to same page.


Relative URL: Preservelog -> Links / Navigation
Section titled “Enhancements on Link element”
Section titled “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.

if you click on the below link you can see your email client opening with, to field, subject and body autofilled.


Send Email

Adding phone numbers

Section titled “Adding phone numbers”

To create a clickable link for phone numbers, you can use the tel: protocol. This allows users to tap the link and open their phone’s dialer with the number prefilled. Like email links, this is helpful for creating mobile-friendly websites where users can easily initiate a call by clicking the link.Spaces in the subject or body should be replaced with %20.

<a href="tel:+1234567890">+1 (234) 567-890</a>

+1 (234) 567-890

Accessibility considerations

Screen readers announce links, so make sure your link text is meaningful and gives proper 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.