Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between linking an image, website, and email address in HTML
In HTML, there are three common types of linking: embedding images, creating website links, and linking to email addresses. Each uses different elements and attributes to achieve specific functionality.
To embed an image into a webpage, the <img> tag is used with the
srcattribute.To create a hyperlink to another website, we use the <a> anchor tag with the
hrefattribute.To link an email address, we use
mailto:inside thehrefattribute of the <a> anchor tag.
Linking an Image
The <img> tag embeds an image directly into the webpage. Unlike the anchor tag, it displays the actual image content rather than creating a clickable link. This is a self-closing tag that requires the src attribute for the image path and should include an alt attribute for accessibility.
Syntax
Following is the syntax for the HTML <img> tag
<img src="path_to_image" alt="description_text">
Example
Following example demonstrates how to embed an image using the <img> tag
<!DOCTYPE html> <html> <head> <title>Embedding an Image</title> </head> <body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;"> <h2>TutorialsPoint - Simply Easy Learning</h2> <!-- Embedding an image --> <img src="https://www.tutorialspoint.com/images/logo.png" alt="TutorialsPoint Logo" style="max-width: 300px; height: auto;"> <p>The TutorialsPoint logo is displayed above.</p> </body> </html>
The output displays the TutorialsPoint logo image directly embedded in the webpage
TutorialsPoint - Simply Easy Learning [TutorialsPoint Logo Image] The TutorialsPoint logo is displayed above.
Linking a Website
The <a> anchor tag creates clickable hyperlinks that navigate users to other web pages, files, or sections. The href attribute specifies the destination URL, and the text between the opening and closing tags becomes the clickable link text.
Syntax
Following is the syntax for creating a website link
<a href="website_url">Link Text</a>
Example
Following example shows how to create a hyperlink to another website
<!DOCTYPE html> <html> <head> <title>Website Hyperlink</title> </head> <body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;"> <h2>External Website Links</h2> <p>Visit our tutorial websites:</p> <!-- Linking to external websites --> <a href="https://www.tutorialspoint.com" target="_blank">Visit TutorialsPoint</a><br><br> <a href="https://www.tutorialspoint.com/html/index.htm" target="_blank">HTML Tutorial</a><br><br> <a href="https://www.tutorialspoint.com/css/index.htm" target="_blank">CSS Tutorial</a> </body> </html>
The output shows clickable links that navigate to the specified websites. The target="_blank" attribute opens links in new tabs
External Website Links Visit our tutorial websites: Visit TutorialsPoint (clickable blue link) HTML Tutorial (clickable blue link) CSS Tutorial (clickable blue link)
Linking an Email Address
Email links use the mailto: protocol within the href attribute of an anchor tag. When clicked, these links open the user's default email application with a new message addressed to the specified email address. You can also include subject lines and message bodies in the mailto link.
Syntax
Following is the basic syntax for linking an email address
<a href="mailto:email@example.com">Contact Text</a>
For advanced mailto links with subject and body
<a href="mailto:email@example.com?subject=Subject&body=Message">Contact Text</a>
Example
Following example demonstrates various ways to create email links
<!DOCTYPE html> <html> <head> <title>Email Address Links</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Contact Us</h2> <!-- Basic email link --> <p><a href="mailto:support@tutorialspoint.com">Send us an email</a></p> <!-- Email with subject line --> <p><a href="mailto:support@tutorialspoint.com?subject=Website Inquiry">Contact Support</a></p> <!-- Email with subject and body --> <p><a href="mailto:feedback@tutorialspoint.com?subject=Tutorial Feedback&body=Hello, I would like to provide feedback about...">Send Feedback</a></p> <!-- Multiple recipients --> <p><a href="mailto:support@tutorialspoint.com,sales@tutorialspoint.com?subject=General Inquiry">Contact Multiple Departments</a></p> </body> </html>
The output shows different types of email links. Clicking any of them opens the default email client with pre-filled information
Contact Us Send us an email (clickable link - opens email client) Contact Support (clickable link - opens with subject pre-filled) Send Feedback (clickable link - opens with subject and body pre-filled) Contact Multiple Departments (clickable link - opens with multiple recipients)
Comparison of Link Types
Following table summarizes the key differences between the three linking methods
| Link Type | HTML Element | Primary Attribute | Purpose | User Action |
|---|---|---|---|---|
| Image | <img> | src | Display image content | View image directly |
| Website | <a> | href (URL) | Navigate to web pages | Click to navigate |
| <a> | href (mailto:) | Initiate email communication | Click to open email client |
Practical Example Combining All Link Types
Following example demonstrates how all three linking methods can be used together in a single webpage
<!DOCTYPE html> <html> <head> <title>Complete Linking Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;"> <h1>Welcome to Our Website</h1> <!-- Image embedding --> <img src="https://www.tutorialspoint.com/images/logo.png" alt="Company Logo" style="max-width: 200px; margin: 20px;"> <h3>Navigation</h3> <!-- Website links --> <a href="https://www.tutorialspoint.com/html/index.htm" target="_blank">HTML Tutorials</a> | <a href="https://www.tutorialspoint.com/css/index.htm" target="_blank">CSS Tutorials</a> | <a href="https://www.tutorialspoint.com/javascript/index.htm" target="_blank">JavaScript Tutorials</a> <h3>Contact Information</h3> <!-- Email links --> <p><a href="mailto:info@tutorialspoint.com?subject=Website Inquiry">General Information</a></p> <p><a href="mailto:support@tutorialspoint.com?subject=Technical Support">Technical Support</a></p> </body> </html>
This example shows a complete webpage using all three linking methods effectively together.
Conclusion
Image linking uses the <img> tag to display visual content, website linking uses <a href="url"> for navigation, and email linking uses <a href="mailto:"> to initiate email communication. Each serves a distinct purpose in creating interactive and functional web pages.
506 Views
