How to Create Links in HTML with the Anchor Tag
How to create links in HTML with the <a> tag: internal and external links, email links, and the attributes that control how they open.
RazakTerra- Reading time
- 2 min read
- Comments
- Discussion
On this page
Basic Link Syntax
<a href="https://example.com">Visit Example</a>- href → the destination of the link (required)
- The text between the opening and closing tags is what users see and click
External Links
These point to another website.
<a href="https://packcamo.com/">Go to Pack Camo</a> <a href="https://packcamo.com/" target="_blank">Open Pack Camo in new tab</a>
Internal Links
These link to another page on the same website.
<a href="/about">About Me</a> <a href="/blog">All Article</a>
Anchor Links (Jump to a Section)
You can link to a specific part of the same page using an id.
<!-- The link that jumps to it --> <a href="#first-section">Go to first section</a> <a href="#second-section">Go to second section</a> <!-- The target section --> <h2 style="height: 100vh" id="first-section">First Section</h2> <h2 style="height: 100vh" id="second-section">Second Section</h2>
You can also link to a section on another page:
<a href="/#apps">Other Apps</a>
Email Links
Use mailto: to open the user’s email app.
<a href="mailto:hello@coresintext@gmail.com">Send me an email</a> <a href="mailto:hello@coresintext@gmail.com?subject=Hello" >Email with subject</a >
Useful Attributes
Target Controls where the link opens:
<a href="https://example.com" target="_blank">Open in new tab</a>
rel
Adds extra information about the link relationship. Commonly used with target=“_blank” for security:
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> External Link </a>
Full Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Links Example</title>
</head>
<body>
<h1>My Website</h1>
<p>
Visit
<a href="https://google.com" target="_blank" rel="noopener noreferrer"
>Google</a
>
or read our <a href="about.html">About page</a>.
</p>
<p>
<a href="#services">Jump to Services</a>
</p>
<h2 id="services">Our Services</h2>
<p>We offer web design and development.</p>
<p>Questions? <a href="mailto:hello@example.com">Email us</a>.</p>
</body>
</html>
Quick Tips
Always use clear and descriptive link text (avoid “click here”).
Add rel="noopener noreferrer" when using target="_blank" for better security.
Use anchor links (#id) to help users jump to important sections.
Test your links to make sure they go to the right place.
With just the <a> tag and a few attributes, you can create almost any kind of link your website needs.
Written by
Razak
Writes about the web, slowly, and builds small tools on the side.
Keep reading
Read next
1 minBest Practices for Writing Clean and Valid HTML
A collection of HTML best practices including proper indentation, naming, W3C validation, and common beginner mistakes you should avoid.
Read article
2 minGetting to Know HTML Iframe: How to Embed YouTube and Google Maps
How to use the HTML <iframe> tag to embed content from other sites, like a YouTube video or a Google Map, inside your own page.
Read article
1 minHow to Create Forms in HTML for Beginners
A beginner's guide to HTML forms: how the <form> tag sends data for logins, sign-ups and contact messages, starting from the basics.
Read article
Discussion
Comments
Loading comments…