HTML Links

Links are essential to navigate between pages or perform actions on the web. The <a> (anchor) tag is used to create hyperlinks.

🔗 <a> (Anchor Tag)

The <a> tag is used to define a hyperlink that can link to another page, a specific section of a page, or even an external resource.

Example:

<a href="https://www.anilshebin.in">Click here to visit Example</a>

This creates a link that, when clicked, will navigate the user to https://www.anilshebin.in.

🏠 Internal Links

Internal links are used to navigate within the same webpage or between pages in the same website.

Example (Link to a different section of the same page):

<a href="#section1">Go to Section 1</a>
 
<!-- Somewhere else on the page -->
<h2 id="section1">Section 1</h2>

This creates a link that will take you to Section 1 on the same page when clicked.

Example (Link to another page within the same site):

<a href="/about.html">About Us</a>

This creates a link to an about.html page located in the same website.

🌐 External Links

External links are used to navigate to a different website.

Example:

<a href="https://www.google.com" target="_blank">Go to Google</a>

This link will open Google in a new tab because of the target="_blank" attribute.

🖥️ Open in New Tab (target="_blank")

To open a link in a new tab, use the target="_blank" attribute. This is often used for external links to keep the user on the original site as well.

Example:

<a href="https://www.example.com" target="_blank">Visit Example in a new tab</a>

This opens the Example website in a new browser tab when clicked.

📧 Mailto Links

Mailto links allow users to open their default email client with a prefilled email address.

Example:

<a href="mailto:someone@example.com">Send Email</a>

This will open the default email client with the recipient's email address already filled in.

📞 Telephone Links

Telephone links allow users to dial a phone number directly from a webpage, especially useful for mobile devices.

Example:

<a href="tel:+1234567890">Call Us</a>

This link will allow users to directly dial the phone number +1234567890 when clicked on a mobile device.

📝 Link Attributes

• href: Specifies the URL the link points to.
• title: Provides additional information about the link (appears as a tooltip when hovering over the link).
• download: Prompts the user to download the linked resource.

Example:

<a href="file.pdf" download="MyFile.pdf">Download File</a>

This link will allow the user to download a file named MyFile.pdf.

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

✅ Conclusion

HTML links are an essential part of web development, allowing users to navigate between pages, open email clients, dial phone numbers, and even download files. With various attributes like target="_blank" and download, links can be customized for different purposes.

🔗 Resources