HTML Links - Hyperlinks
HTML links are considered to be hyperlinks.
By clicking on a link, you can jump to another document.
Note: A link need not be a text alone. It also can be an image or any other HTML element.
HTML Links - Syntax
In HTML, links are always defined using the <a> tag:
Example
<a href="url">link text</a>
Example
<a href="http://daks.me">Visit
our HTML tutorial</a>
The href attribute is used to specify the destination address (http://daks.me) of the link.
The link text is the visible part (Visit our HTML tutorial).
By clicking on the link text you can go to the specified address.
Note: Without having a forward slash on subfolder addresses, you might have to generate two requests to the server. Many servers will usually do an additon of a forward slash to the address, and creates a new request.
Local Links
The example used above is using an absolute URL (A full web address).
A local link (link to the same web site) is can also be specified with a relative URL (without http://www....).
HTML Links - Colors
When you move the mouse over a link, two things will normally happen:
By default, a link will appear like this (in all browsers):
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 is used to specify that the linked document should be opened at which place.
The target attribute will be having one of the following values:
This example will be opening the linked document in a new browser window/tab:
Tip: If your webpage is kept locked to a frame, by using target="_top" you can break out of the frame:
HTML Links - Image as Link
It is very common to make use of images as links:
Example
<a href="html_home.php">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
Try it Yourself
Note: border:0; is added for preventing IE9 (and earlier) to display a border around the image (when the image clicked is a link).
HTML Links - Create a Bookmark
HTML bookmarks are utilised for allowing readers to jump and read some other specific parts of a Web page.
Bookmarks are very useful when your webpages are very long.
For making a bookmark, you must be first create the bookmark, and then link should be added to it.
If the link is clicked, the page will be scrolling to the specified location with the bookmark.
Example
First, creating a bookmark along with the id attribute:
<h2 id="tips">Useful Tips Section</h2>
Then, adding a link to the bookmark ("Useful Tips Section"), which is done within the same page:
<a href="#tips">Visit the Useful Tips Section</a>
Or, addition of a link to the bookmark ("Useful Tips Section"), from another page:
Example
First, creating a bookmark with the required id attribute:
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Chapter Summary