HTML Links

“Learn about HTML links: create hyperlinks, use different target attributes, images as links, buttons as links, and add titles for extra information.”

HTML Hyperlinks Tutorial

What is a Hyperlink?

A hyperlink, often referred to simply as a link, is a reference or navigation element in a document that allows you to jump to a different location when clicked. In HTML, hyperlinks are created using the <a> tag.

The <a> Tag

The <a> tag in HTML is used to define a hyperlink. It has an opening tag <a> and a closing tag </a>. The most important attribute of the <a> element is the href attribute, which specifies the URL of the page the link goes to.

Example Usage

Here is an example of a basic hyperlink:

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

This creates a hyperlink labeled “Visit Example” that, when clicked, will take the user to the website www.example.com.

Relative and Absolute URLs

The href attribute can contain both relative and absolute URLs. Relative URLs are links that are relative to the current page, while absolute URLs are complete URLs including the protocol and domain.

For example:

  • Relative URL: <a href=”page.html”>Link to Page</a>
  • Absolute URL: <a href=”https://www.example.com”>Visit Example</a>

Link Target Examples


_self: Opens the link in the same tab (default)

<a href=”https://www.example.com” target=”_self” class=”example-link”>Visit Example</a>

_blank: Opens the link in a new tab

<a href=”https://www.example.com” target=”_blank” class=”example-link”>Visit Example</a>

_parent: Opens the link in the parent frame

<a href=”https://www.example.com” target=”_parent” class=”example-link”>Visit Example</a>

_top: Opens the link in the full body of the window

<a href=”https://www.example.com” target=”_top” class=”example-link”>Visit Example</a>

HTML Links – Use an Image as a Link

You can also use an image as a hyperlink. Here’s how:

<a href=”https://www.example.com”> <img src=”image.jpg” alt=”Description of Image”> </a>

This creates an image that, when clicked, will take the user to the website

Button as a Link

You can create a button that acts as a link using similar syntax:

<a href=”https://www.example.com” class=”example-button”>Click Me</a>

Clicking the button will take the user to the website www.example.com.

Link Titles

The title attribute specifies extra information about the element, such as a tooltip. It provides additional context when users hover over the link.

<a href=”https://www.example.com” title=”This is the title attribute”>Hover over me</a>

When you hover over the link above, you’ll see the additional information provided by the title attribute.

Conclusion

Hyperlinks are fundamental elements of the web that allow users to navigate between different resources. By using the <a> tag in HTML, you can create links to other pages, websites, or parts of the same page.

Interactive Example

Enter your HTML code below and click “Render” to see the output:

Rendered Output

Leave a Comment