HTML Links

HTML links, also known as hyperlinks are used to seamlessly navigate between one web page to another.

The syntax looks like the one below, where the link display content can be of any type below

  • Simple text
  • Image
  • Container with any content
<a href="url">Link display content</a>

By default, a link text can have different styles based on its state as mentioned below. However, these styles can be changed using CSS.

  • An unvisited link is underlined and blue in color
  • A visited link is underlined and purple in color
  • An active link is underlined and red in color

Link Title Attribute

The attribute title provides extra information about a link, which is displayed as a tooltip upon mouse hover.

<a href="https://randomcodez.com" title="Random Codez Official Website">Visit Our Website</a>

Link Target Attribute

By default, when a hyperlink is clicked, the target web page is displayed in the current browser window.

However, we can change this behavior using an additional attribute target with any of the below values.

  • target="_self" (default, opens target page in the same window/tab)
  • target="_blank"
  • target="_parent"
  • target="_top"
<a href="https://randomcodez.com" target="_blank">Random Codez Website</a>

Image as a link

As mentioned above, the link display content can also be an image, which can be defined as below.

<a href="https://randomcodez.com" target="_blank">
    <img src="logo.png" alt="Random Codez logo" style="width:50px; height:50px;">
</a>

Link Email Address

An email address can be linked to a link, which when clicked opens the default user's email program to let them draft an email with to address auto-populated with the email address specified in the link.

<a href="mailto:feedback@randomcodez.com">Send us an email</a>

Use Cases

There are different use cases for HTML links, which are discussed separately in the below articles. These can be referred to for more details.

Examples

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Links</h1>
    <hr>
    <h2>Basic Use</h2>
    <a href="https://randomcodez.com">Basic link</a>
    <h2>Link with title attribute</h2>
    <a href="https://randomcodez.com" title="Random Codez">Link with title</a>
    <h2>Links with target attribute</h2>
    <a href="https://randomcodez.com" target="_self">Link with target(_self, which is default)</a><br>
    <a href="https://randomcodez.com" target="_blank">Link with target(_blank)</a><br>
    <a href="https://randomcodez.com" target="_parent">Link with target(_parent)</a><br>
    <a href="https://randomcodez.com" target="_top">Link with target(_top)</a><br>
    <h2>Image as a link</h2>
    <a href="https://randomcodez.com">
        <img src="https://randomcodez.com/assets/logo/logo.png" alt="Random Codez logo" style="width:100px; height:80px;">
    </a>
    <h2>Link Email Address</h2>
    <a href="mailto:feedback@randomcodez.com">Send us an email</a>
</body>
</html>

Overall

HTML Links are very helpful and have different use cases, so make sure to understand and use them as needed.

Related Articles