HTML email links allow users to click on a link and automatically open their default email client with a new message composed to the specified email address.
This is done using the mailto: protocol in the href attribute of an <a> (anchor) tag.
You can also predefine the subject and body of the email using the mailto: protocol. This is done by appending ?subject= and &body= to the email address. Spaces and special characters in the subject and body should be URL-encoded. For example, spaces are encoded as %20.
Syntax
The following HTML code creates a clickable email link that opens the user’s default email client to send an email to the specified address:
Adding an HTML email link to your webpage is straightforward, but it can expose your email address to spam. Automated programs, known as email harvesters, can scan web pages for email addresses and add them to spam lists. This can result in a significant increase in unwanted emails.
Images can also be used as links in HTML, which means by clicking the images we can navigate to other web pages or resources. HTML image links are very useful in creating websites like photo galleries, portfolios, online stores, and so on. In this article, we will learn how to use images to create hyperlinks. It is similar to the HTML – Text Link.
Creating Image Links
To create an HTML image link, we need an <img> tag and an anchor element. The image element is used to display the image on the web page, and the anchor element is used to specify the destination URL of the link.
Here, the href attribute of <a> element contains the destination link and src attribute of <img> tag contains the path of image.
Syntax
Here, the href attribute of the <a> element contains the destination link, and the src attribute of the <img> tag contains the path of the image.
Here are some example codes that explain the usage of image links in HTML:
Create Hyperlink for an Image
Image Link with Tooltip
Mouse-Sensitive Images
Server-Side Image Maps
Client-Side Image Maps
Create Hyperlink for an Image
In the following example, we are using an image as a hyperlink. If you execute the below code, an image will be displayed, and if we click on it, the page will redirect to the home page of Tutorials Point.
You can also define a tooltip for an image link; when someone moves the mouse over the linked image, it will display a tooltip. To set the tooltip, you can set the title attribute of the <a> tag.
Example
The following example demonstrates a tooltip to an image link:
Open Compiler
<!DOCTYPE html><html><head><title>Image Hyperlink Example</title></head><body><a href="https://www.tutorialspoint.com" title="Go to TutorialsPoint"><img src="/html/images/logo.png"
In the above example, hovering over the logo will display the tooltip " Go to TutorialsPoint".
Mouse-Sensitive Images
The HTML and XHTML standards provide a feature that lets us embed several different links inside a single image. We can create different links on the single image based on different coordinates available on the image.
Once the links are attached to all coordinates, clicking on the different parts of the image redirects us to target documents. Such mouse-sensitive images are known as image maps.
There are two ways to create image maps:
Server-side image maps: This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications.
Client-side image maps: This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.
Server-Side Image Maps
In the server-side image maps, we simply put the image inside a hyperlink and use the ismap attribute, which makes it a special image, and when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse pointer coordinates to determine which document to deliver back to the browser.
When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like a CGI or PHP script to process the incoming request based on the passed coordinates.
The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.
Example
The following code snippet demonstrates the use of server-side image maps.
On executing the above code, tutorialspoint logo will be displayed. When we click on the logo, the address bar will display the respective coordinates, as shown below:
This way we can assign distinct links to different coordinates of the image, and when those coordinates are clicked, we will be redirected to the linked documents. To learn more about the ismap attribute, check HTML ismap Attribute
Client-Side Image Maps
Client-side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags. The <map> along with <area> tags define all the image coordinates and corresponding links. The <area> tag inside the map tag specifies the shape and the coordinates to define the boundaries of each clickable hotspot available on the image.
The image that is going to form the map is inserted into the page using the <img /> tag as a normal image, except it carries an extra attribute called usemap.
On running the below code, an image with clickable areas will be displayed. If you click on one of the area, you will be redirected to the tutorial of that part.
To know how the value of the coords attribute is calculated, you can visit the explanation of coords attribute.
Example
Open Compiler
<!DOCTYPE html><html lang="en"><body><h1>Welcome to our interactive map!</h1><p>
Click on a region to visit the
respective language page:
The actual value of coordinates is totally dependent on the shape of the clickable area. Let us understand the coordinates of different shapes.
Shape
Coordinates
Description
Rectangle
x1 , y1 , x2 , y2
Where x1 and y1 are the coordinates of the upper left corner of the rectangle; x2 and y2 are the coordinates of the lower right corner.
Circle
xc , yc , radius
Where xc and yc are the coordinates of the center of the circle, and radius is the circle's radius. A circle centred at 200,50 with a radius of 25 would have the attribute coords="200,50,25".
Polygon
x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
The various x-y pairs define vertices (points) of the polygon, with a "line" being drawn from one point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels across at its widest points would have the attribute coords="20,20,40,40,20,60,0,40".
HTML Links (Hyperlinks) are words or buttons having a link to another page that take the user to that linked page when clicked.
HTML Hyperlinks
A hyperlink is a specific type of link that allows users to navigate from one web page or resource to another by clicking on it. You can create hyperlinks using text or images available on a webpage. A hyperlink is created using the HTML Anchor Tag (</a>).
The Anchor (<a>) Tag
An anchor tag, or <a> tag, is a basic element that creates hyperlinks between two pages. Anything which is written between the opening <a> and the closing </a> tags become clickable and when someone clicks on it, the linked page will be opened.
Syntax
Here is the syntax to create a hyperlinks in HTML:
Open Compiler
<a href="URL" target="_target_type">Link Text</a>
Read more about creating URLs, we recommend to read this chapter: Understanding URL
Creating Hyperlinks (Linking Webpages/Documents)
You can link other webpages or documents by creating the hyperlinking to specific words, images, or any HTML element.
As discussed above, you can create hyperlinks by using the HTML <a> tag with the href attribute. The href attribute specifies the page/document to be linked.
Syntax
<a href="URL" ... attributes-list>Link Text</a>
Example
In this example, we are creating a simple HTML document that demonstrates how to use a hyperlink:
Open Compiler
<!DOCTYPE html><html><head><title>Hyperlink Example</title></head><body><p>Click following link</p><a href="https://www.tutorialspoint.com/" target="_self">AHMAD Point</a></body></html>
On executing the above example, a link will be displayed. You can click on the link generated to reach to the home page of Tutorials Point.
The “target” Attribute
The target attribute specifies the location where linked document is opened. Following are the possible values of target attribute:
S.No.
Option & Description
1
_blankOpens the linked document in a new window or tab.
2
_selfOpens the linked document in the same frame.
3
_parentOpens the linked document in the parent frame.
4
_topOpens the linked document in the full body of the window.
5
targetframeOpens the linked document in a named targetframe.
Example
Try following example to understand basic difference in few options given for target attribute.
Open Compiler
<!DOCTYPE html><html><head><title>Hyperlink Example</title><base href="https://www.tutorialspoint.com/"></head><body><p>Click any of the following links</p><a href="/html/index.htm" target="_blank">Opens in New</a> | <a href="/html/index.htm" target="_self">Opens in Self</a> | <a href="/html/index.htm" target="_parent">Opens in Parent</a> | <a href="/html/index.htm" target="_top">Opens in Body</a></body></html>
This will produce the following result, where you can click on different links to understand the difference between various options given for target attribute.
Use of Base Path in Hyperlinks
When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.
Example
Following example makes use of <base> tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link:
Open Compiler
<!DOCTYPE html><html><head><title>Hyperlink Example</title><base href="https://www.tutorialspoint.com/"></head><body><p>Click following link</p><a href="/html/index.htm" target="_blank">HTML Tutorial</a></body></html>
This will produce the following result, where you can click on the link generated HTML Tutorial to reach to the HTML tutorial.
Linking to a Page Section
Linking to a section on the same page allows users to navigate directly to that section. You can create a link in the same to a specific section by using the href attribute with a #id value, where the #id targets an element on the page with a corresponding id attribute.
Example
In the below code, we demonstrate the usage of the href attribute to navigate to a different section within the same page. We provide #idofsection inside the href to navigate sections of our need:
Open Compiler
<!DOCTYPE html><html lang="en"><head><style>
div {
height: 900px;
}
</style></head><body><h2>Ed-Tech</h2><div><p>
Tutorialspoint: Simply Easy Learning
</p><a href="#about">Know More</a></div><h2 id="about">Section 2</h2><div><p>
Tutorials Point is an online learning platform
providing free tutorials, paid premium courses,
and eBooks. Learn the latest technologies and
programming languages SQL, MySQL, Python, C,
C++, Java, Python, PHP, Machine Learning, data
science, AI, Prompt Engineering and more.
</p></div></body></html>
Styling Hyperlinks (Setting Link Color)
You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.
Example
Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.
This will produce the following result. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.
Downloadable Links
HTML allows you to create downloadable links where you can create links to make your PDF, DOC, or ZIP files downloadable. To create any link downloadable, you can use the download attribute with the <a> tag and specify the downloadable file path in the href attribute.
Example
The following example demonstrates creating a downloadable link in HTML:
Open Compiler
<!DOCTYPE html><html><head><title>Downloadable Link Example</title></head><body><a href="/html/src/sample.txt" download>Download File</a></body></html>
Custom File Name
You can also specify the filename for the downloaded file. To give a custom filename the file, you need to provide it to the download attribute.
You can also allow HTML to open a file download dialog box before starting the download so that the user can select the location to download the file. You can do it by using an HTTP header in your HTTP response.
For example, if you want to make a filename file downloadable from a given link, then its syntax will be as follows.
Syntax
#!/usr/bin/perl# Additional HTTP Headerprint"Content-Type:application/octet-stream; name=\"FileName\"\r\n";print"Content-Disposition: attachment; filename=\"FileName\"\r\n\n";# Open the target file and list down its content as follows
open( FILE,"<FileName");while(read(FILE,$buffer,100)){print("$buffer");}
Note: For more detail on PERL CGI programs, go through tutorial PERL and CGI.