href, and target AttributesHTML links (hyperlinks) enable navigation between web pages, external websites, downloadable assets, or specific sections within the same page. Links are created using the <a> (anchor) element.
The <a> tag wraps text, buttons, or images to turn them into clickable hyperlinks.
<a href="https://kodersolution.com/tutorials" target="_blank" rel="noopener noreferrer">Explore Tutorials</a>
Key attributes for <a>:
href (Hypertext Reference): Specifies the destination URL (absolute path, relative path, or anchor hash #id).target: Controls where the linked document opens:_self (Default): Opens in the current tab/window._blank: Opens in a new browser tab or window._parent / _top: Opens in the parent or top-level frame.rel: Defines the relationship between current and target pages. Essential for security (rel="noopener noreferrer") when using target="_blank".download: Instructs the browser to download the target file rather than navigating to it.HTML anchor tags handle several navigation mechanisms:
flowchart TD
A["HTML Hyperlinks (a)"] --> B["Absolute URLs (External)"]
A --> C["Relative URLs (Internal)"]
A --> D["Page Section Anchors (#id)"]
A --> E["Action Links (mailto: / tel:)"]
B --> B1["https://example.com"]
C --> C1["/about.html or ../contact"]
D --> D1["#features or #top"]
E --> E1["mailto:[email protected]"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Links Practical Example</title>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h1 id="top">HTML Links Demonstration</h1>
<!-- Navigation Bar with Relative Links and Hash Anchors -->
<nav style="background-color: #1e293b; padding: 1rem; border-radius: 8px; margin-bottom: 2rem;">
<a href="#section-features" style="color: #38bdf8; margin-right: 1.5rem; text-decoration: none;">Jump to Features</a>
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer" style="color: #38bdf8; margin-right: 1.5rem; text-decoration: none;">External MDN Docs ↗</a>
<a href="mailto:[email protected]" style="color: #38bdf8; text-decoration: none;">Email Support</a>
</nav>
<!-- Page Content Section -->
<div id="section-features" style="background-color: #1e293b; padding: 1.5rem; border-radius: 8px; margin-top: 10rem;">
<h2>Key Features Section</h2>
<p>This section is reached directly via smooth anchor hash scrolling (`#section-features`).</p>
<!-- Back to Top Link -->
<a href="#top" style="color: #34d399; font-weight: bold; text-decoration: none;">↑ Back to Top</a>
</div>
</body>
</html>
target="_blank" with rel="noopener noreferrer": Prevents tab-nabbing security vulnerabilities by preventing external pages from accessing window.opener.:focus states for keyboard navigation./blog/post-1) for internal site navigation to maintain local development compatibility.Create an anchor link that opens https://github.com in a new tab safely with rel="noopener noreferrer", styled with custom text color and hover underline effects!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.
You've completed this section! Take a quick 5-question quiz to check your understanding.