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.
A hyperlink is a text or an image you can click on, and jump to another document.
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>
The href attribute specifies the destination address (https://www.noidatut.com/html/)
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text, will send you to the specified address.
 |
The link text does not have to be text. It can be an HTML image or any other HTML element. |
|---|
|
|
Without a trailing slash on subfolder addresses, you might generate two requests to the server. Many servers will automatically add a trailing slash to 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....).
HTML Links - Colors
When you move the mouse over a link, two things will normally happen:
- The mouse arrow will turn into a little hand
- The color of the link element will change
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 styles:
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.
This example will open the linked document in a new browser window or in a new tab:
| Target Value | Description |
|---|---|
| _blank | Opens the linked document in a new window or tab |
| _self | Opens the linked document in the same frame 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 |
If your webpage is locked in a frame, you can use target="_top" to break out of the frame:
Example
<a href="https://www.noidatut.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 »
|
|
border:0 is added to prevent IE9 (and earlier) from displaying a border around the image. |
|---|
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks are practical if your website has long pages.
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="tips">Useful Tips Section</h2>
Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:
<a href="#tips">Visit the Useful Tips Section</a>
Or, add a link to the bookmark ("Useful Tips Section"), from another page:
Chapter Summary
- Use the HTML <a> element to define a link
- Use the HTML href attribute to define the link address
- Use the HTML target attribute to define where to open the linked document
- Use the HTML <img> element (inside <a>) to use an image as a link
- Use the HTML id attribute (id="value") to define bookmarks in a page
- Use the HTML href attribute (href="#value") to link to the bookmark