HTML Links
Creating connections between web pages
🔗 What are HTML Links?
HTML links (hyperlinks) allow users to navigate between web pages and sections. They are created using the <a> (anchor) tag with the href attribute.
<!-- Basic link example -->
<a href="https://eternlab.com">Visit Example</a>
<a href="html-images.html">Go to Images Page</a>
Output:
Types of HTML Links
External Links
Links to other websites
<a href="https://google.com">Google</a>Internal Links
Links within your website
<a href="about.html">About Us</a>Anchor Links
Links to sections on same page
<a href="#section1">Go to Section 1</a>Email Links
Links to open email client
<a href="mailto:user@example.com">Email</a>🔹 Basic Link Syntax
The <a> tag creates links using the href attribute:
<!-- Basic link structure -->
<a href="URL">Link Text</a>
<!-- Examples -->
<a href="https://codorb.com">Learn Programming</a>
<a href="html-lists.html">Lists Page</a>
<a href="#top">Back to Top</a>Output:
🔹 Link Attributes
Links can have various attributes for different behaviors:
🔸 Target Attribute
<!-- Open in new tab/window -->
<a href="https://example.com" target="_blank">Open in New Tab</a>
<!-- Open in same window (default) -->
<a href="page.html" target="_self">Same Window</a>🔸 Title Attribute
<!-- Tooltip on hover -->
<a href="help.html" title="Get help and support">Help</a>🔸 Download Attribute
<!-- Download file instead of navigating -->
<a href="document.pdf" download>Download PDF</a>
<a href="image.jpg" download="my-image.jpg">Download Image</a>🔹 Anchor Links (Page Sections)
Create links to specific sections within the same page:
<!-- Navigation menu -->
<nav>
<a href="#introduction">Introduction</a>
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</nav>
<!-- Page sections with IDs -->
<section id="introduction">
<h2>Introduction</h2>
<p>Welcome to our website...</p>
</section>
<section id="features">
<h2>Features</h2>
<p>Our amazing features...</p>
</section>Output:
Introduction
Welcome to our website...
🔹 Email and Phone Links
Create links that open email clients or dial phone numbers:
<!-- Email links -->
<a href="mailto:contact@example.com">Send Email</a>
<a href="mailto:support@example.com?subject=Help Request">Get Support</a>
<!-- Phone links -->
<a href="tel:+1234567890">Call Us: (123) 456-7890</a>
<!-- SMS links -->
<a href="sms:+1234567890">Send SMS</a>🔹 Link Styling
Links can be styled with CSS or inline styles:
<!-- Styled links -->
<a href="#" style="color: red; text-decoration: none;">Red Link</a>
<a href="#" style="background: blue; color: white; padding: 10px; text-decoration: none;">Button Link</a>
<!-- Link with image -->
<a href="home.html">
<img src="home-icon.png" alt="Home" width="20"> Home
</a>