Links are present on almost all web pages, enabling users to navigate from one page to another with a simple click.
Hyperlinks
HTML links are known as hyperlinks. Clicking on a link allows you to navigate to another document. When you hover over a link, the cursor will change to a hand icon.
Note: A link can be placed on any HTML element like headings, text, images, buttons, etc.Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">Some text</a>The href attribute is the most crucial attribute of the <a> element, as it specifies the destination of the link.
The link text is the visible part that the reader will see. Clicking on the link text will take the reader to the specified URL address.
<a href="https://www.webmastermaze.com">WebmasterMaze</a>By default, links display in the following manner in all browsers:
- An unvisited link is blue and underlined.
- A visited link is purple and underlined.
- An active link is red and underlined.
Note: The above behavior can be overriden via CSS, which is discussed in the next tutorial.The "target" Attribute
By default, when a link is clicked, the linked page will be displayed in the current browser window. To change this behavior, you can specify a different target for the link.
The target attribute is used to specify where to open the linked document. It can have one of the following values:
_self: Default. Opens the page in the same window or tab._blank: Opens the page 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.
Use target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.webmastermaze.com" target="_blank">WebmasterMaze</a>Absolute and Relative URLs
The examples above use an absolute URL, which is a full web address, in the href attribute.
A local link, which is a link to a page within the same website, is specified with a relative URL, without the https://www part:
<h2>Absolute</h2>
<p><a href="https://www.webmastermaze.com/tutorials">WebmasterMaze Tutorials</a></p>
<h2>Relative</h2>
<p><a href="/tutorials">WebmasterMaze Tutorials</a></p>To use the root domain for relative URLs, you should include a preceding "/" before the path, like in the above example. Skipping "/" means that you are referencing the path using the current directory.
For example, if the current directory path is www.webmastermaze.com/tutorials.
Then, the below code will result in www.webmastermaze.com/tutorials/html
<p><a href="html">WebmasterMaze Tutorials</a></p>The below code will result in https://www.webmastermaze.com/html
<p><a href="/html">WebmasterMaze Tutorials</a></p>HTML Links on Other Elements
You can use other HTML elements as links, for example, to create a link using an image, place the <img> tag inside the <a> tag.
<a href="url">
<img src="image.png" alt="WebmasterMaze Tutorials">
</a>To create a link using a heading element, use:
<a href="url">
<h2>Some Heading</h2>
</a>Link to an Email Address
To create a link that opens the user's email program to compose a new email, use mailto: followed by the email address inside the href attribute.
<a href="mailto:someone@example.com">Send email</a>Link Titles
The title attribute provides additional information about an element, typically displayed as a tool-tip when the mouse hovers over the element.
<a href="https://www.webmastermaze.com/tutorials/" title="WebmasterMaze Tutorials and Guides">WebmasterMaze</a>