Links
Almost every webpage has links. Users are able to navigate between pages by clicking on links.
HTML Links - Hyperlinks
Hyperlinks are links in HTML.
A link can be clicked to navigate to a different document.
The mouse arrow changes to a tiny hand when you move the cursor over a link.
HTML Links - Syntax
A hyperlink is defined by the HTML <a> tag. Its syntax is as follows:
<a href="url">link text</a>
The href attribute, which shows the destination of the link, is the most significant property of the <a> element.
The portion that the reader will see is the link text.
The reader will be taken to the designated URL address when they click on the link text.
Example
This example shows how to create a link to CodingAsk.com:
<a href="https://www.codingask.com/">Visit CodingAsk.com!</a>
Links will show up in all browsers as follows by default:
- A blue-underlined link has not been viewed.
- A clicked link appears purple and underlined.
- A link that is active is highlighted in red.
HTML Links - The target Attribute
The linked page will open in the current browser window by default. You need to give the link another target if you want to change this.
Where the linked page should open isspecified by the target attribute.
One of the following values can be assigned to the target attribute:
- _self – Default. Opens the document in the same window/tab as it was clicked
- _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
Example
Use target=”_blank” to open the linked document in a new browser window or tab:
<a href="https://www.CodingAsk.com/" target="_blank" rel="noopener">Visit CodingAsk.com!</a>
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the “https://www” part):
Example
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></p>
<p><a href="https://www.google.com/" target="_blank" rel="noopener">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
HTML Links - Use an Image as a Link
Simply include the <img> tag within the <a> tag to utilize an image as a link:
Example
<a href="default.asp">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Html Tutorial" style="width:42px;height:42px;" title="Links 2" data-lazy-src="smiley.gif"><noscript><img decoding="async" src="smiley.gif" alt="Html Tutorial" style="width:42px;height:42px;" title="Links 2"></noscript>
</a>
Link to an Email Address
To create a link that opens the user’s email software and allows them to send a new email, use mailto: inside the href attribute:
Example
Use of CSS color, font-family and font-size properties
<a href="mailto:some@example.com">Send email</a>
Button as a Link
You need to include some JavaScript code in order to use an HTML button as a link.
You can define what occurs at specific events, such a button click, using JavaScript:
Example
<button>HTML Tutorial</button>
Link Titles
An element’s title attribute provides further details about it. The data is often displayed as a tooltip text when the element is being moved with the mouse.
Example
<a href="https://www.codingask.com/html/" title="Go to CodingAsk HTML section">Visit our HTML Tutorial</a>
More on Absolute URLs and Relative URLs
Example
Use a full URL to link to a web page:
<a href="https://www.codingask.com//html/default.asp">HTML tutorial</a>
Example
Link to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>
Example
Link to a page located in the same folder as the current page:
<a href="default.asp">HTML tutorial</a>
Chapter Summary
- Use the <a> element to define a link
- Use the href attribute to define the link address
- Use the target attribute to define where to open the linked document
- Use the <img> element (inside <a>) to use an image as a link
- Use the mailto: scheme inside the href attribute to create a link that opens the user’s email program
HTML Link Tags
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
links
hyperlinks
link syntax
target attribute
absolute URLs
relative URLs
image as link
mailto link
button as link
link titles
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
HTML links, also known as hyperlinks, are a fundamental element of web pages that allow users to navigate between different content. The basic syntax for creating a link in HTML is:
The `href` attribute specifies the destination URL of the link, which can be an absolute URL (e.g., https://www.example.com) or a relative URL (e.g., /about.html).
The `target` attribute can be used to control how the linked content is opened, such as in a new tab or window. Common values for `target` include `_blank` (open in new tab/window), `_self` (open in current tab/window), and `_parent` or `_top` (open in parent/topmost frame).
Links can point to various content types beyond web pages, such as email addresses (using the `mailto:` protocol) or downloadable files. Images can also be used as clickable links by placing the “ tag within the “ tag.
Advanced link features include adding `title` text that displays on hover, and using “ elements instead of “ tags for link-like functionality.
Understanding the different types and use cases of HTML links is crucial for creating effective and accessible web navigation.
