HTML Hyperlinks
Hyperlinks, or simply links, are clickable elements on a webpage that take users to another location, either within the same page, a different webpage, or even a file or an email address. Hyperlinks are a fundamental part of the web, enabling easy navigation between different pieces of content. In HTML5, hyperlinks (or anchors) are created using the <a> (anchor) element. Here’s how you can create hyperlinks in HTML5:
1. Basic Hyperlink
To create a basic hyperlink that redirects to another webpage or resource:
<a href=”https://www.example.com”>Example Website</a>
In this example:
• href: Specifies the URL of the destination page or resource.
• Example Website: Text displayed as the hyperlink.
2. Hyperlink with Text or Image
You can wrap text or an image inside the <a> element to make it clickable:
Text Link
<p>For more information,
<a href=”https://www.example.com”>visit our website</a>.</p>
Image Link
<a href=”https://www.example.com”>
<img src=”image.jpg” alt=”Example Image”>
</a>
3. Linking to Sections within the Same Page
To create a link to another section within the same HTML page, use an anchor (<a>) with a corresponding id attribute on the target element:
Link to a Section
<a href=”#section2″>Jump to Section 2</a>
…
<h2 id=”section2″>Section 2</h2>
<p>Content of Section 2</p>
4. Opening Links in a New Tab
To open a link in a new tab or window, add the target=”_blank” attribute:
<a href=”https://www.example.com” target=”_blank”>Visit Example (Opens in new tab)</a>
5. Linking to Email Addresses
To create a link that opens the user’s email client to send an email:
<a href=”mailto:info@example.com”>Email Us</a>
6. Linking to Phone Numbers
To create a link that initiates a phone call on mobile devices:
<a href=”tel:+1234567890″>Call Us</a>
7. Adding Title Attribute
You can add a title attribute to provide additional information about the link:
<a href=”https://www.example.com” title=”Visit Example Website”>Visit Example</a>