HTML Links
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links – Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document. When you move the mouse over a link, the mouse pointer usually changes to a hand.
Note: A link does not have to be text. A link can be an image or any other HTML element.
HTML Links – Syntax
The HTML <a> tag defines a hyperlink.
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which specifies the destination of the link.
The link text is the visible part that users click.
Example
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
By default, links usually appear as follows:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Tip: Links can be styled with CSS to change their appearance.
HTML Links – The target Attribute
By default, a linked page opens in the same browser window or tab.
The target attribute specifies where to open the linked document.
_self– Opens the document in the same window or tab (default)_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.w3schools.com/" target="_blank">Visit W3Schools!</a>
Absolute URLs vs. Relative URLs
An absolute URL is a full web address, including the protocol.
<a href="https://www.w3.org/">W3C</a> <a href="https://www.google.com/">Google</a>
A relative URL links to a page within the same website.
<a href="html_images.asp">HTML Images</a> <a href="/css/default.asp">CSS Tutorial</a>
Use an Image as a Link
To use an image as a link, place the <img> element inside the <a> element.
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
Link to an Email Address
Use mailto: inside the href attribute to create an email link.
<a href="mailto:someone@example.com">Send email</a>
Button as a Link
An HTML button can be used as a link with JavaScript.
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Link Titles
The title attribute provides extra information, often shown as a tooltip.
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section"> Visit our HTML Tutorial </a>
More on Absolute and Relative URLs
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a> <a href="/html/default.asp">HTML tutorial</a> <a href="default.asp">HTML tutorial</a>
Chapter Summary
- Use the
<a>element to define a link - Use the
hrefattribute to define the link destination - Use the
targetattribute to control where the link opens - Use images or buttons as links when needed
- Use absolute or relative URLs depending on the situation
HTML Link Tags
| Tag | Description |
|---|---|
<a> | Defines a hyperlink |