Anchor Tag
intermediatePart of HTML Content & Structure
Theory
The <a> (anchor) element creates hyperlinks — the foundation of web navigation. Without links, the web would just be a collection of isolated pages.
The href Attribute
The href attribute specifies the link destination. It can point to:
- Absolute URLs:
https://example.com/page - Relative paths:
page.html,../about.html - Anchors on the same page:
#section-id - Email addresses:
mailto:user@example.com
target and rel
target="_blank"opens the link in a new tab or windowrel="noopener noreferrer"is a security best practice when usingtarget="_blank". It prevents the new page from accessing the original page viawindow.opener
Navigation Patterns
Links can navigate between pages, jump to sections within a page (using id attributes), download files, or initiate email clients. Styling links with CSS is common — by default links are blue and underlined.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Links Demo</title>
</head>
<body>
<h1>Useful Links</h1>
<h2>External Links</h2>
<p>Visit <a href="https://example.com" target="_blank" rel="noopener noreferrer">Example Website</a> in a new tab.</p>
<h2>Internal Links</h2>
<p>Go to the <a href="#contact">Contact Section</a> below.</p>
<h2>Email Link</h2>
<p>Send an <a href="mailto:hello@example.com">email to us</a>.</p>
<h2 id="contact">Contact Section</h2>
<p>You reached the contact section via an anchor link!</p>
</body>
</html>Exercises
Build a Navigation Page
Create an HTML page with a navigation list of 3 external links that open in new tabs, an email link, and an internal anchor link that jumps to a section at the bottom.
Expected Output:
A page with a heading, three external links, an email link, and a link that jumps to a bottom section using href=bottom.