HTML Anchor
An HTML anchor is a tag used to create hyperlinks, which are clickable links that navigate to other pages, sections of the same page, or external resources. The <a> tag is used to define anchors in HTML.
Attributes of the <a> Tag:
href: Specifies the URL of the link.
Syntax of an HTML Anchor Tag:
1.href: Specifies the URL of the link.
<a href="https://www.example.com">Visit Example</a>
2.target: Determines where to open the linked document._self (default): Opens in the same tab._blank: Opens in a new tab._parent: Opens in the parent frame._top: Opens in the full body of the window.
Example: <a href="https://www.example.com" target="_blank">Open in New Tab</a>
3.title: Provides additional information about the link (displayed as a tooltip when hovered over).
Example: <a href="https://www.example.com" title="Visit Example">Visit Example</a>
4.rel: Defines the relationship between the current page and the linked resource. Common values include:nofollow: Tells search engines not to follow the link.noopener: Prevents the new page from accessing the window.opener property.
Example: <a href="https://www.example.com" rel="nofollow">Visit Example</a>
5.name or id: Used to create bookmarks within a page for navigation.
Example: <a href="#contact">Go to Contact Us</a> links to the element with the id="contact".
Example of Anchors in Action:
<!DOCTYPE html>
<html>
<head>
<title>HTML Anchor Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Check out <a href="https://www.wikipedia.org" target="_blank" title="Visit Wikipedia">Wikipedia</a> for more information.</p>
<p><a href="#contact">Jump to Contact Section</a></p>
<h2 id="contact">Contact Us</h2>
<p>Email us at <a href="mailto:info@example.com">info@example.com</a></p>
</body>
</html>
Output:
- A clickable link to Wikipedia.
- A link to scroll to the “Contact Us” section.
- A clickable email link.