Skip to main content

HTML Links | Introduction to Creating Hyperlinks in HTML

HTML links are used to create clickable elements on a web page that take the user to another web page or to a specific location within the same web page.

Links are created using the <a> tag in HTML, which stands for "anchor".

As an example:

Editor

Loading...

In this example:

  • The <a> tag is used to define a hyperlink, and the href attribute specifies the URL of the page that the link should point to. In this case, the URL is "https://skillupwards.com".
  • When a user clicks on the hyperlink, the web browser will navigate to the specified URL.
  • The text between the opening and closing <a> tags ("Visit skillupwards") is what the user will see as the clickable link.

HTML Target Attribute​

The HTML target attribute is used to specify where a link should be opened when clicked.

When a user clicks on a link, the default behavior is to open the linked page in the same window or tab that the user is currently using.

However, the target attribute can be used to override this behavior and open the link in a different window or tab, or even in a specific frame within a web page.

The target attribute can take several values:

  • _self: This is the default value and it opens the linked page in the same window or tab that the user is currently using.

  • _blank: This value opens the linked page in a new window or tab.

  • _parent: This value opens the linked page in the parent frame of the current frame. If the current frame has no parent, it behaves like _self.

  • _top: This value opens the linked page in the full body of the window, canceling any frames that may be in use.

  • <frame name>: This value opens the linked page in the frame with the specified name.

Here is an example of how each value of the target attribute works:

Editor

Loading...

Absolute URLs vs. Relative URLs​

URLs (Uniform Resource Locators) are used to specify the address of a resource on the web, such as a web page, an image, or a video. URLs can be either absolute or relative, depending on how they are defined.

  • Absolute URLs: An absolute URL includes the full address of a resource on the web, including the protocol, domain name, and path. For example, "https://www.example.com/images/logo.png" is an absolute URL.

As an example:

<a href="https://www.example.com/about.html">About Us</a>
  • Relative URLs: A relative URL specifies the location of a resource relative to the current web page. Relative URLs are used when you want to link to a resource on the same domain or server, or when you want to link to a resource within the same web page.

Relative URLs can be specified in two ways:

  • Relative to the current page: This type of relative URL specifies the location of a resource relative to the current web page. For example, if the current web page is located at "https://www.example.com/blog/index.html" and you want to link to an image located in the "images" directory on the same domain, you can use a relative URL like "images/logo.png".

As an example:

<a href="contact.html">Contact Us</a>
  • Relative to the root directory: This type of relative URL specifies the location of a resource relative to the root directory of the website. For example, if the root directory of the website is "https://www.example.com/" and you want to link to the "about" page located in the "pages" directory, you can use a relative URL like "/pages/about.html".

As an example:

<a href="/blog/index.html">Blog</a>

You can use an image as a link in HTML by wrapping the <img> tag inside an <a> tag.

As an example:

Editor

Loading...

In this example:

  • When the user clicks on the image, the browser will navigate to the URL specified in the href attribute of the <a> tag.

To create a link that opens the user's email client with a pre-populated email address, you can use the mailto URI scheme in the href attribute of an <a> tag.

As an example:

Editor

Loading...

In this example:

  • The href attribute specifies the mailto URI scheme, followed by the email address of the recipient, which in this case is "contact@example.com".
  • When the user clicks on the link, their email client will open with a new message pre-populated with the recipient's email address.

You can also include additional parameters in the mailto URI scheme, such as a subject line and message body.

As an example:

Editor

Loading...

In this example:

  • The href attribute includes two additional parameters in the mailto URI scheme.
  • The subject parameter specifies the subject line of the email, which is "Inquiry" in this case.
  • The body parameter specifies the message body of the email, which is "Hello there," in this case.
info

Spaces in the message body are replaced with %20 to comply with URI encoding rules.

To create a button that functions as a link in HTML, you can use the <button> tag and wrap it inside an <a> tag.

As an example:

Editor

Loading...

You can add a title attribute to a link (<a> tag) to provide additional information about the link. The text specified in the title attribute is displayed as a tooltip when the user hovers their mouse over the link.

As an example:

Editor

Loading...