Introduction
In this chapter, you will learn about HTML links, which are used to navigate between different pages on the web. Links are created using the <a> tag and can point to other HTML documents, external websites, or specific parts of the same document. Understanding how to create and use links is essential for building interconnected web pages.
Basic Syntax
HTML links are defined with the <a> tag. The href attribute specifies the URL of the page the link goes to.
Syntax
<a href="URL">Link Text</a>
Example
<a href="https://www.example.com">Visit Example</a>
Linking to Other HTML Documents
You can link to other HTML documents within the same website or to external websites.
Example
Internal Link
<a href="about.html">About Us</a>
External Link
<a href="https://www.google.com">Visit Google</a>
Linking to Specific Parts of the Same Document
You can create links that jump to specific parts of the same document using IDs.
Example
Create an ID
<h2 id="section1">Section 1</h2>
<p>This is the first section.</p>
Link to the ID
<a href="#section1">Go to Section 1</a>
Opening Links in a New Tab
You can make a link open in a new tab by using the target attribute with the value _blank.
Example
<a href="https://www.example.com" target="_blank">Visit Example in New Tab</a>
Email Links
You can create links that open the user’s email client with a new email draft.
Example
<a href="mailto:someone@example.com">Send Email</a>
Linking to a Phone Number
You can create links that open the phone dialer on mobile devices.
Example
<a href="tel:+1234567890">Call Us</a>
Styling Links with CSS
Links can be styled using CSS to change their appearance based on different states: normal, visited, hover, and active.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling Links</title>
<style>
/* Normal link */
a {
color: blue;
text-decoration: none;
}
/* Visited link */
a:visited {
color: purple;
}
/* Link on hover */
a:hover {
color: red;
text-decoration: underline;
}
/* Active link */
a:active {
color: green;
}
</style>
</head>
<body>
<h1>Styling Links Example</h1>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
Example: Complete HTML with Links
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Links Example</title>
<style>
a {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: green;
}
</style>
</head>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.google.com" target="_blank">Visit Google</a></p>
<p><a href="about.html">About Us</a></p>
<p><a href="#section1">Go to Section 1</a></p>
<p><a href="mailto:someone@example.com">Send Email</a></p>
<p><a href="tel:+1234567890">Call Us</a></p>
<h2 id="section1">Section 1</h2>
<p>This is the first section. <a href="#top">Go to top</a></p>
</body>
</html>
Conclusion
HTML links are essential for creating interconnected web pages and providing navigation. By using the <a> tag with various attributes, you can link to other documents, external websites, specific parts of the same document, and even create email and phone links. Understanding how to create and style links is fundamental for web development.