HTML Links

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

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

The default color of links in HTML is:

  • 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 of the HTML <a> tag with the "href" attribute:

<!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, use the "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 of the HTML <a> tag with the "id" attribute:

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

To apply a hyperlink to an image, you just need to put the image in the <a> tag. This is done with the <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 of the <a> and <img> tags for applying a hyperlink to an image:

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

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

Link titles

The "title" attribute is used for specifying additional information about an element. This information is often displayed as a tooltip text when you move the mouse over the element.

Example of link titles:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Link Title Example</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
    <a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
  </body>
</html>

External Paths

You can reference external pages with URL or a path that is corresponding to the current web page. The example below shows how you can do this:

Example of the HTML <a> tag for referencing an external page with its URL:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>External paths</h1>
    <div>Example of referencing an external page with its URL</div>
    <p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a></p>
  </body>
</html>



Do you find this helpful?

Related articles