HTML Links and Anchor Tags — Complete Tutorial with Examples

Links are what make the web a web. Without them, every webpage would just be an isolated document sitting alone on a server somewhere. The ability to connect pages to each other, to other sites, to sections within the same page — that is genuinely what makes the internet function the way it does. If you have been following this series from What is HTML? A Complete Beginner Guide with Examples, this is one of the most satisfying elements to learn because you can see it working immediately.

The HTML element for creating links is the anchor tag — <a>. It’s called an anchor because the original idea was to anchor connections between documents. Let’s look at how it works.

Basic Link Syntax

The href attribute (hyperlink reference) is what makes the link actually work. Without it, <a> is just styled text that goes nowhere.

<a href="https://www.yuvajobs.com">Visit YuvaJobs</a>

This renders as a clickable link. The text between the tags is what the user sees and clicks. The href value is the destination. The browser handles the rest — underlining the text, changing the cursor to a pointer on hover, and navigating when clicked.

Absolute vs Relative URLs

This trips up more beginners than almost anything else in HTML. An absolute URL is the complete web address including the domain. A relative URL is a path relative to the current file’s location.

<!-- Absolute URL -->n<a href="https://www.yuvajobs.com/tutorials/html/html-tables-complete-tutorial/">HTML Tables</a>nn<!-- Relative URL -->n<a href="../html-tables-complete-tutorial/">HTML Tables</a>

For internal links within your own site, relative URLs are cleaner. For linking to other websites, you always need absolute URLs. On a platform like WordPress, using the full absolute URL for all internal links avoids any path confusion entirely.

Opening Links in a New Tab

By default, links open in the same browser tab. To open in a new tab — standard practice when linking to external websites — add the target=”_blank” attribute.

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">Google</a>

The rel=”noopener noreferrer” part is a security measure that should always accompany target=”_blank”. Without it, the opened tab can technically access the original page through JavaScript — a vulnerability known as reverse tabnapping. Always include it.

Linking to a Section on the Same Page

You can link to a specific section within the same page using an id attribute as the target. This is exactly how table of contents links work on Wikipedia and long documentation pages.

<!-- The target section -->n<h2 id="contact-section">Contact Us</h2>nn<!-- The link that jumps to it -->n<a href="#contact-section">Jump to Contact</a>

The # symbol tells the browser this is an in-page anchor, not an external URL. When clicked, the page scrolls to the element with that matching id. You can also link to a section on a different page by combining the page URL with the anchor: href=”/about/#team-section”.

Email and Phone Links

HTML links are not just for webpages. You can create a link that opens the user’s email client with a pre-filled address using the mailto: protocol.

<a href="mailto:hello@yuvajobs.com">Send us an email</a>n<a href="tel:+911234567890">Call us</a>

Mobile browsers recognise the tel: link and prompt the user to start a call. Really useful for contact pages on sites with mobile visitors.

Making an Image a Clickable Link

Because <a> can wrap around any inline content, you can make an image clickable by nesting <img> inside <a>.

<a href="https://www.yuvajobs.com">n  <img src="logo.png" alt="YuvaJobs Logo">n</a>

Clicking the image navigates to the href destination. This is the standard way to make logos link back to the homepage — something found on almost every website ever built.

Now that linking is solid, let us move into visuals. The next tutorial covers HTML Images — How to Add and Format Images in HTML — how to add images to pages, what the alt attribute actually does for accessibility and SEO, and how to control image sizing correctly in HTML.