HTML Links
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
HTML Links
❮ Previous
Next ❯
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 arrow will turn into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Try it Yourself »
The href attribute specifies the destination address (https://www.w3schools.com/html/)
of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Note: Without a forward slash at the end of subfolder addresses, you might generate two requests to the server.
Many servers will automatically add a forward slash to the end of the address, and then create a new request.
Local Links
The example above used an absolute URL (a full web address).
A local link (link to the same web site) is specified with a relative URL (without http://www....).
Example
<a href="html_images.asp">HTML Images</a>
Try it Yourself »
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
HTML Link Colors
By default, a link will appear like this (in all browsers):
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
You can change the default colors, by using CSS:
Example
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Try it Yourself »
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
- _blank - Opens the linked document in a new window or tab
- _self - Opens the linked document in the same window/tab as it was clicked (this is default)
- _parent - Opens the linked document in the parent frame
- _top - Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
This example will open the linked document in a new browser window/tab:
Example
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
Try it Yourself »
Tip: If your webpage is locked in a frame, you can use target="_top" to break out of the frame:
Example
<a href="https://www.w3schools.com/html/"
target="_top">HTML5 tutorial!</a>
Try it Yourself »
HTML Links - Image as Link
It is common to use images as links:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image
(when the image is a link).
Link Titles
The title attribute specifies extra information about an element.
The information is most often shown as a tooltip text when the mouse moves over the element.
Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>Try it Yourself »
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web
page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link
to it.
When the link is clicked, the page will scroll to the location with the
bookmark.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump to Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
Example
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Try it Yourself »
External Paths
External pages can be referenced with a full URL or with a path relative to the current web page.
This example uses a full URL to link to a web page:
Example
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Try it Yourself »
This example links to a page located in the html folder on the current web site:
Example
<a href="/html/default.asp">HTML tutorial</a>
Try it Yourself »
This example links to a page located in the same folder as the current page:
Example
<a href="default.asp">HTML tutorial</a>
Try it Yourself »
You can read more about file paths in the chapter HTML
File Paths.
Chapter Summary
- Use the
<a>element to define a link - Use the
hrefattribute to define the link address - Use the
targetattribute to define where to open the linked document - Use the
<img>element (inside <a>) to use an image as a link - Use the
idattribute (id="value") to define bookmarks in a page - Use the
hrefattribute (href="#value") to link to the bookmark
Test Yourself with Exercises!
Exercise 1 »
Exercise 2 »
Exercise 3 »
Exercise 4 »
Exercise 5 »
HTML Link Tags
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
❮ Previous
Next ❯