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
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>.
<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>
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.
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.
To navigate to a specific part of the page you should use id attribute.
Here is how you should do it:
- 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>
- 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:
<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>
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:
- src - the source of the image
- alt - alternative text for the image
- width - width of the image
- height - height of the image
<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>
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.