Creating links with <a>
The <a> tag in HTML is used to create hyperlinks, enabling navigation between web pages, downloading files, or jumping to sections within the same page — a foundational skill for building accessible, navigable websites. For hands-on practice, consider starting with our Introduction to HTML course or exploring Text and Formatting Elements to learn how to structure content effectively.
Basic Syntax
<a href=”URL”>Link Text</a>
- href: Specifies the destination URL of the link.
- Link Text: The clickable part shown to the user.
Example:
<a href=”https://www.example.com”>Visit Example</a>
This creates a clickable link that takes you to example.com.
Types of Links
1. External Link
Links to another website.
<a href=”https://google.com”>Go to Google</a>
2. Internal Link
Links to another page within the same site.
<a href=”/about.html”>About Us</a>
3. Relative Link
Uses a path relative to the current page.
<a href=”contact.html”>Contact</a>
4. Anchor Link (Same Page)
Jumps to a section within the same page using id.
<a href=”#top”>Back to Top</a>
…
<h1 id=”top”>Welcome</h1>
Useful Attributes
| Attribute | Description |
|---|---|
href |
URL or location of the link |
target |
Specifies where to open the link (_blank, _self, etc.) |
title |
Tooltip text on hover |
download |
Suggests the browser download the linked file |
rel |
Specifies relationship (nofollow, noopener, etc.) |
target=”_blank” (Open in New Tab)
<a href=”https://openai.com” target=”_blank”>OpenAI</a>
download (Download File)
<a href=”file.pdf” download>Download PDF</a>
Styling Links with CSS
a {
color: blue;
text-decoration: underline;
}
a:hover {
color: red;
}
Complete Example
<!DOCTYPE html>
<html>
<body>
<h2>Link Examples</h2>
<p><a href=”https://www.wikipedia.org” target=”_blank” title=”Visit Wikipedia”>Wikipedia</a></p>
<p><a href=”about.html”>About Page</a></p>
<p><a href=”#section2″>Jump to Section 2</a></p>
<h3 id=”section2″>Section 2</h3>
<p>This is the section the link jumps to.</p>
</body>
</html>
Internal vs. external linking
Linking is a fundamental part of web development, allowing navigation within your site and to other websites. Understanding the difference between internal and external links helps with site structure, SEO, and user experience.
Internal Links
What are they?
Internal links connect pages within the same website or domain.
Examples:
<a href=”/about.html”>About Us</a>
<a href=”contact.html”>Contact</a>
<a href=”#section2″>Jump to Section</a>
Use Cases:
- Navigating between site pages (e.g., home → blog)
- Linking to specific sections on the same page using anchor tags (id)
- Creating navigation menus
Benefits:
- Helps users navigate your site
- Boosts SEO by distributing link equity
- Keeps visitors engaged longer
External Links
What are they?
External links point to a different domain or website.
Examples:
<a href=”https://www.google.com”>Google</a>
<a href=”https://github.com/yourprofile” target=”_blank”>GitHub</a>
Use Cases:
- Referencing sources or related content
- Linking to social media profiles
- Providing helpful external resources
Best Practices:
- Use target=”_blank” to open in a new tab
- Add rel=”noopener noreferrer” for security when using _blank
<a href=”https://example.com” target=”_blank” rel=”noopener noreferrer”>Visit</a>
Key Differences:
| Feature | Internal Links | External Links |
|---|---|---|
| Destination | Same domain/site | Different domain/site |
| Common Usage | Navigation, site structure | Citations, references, resources |
| URL Type | Relative or absolute | Always absolute |
| SEO Impact | Helps site structure, crawlability | Provides credibility (outbound links) |
| Opens In | Usually same tab | Often new tab (_blank) |
Example: Both in Action
<a href=”/services.html”>Our Services</a> <!– Internal –>
<a href=”https://www.w3schools.com” target=”_blank” rel=”noopener”>Learn HTML</a> <!– External –>
Target attribute and navigation best practices
The target attribute in HTML is used with the <a> tag to control where the linked document will open. It’s crucial for managing user experience, especially when linking to external resources.
target Attribute in <a> Tags
Syntax:
<a href=”URL” target=”value”>Link Text</a>
Common target Values:
| Value | Description |
|---|---|
_self |
(Default) Opens the link in the same tab or frame |
_blank |
Opens the link in a new tab or window |
_parent |
Opens the link in the parent frame (for iframes) |
_top |
Opens the link in the full browser window, breaking out of frames |
framename |
Opens the link in a named iframe or window |
Example:
<!– Opens in the same tab –>
<a href=”about.html” target=”_self”>About</a>
<!– Opens in a new tab –>
<a href=”https://openai.com” target=”_blank” rel=”noopener noreferrer”>OpenAI</a>
Important: Security & Performance with _blank
When using target=”_blank”, always include rel=”noopener noreferrer” to:
- Prevent security vulnerabilities (like tabnabbing)
- Avoid performance issues due to the original page giving control to the new page
For additional context and best practices, see our HTML5 Features course.
Navigation Best Practices
For Good UX:
1. Use Internal Links Thoughtfully
- Keep a clear, intuitive structure (e.g., Home → Services → Contact).
- Use relative links for site flexibility and SEO.
2. Use External Links Wisely
- Open in new tabs (_blank) so users don’t lose your site.
- Provide context like icons or text to show it’s external.
3. Make Links Descriptive
- Avoid “Click here” — instead, describe the link’s purpose.
Example:
<a href=”/pricing.html”>View Pricing Plans</a>
4. Limit Navigation Overload
- Don’t overwhelm users with too many links.
- Group navigation using <nav>, dropdowns, or sidebars.
5. Accessibility Tips
- Use aria-label, screen-reader-friendly link text, and meaningful title attributes.
Summary Example:
<nav>
<a href=”/home.html”>Home</a>
<a href=”/blog.html”>Blog</a>
<a href=”https://github.com” target=”_blank” rel=”noopener”>GitHub </a>
</nav>
As you explore navigation strategies, consider supplementing your learning with our Introduction to HTML or Semantic HTML and Structure courses for deeper context.
Linking to email, phone, and files
In addition to navigating to webpages, HTML’s <a> tag allows you to create links for email, phone calls, and file downloads, enhancing accessibility and interactivity on your website.
Linking to Email – mailto:
Syntax:
<a href=”mailto:someone@example.com”>Email Us</a>
With Sub
