HTML Links - Hyperlinks
HTML links are called hyperlinks and it found in nearly all web pages.
The HTML a
tag (or anchor tag) defines a hyperlink, which is used to link or navigate from one page to another.
Hyperlinks allow linking to web-based HTML files web pages, text files, photos, documents, videos, audio files, etc on the web.
Example
I'm creating a link to
the HTML page from Wikipedia.
Result of the above query
HTML Links - The href Attribute
The most important attribute of the HTML a
tag is the href
attribute, which indicates the link's destination (web URL).
It has the following syntax:
link text or any content
A target URL may be an internet site, blog, document, email address, telephone number, photo/video, etc
When the user clicks on the link, the browser goes (specified in the href
attribute) to the target URL.
Note: If the href
attribute is not specified in the a
element, the a
tag will not be a hyperlink.
A text link is created by adding a text, an image, heading, list, table, or any other HTML elements inside of an a
element.
Note: It is not necessary for the "link text" to be text. An image or any other HTML element can be used as a link text.
Tip: You can use href="#top" or href="#" to link to the top of the current page!
Example
I'm creating a link to
the HTML article page from Wikipedia.
Result of the above query
Use clear link wording
It is very important that you describe to the reader exactly what you are linking to by your link text.
The user can quickly figure out what you're linking to by looking at the link text.
Note: It's a good thing to include in your link text important keywords related to the linked content.
Example
Good link text: Download Firefox
Result of the above query
Example
Bad link text: Click here to download Firefox
Click here
to download Firefox
Result of the above query
Remember
- Don't repeat the URL as part of the link text.
- Don't say "link" or "links to" in the link text.
- Don't use the same link text for multiple URLs on the same page.
Block level links
As mentioned before, almost any content (an image, a heading, a table, etc) not only text, can be made as a link text.
For example, If you want to convert an image as a link, use the a
element, and reference the image file with the img
element.
Result of the above query
Absolute URLs vs. Relative URLs
An absolute URL (web address) starts with a protocol name like "HTTP/HTTPS/FTP" and a domain name.
A full web address includes the protocol name domain name and the specified filename with path.
Note: The absolute URL must exist on the internet and be active.
Example
Absolute URLs
Result of the above query
A relative URL will not include "HTTP/HTTPS" and domain name.
It includes only the specified file name and path in the href
attribute.
Note: The relative URL must be available from the same website and cannot provide a link from another website as a relative URL.
Example
Relative URLs
Result of the above query
HTML Links - The target Attribute
The target
attribute specifies where to display or open the linked URL.
By default, the linked document will be opened in the current browsing context (a tab, window, or iframe).
You must specify a different target value for the associated document to modify this.
The target
attribute can have one of the following values:
self
- Default. Open the linked resource in the current browsing context (window/tab/iframe).blank
- Opens the linked resource in a new window or tab (usually a new tab, but users can configure browsers to open a new window instead).parent
- Opens the resource in the parent frametop
- Opens the resource in the full body of the window
Example
Use target="_blank" to open the linked URL page in a new browser window or tab:
Visit Simmanchith Homepage!
Result of the above query
Related Links
HTML Links - The title Attribute
The title
attribute provides some additional information about the linked URL.
The additional data specifies which kind of information available or something related to that on the linked page.
The title is usually displayed as a tooltip when the mouse moves across the element.
Example
Visit Simmanchith Website
on the web.
Result of the above query
This gives us the following result and hovering over the link displays the title as a tooltip.
HTML Links - The download Attribute
The download
attribute is used to download/save the linked document in the user machine instead of opening it in the user browser.
The linked document will be downloaded when a user clicks on the hyperlink.
You can use the download
attribute to provide a default filename for the document which is being downloaded by user.
syntax
After the file has been downloaded by the user, the optional value of the download
attribute will be its new file name.
Note: If the value is omitted, the original filename is used to save the document.
Here's an example with a download link to the latest Windows version of Firefox:
Download Simmanchith Website Logo
Result of the above query
Note: The download works only on URLs of the same website.
Remember - Linking to non-HTML resources
When linking to a resource that can be downloaded or streamed, make sure to use clear words.
For example, downloading a pdf or a word document, streaming video files, etc.
After reading the link text the user will understand the given link and what the link does.
Example
Download the sales report (PDF, 10MB)
Result of the above query
Download the sales report (PDF, 10MB)
Watch the video (stream opens in separate tab, HD quality)
Play the car game (requires Flash Player)Link to an Email Address
Instead of linking to a URL, you can create links that when clicked, open the user's email program and send a new email message.
You can use mailto: URL scheme inside href
attribute to do that.
This results in a link that looks like this: Send email to nowhere.
In the above example, the given email address specifies to whom (recipient email address) you want to send an email.
The email address of the recipient is optional. If you leave it out, a new outgoing email will be created with no recipient address.
They are often used as "share" links on a webpage.
Related Links
Create a Bookmark in HTML
A bookmark is a link to a specific section on a page.
It refers only to a specific section (text, heading, table, image, etc) on a page instead of referring to a whole page.
Bookmarks can be useful if a web page contains very long content.
It can be created by HTML links.
To create a bookmark - Add an id
attribute to which section you want to create a bookmark, and then add a link to it.
Example
First, use the id
attribute to create a bookmark:
Chapter 4
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
Jump to Chapter 4 (Same page)
You can also add a link to a bookmark on another page:
Jump to Chapter 2 (Another page)
HTML Links and CSS
CSS properties can be applied to HTML hyperlinks.
Using CSS on HTML links, you can change the link color, remove the underline that appears below links, and so on.
HTML Links - Remove Underline
The CSS attribute text-decoration is used to remove the underscores in an HTML link.
syntax
text-decoration: none;
Example
About Us
The result of above query
HTML Link Colors
The color of an HTML link depends (link states) on whether it has been visited, is unvisited, or is active.
By default, a link will display like this (in all browsers):
Unvisited links are highlighted in blue color, Visited links are highlighted in purple color, and Active links are highlighted in red color.
Example
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined: