“Learn about HTML links: create hyperlinks, use different target attributes, images as links, buttons as links, and add titles for extra information.”
What is a Hyperlink?
A hyperlink, often referred to simply as a link, is a reference or navigation element in a document that allows you to jump to a different location when clicked. In HTML, hyperlinks are created using the <a> tag.
The <a> Tag
The <a> tag in HTML is used to define a hyperlink. It has an opening tag <a> and a closing tag </a>. The most important attribute of the <a> element is the href attribute, which specifies the URL of the page the link goes to.
Example Usage
Here is an example of a basic hyperlink:
This creates a hyperlink labeled “Visit Example” that, when clicked, will take the user to the website www.example.com.
Relative and Absolute URLs
The href attribute can contain both relative and absolute URLs. Relative URLs are links that are relative to the current page, while absolute URLs are complete URLs including the protocol and domain.
For example:
- Relative URL: <a href=”page.html”>Link to Page</a>
- Absolute URL: <a href=”https://www.example.com”>Visit Example</a>
Link Target Examples
_self: Opens the link in the same tab (default)
_blank: Opens the link in a new tab
_parent: Opens the link in the parent frame
_top: Opens the link in the full body of the window
HTML Links – Use an Image as a Link
You can also use an image as a hyperlink. Here’s how:
This creates an image that, when clicked, will take the user to the website
Button as a Link
You can create a button that acts as a link using similar syntax:
Clicking the button will take the user to the website www.example.com.
Link Titles
The title attribute specifies extra information about the element, such as a tooltip. It provides additional context when users hover over the link.
When you hover over the link above, you’ll see the additional information provided by the title attribute.
Conclusion
Hyperlinks are fundamental elements of the web that allow users to navigate between different resources. By using the <a> tag in HTML, you can create links to other pages, websites, or parts of the same page.
Interactive Example
Enter your HTML code below and click “Render” to see the output: