How to create links in HTML
What is HTML?
Links
Links on web pages allow users to navigate from one page to another.
In HTML, the < a > tag is used for hyperlinks. The syntax is given below:
Syntax
<a href="link">text on the link</a>
In the href attribute, we provide the website link to which a user will be navigated when they click on the text inside the tag in a website.
Example
An example of hyperlinks using the < a > tag is given below:
<a href="https://www.educative.io/">Visit Educative Website</a>
Display of links
In all browsers, links are displayed in the following ways:
- The link is underlined and blue if it is unvisited.
- The link is underlined and purple if it is visited.
- The link is underlined and red if it is active.
Attributes in HTML links
We will now discuss some of the attributes used in the link tag in HTML.
The target attribute
Using the target attribute, we can change where the clicked link opens. By default, it is opened in the current browser window. The target attribute can have the following values:
_self: Opens the document in the same window._blank: Opens the document in a new window or tab._parent: Opens the document in the parent frame._top: Opens the document in the full body of the window.
<a href="https://www.educative.io/" target="_blank">Visit Educative Website</a>
The title attribute
The title attribute in the link tag in HTML is used to specify extra information about an element, if any. The information is mostly displayed when the mouse hovers over the element. The code is displayed below:
<a href="https://www.educative.io/" title="Go to W3Schools HTML section">Visit Educative Website</a>
Using an image as a link
We can use the following code to display a link on an image:
<a href="url"><img src="image_source" alt="" style="width:42px;height:42px;"></a>
Link to email address
We can also send emails to an address by clicking on a link on a website. The code is given below:
<a href="mailto:example@example.com">Send an email</a>
Absolute URLs vs. relative URLs
Absolute links are full web addresses in href attributes.
A local link (a link to a page within the same website) is specified with a relative URL (without the https://www part).
Following is the code:
<h2>Absolute URLs</h2><p><a href="https://www.example.org/"></a></p><p><a href="https://www.google.com/">Google</a></p><h2>Relative URLs</h2><p><a href="html_images.asp">HTML</a></p><p><a href="/css/default.asp">CSS</a></p>
