HTML Links

Websites contain different types of links that take you directly to other pages or allow to navigate to a specific part of the page. The links in HTML are called hyperlinks. They are defined using the <a> tag.

Hyperlinks can be applied to a word, a phrase, an image or any HTML element.

The default color of links in HTML is as follows:

  • unvisited links: underlined and blue
  • visited links: underlined and purple
  • active links: underlined and red

This is default style of links, but you can can remove underline or change the color of the links using CSS styles.

Syntax

The <a> tag comes in pairs, the opening <a> tells where the link should start and the closing </a> indicates where the link ends.

To create a hyperlink, you should use the <a> tag and href attribute, the value of which is the URL, or location, where the link is pointing to.

<a href="url">your text</a>.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Link example</h2>
    <a href="https://www.w3docs.com/">W3Docs.com</a>
  </body>
</html>

Result

In the example above, we used <h2> to define subheadings and the <a> tag to create links. Between <a> and </a> tags we have W3Docs.com. Click on it and it will redirect you to the homepage of our website.

Target Attribute

To open a link in a new page, you need to add target="_blank" to your code. The target attribute specifies where exactly to open the linked page. With target="_blank" the linked page will open in a new window or in a new tab.

<a href="https://www.w3docs.com/" target="_blank">W3Docs.com</a>

It is important not to forget to add trailing slash (/) to the link.

ID Attribute

To navigate to a specific part of the page you should use id attribute.

Here is how you should do it:

  1. Use id attribute to give a name to the part of the page, where user should be redirected after clicking on the link. The value of the attribute can be a word or a phrase that describe that part (if you use a phrase, there should be no spaces - use underscores instead.)
    Ex. <a id="jump"> Here can be any part of the page you want to the user to end up clicking on hyperlink. We used attribute id called "jump".</a>
  1. Create a hyperlink using the id of the link target, preceded by hash (# )
    Ex. <a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id <a>

Now let’s see how this will look like in HTML code:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Link example with id attribute</h2>
    <a id="jump">Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”. </a>
    <a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
  </body>
</html>

Result

How to apply a hyperlink to an image

To apply a hyperlink to an image, you just need to put the image in the <a> tag. This is done with the help of <img> tag, which should have some required attributes:

  1. src - the source of the image
  2. alt - alternative text for the image
  3. width - width of the image
  4. height - height of the image

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">
    <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
    </a>
  </body>
</html>

Result

Click on the picture and you will be redirected to the homepage of W3Docs website.


HTML images will be covered in depth in the next chapter.