HTML links are hyperlinks that allow users to navigate from one page to another. Links are the essence of the World Wide Web, connecting documents and resources together.
Basic Link Syntax
HTML links are defined with the <a> tag (anchor tag).
The href attribute specifies the destination URL.
<a href="https://www.example.com">Visit Example.com</a>Link Types
External Links
Links to other websites:
<a href="https://www.google.com">Go to Google</a>
<a href="https://www.github.com">Visit GitHub</a>Internal Links
Links to pages within the same website:
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
<a href="products/index.html">Products</a>Email Links
Links that open the default email client:
<a href="mailto:someone@example.com">Send Email</a>
<a href="mailto:someone@example.com?subject=Hello">Send Email with Subject</a>Link Attributes
Target Attribute
The target attribute specifies where to open the linked
document:
<a href="https://www.example.com" target="_blank">Open in New Tab</a>
<a href="https://www.example.com" target="_self">Open in Same Frame</a>
<a href="https://www.example.com" target="_parent">Open in Parent Frame</a>
<a href="https://www.example.com" target="_top">Open in Full Body</a>Title Attribute
The title attribute provides additional information about the
link, shown as a tooltip:
<a href="https://www.example.com" title="Visit Example.com for more information">Example.com</a>Anchor Links
You can create links that jump to specific sections within the same page using anchor links:
<!-- First, create the anchor -->
<h2 id="section1">Section 1</h2>
<p>Content for section 1...</p>
<!-- Then create the link to the anchor -->
<a href="#section1">Go to Section 1</a>Download Links
Use the download attribute to create a download link:
<a href="document.pdf" download>Download PDF</a>
<a href="image.jpg" download="my-image.jpg">Download Image</a>Phone Links
Create links that initiate phone calls on mobile devices:
<a href="tel:+1234567890">Call us: +1 234-567-890</a>
<a href="tel:0800123456">Call us toll-free: 0800-123-456</a>Relative vs Absolute URLs
Absolute URLs
Complete URLs that include the domain:
<a href="https://www.example.com/page.html">Absolute URL</a>Relative URLs
URLs relative to the current page:
<a href="page.html">Same directory</a>
<a href="folder/page.html">Subdirectory</a>
<a href="../page.html">Parent directory</a>
<a href="/page.html">Root directory</a>Best Practices
✓ Do:
- Use descriptive link text that tells users where the link goes
- Use
target="_blank"for external links -
Add
rel="noopener noreferrer"for security with external links - Use meaningful anchor text instead of "click here"
- Make links large enough to be easily clickable
✗ Don't:
- Use vague link text like "click here" or "read more"
- Open external links in the same tab without warning
- Make links too small or hard to click
- Link entire paragraphs when only part is relevant
- Use link colors that are hard to distinguish from regular text