| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
HTML links (also known as hyperlinks) allow users to navigate between different pages or sections of a website. Here’s an in-depth look at HTML links with examples:
Basic Structure of an HTML Link
An HTML link is created using the ‘<a>‘ (anchor) tag. The primary attribute of the ‘<a>‘ tag is ‘href‘, which stands for Hypertext REFerence and indicates the destination of the link.
<a href="https://www.example.com" target="_blank" rel="noopener">Visit Example</a>
href="https://www.example.com": Specifies the URL of the page the link goes to.Visit Example: This is the clickable text that the user sees.
Types of Links
1. Absolute URL:
An absolute URL points to another website (including the protocol, such as ‘http://‘ or ‘https://‘).
<a href="https://www.example.com" target="_blank" rel="noopener">Visit Example</a>
2. Relative URL:
A relative URL points to a file within the same website. It does not include the domain name.
<a href="/about.html">About Us</a>
3. Email Link:
Opens the user’s default email client to send an email to the specified address.
<a href="mailto:info@example.com">Email Us</a>
4. Telephone Link:
Allows users to make a phone call (primarily used for mobile devices).
<a href="tel:+1234567890">Call Us</a>
Link Attributes
1. target:
Specifies where to open the linked document.
<a href="https://www.example.com" target="_blank" rel="noopener">Visit Example</a>
Common values for the ‘target‘ attribute:
_blank: Opens the link in a new window or tab._self: Opens the link in the same frame as it was clicked (default)._parent: Opens the link in the parent frame._top: Opens the link in the full body of the window.
2. title:
Provides additional information about the link, which is often displayed as a tooltip when the mouse hovers over the link.
<a href="https://www.example.com" title="Go to Example" target="_blank" rel="noopener">Visit Example</a>
3. download:
Indicates that the target should be downloaded when a user clicks on the hyperlink.
<a href="/files/report.pdf" download>Download Report</a>
Linking to Sections Within the Same Page
You can create links that jump to specific sections within the same page using ‘id‘ attributes.
1. Create an ID on the target section:
<h2 id="section1">Section 1</h2>
<p>This is Section 1.</p>
2. Create a link to the target section:
<a href="#section1">Go to Section 1</a>
Examples
Here are a few examples combining different attributes and types of links:
1. Absolute URL with target="_blank" and title:
<a href="https://www.example.com" target="_blank" title="Open Example in a new tab" rel="noopener">Visit Example</a>
2. Relative URL:
<a href="/contact.html">Contact Us</a>
3. Email Link:
<a href="mailto:info@example.com">Send an Email</a>
4. Telephone Link:
<a href="tel:+1234567890">Call Us Now</a>
5. Download Link:
<a href="/files/guide.pdf" download>Download Guide</a>
6. Linking to a Section Within the Same Page:
<a href="#section2">Go to Section 2</a>
...
<h2 id="section2">Section 2</h2>
<p>This is Section 2.</p>
Styling Links
You can use CSS to style your links. Here are some common styles:
/* Unvisited link */
a:link {
color: blue;
}
/* Visited link */
a:visited {
color: purple;
}
/* Mouse over link */
a:hover {
color: red;
}
/* Selected link */
a:active {
color: yellow;
}
This CSS will change the color of the link based on its state (unvisited, visited, hovered over, or active).
Understanding and using these concepts and attributes will help you create effective and user-friendly links in your web pages.
