X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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 a 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

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.




Do you find this helpful?

Related articles