Quick answer: A link is an <a> with an href. Internal links point to paths or fragments, external links use a full URL, and special schemes handle email and phone. HTML links in navigation belong in a <nav> landmark with a list of links, and use descriptive link text — never “click here”.The sections below cover HTML links in the order you will write them: the kinds of link, navigation landmarks, external links and security, then link text and jump links, where most HTML links fail accessibility checks.
Table of Contents
The kinds of HTML links you will write
<a href="/css/css-grid-guide/">CSS Grid guide</a> <!-- internal -->
<a href="https://mdn.org">MDN</a> <!-- external -->
<a href="#pricing">Pricing</a> <!-- same-page fragment -->
<a href="mailto:info@example.com">Email us</a> <!-- email -->
<a href="tel:+919600111210">Call us</a> <!-- phone -->
<a href="/report.pdf" download>Download the report</a> <!-- download -->An internal link starts with / for a path from the site root, or a relative path such as ./guide/ to stay within the current folder.
A fragment link starting with # jumps to the element with that id on the same page.
HTML links and navigation landmarks
Screen reader users navigate by landmarks, and a well-built site gives them a <nav> they can jump to. Label it when there is more than one so they can be told apart.
<nav aria-label="Main">
<ul>
<li><a href="/html/">HTML</a></li>
<li><a href="/css/">CSS</a></li>
<li><a href="/javascript/">JavaScript</a></li>
</ul>
</nav>Using a list inside <nav> is not decoration: it tells assistive technology how many links there are, so a listener hears “list of three items” before drilling in. The current page’s link should be marked with aria-current="page" so it is announced as where you are.
External links and security
<a href="https://example.com" target="_blank" rel="noopener">Docs</a>target="_blank" opens a new tab, which surprises users when it happens unexpectedly — mention it in the link text if that matters. rel="noopener" severs the new page’s access to your window; browsers now do this automatically for target="_blank", but including it is harmless and explicit. Use rel="nofollow" only for links you genuinely do not want a search engine to follow, such as sponsored or untrusted user content.
Link text matters
Assistive technology can list every link on a page out of context. “Click here” and “read more” become meaningless in that list; the linked words should describe the destination.
| Avoid | Prefer |
|---|---|
| Click here | Download the CSS cheat sheet |
| Read more | Read the Flexbox guide |
| Learn more | Learn how CSS Grid works |
Jump links and skip links
A skip link lets keyboard users bypass a long header and jump straight to the content. It is the first element in the body and becomes visible on focus.
<a class="skip" href="#main">Skip to content</a>
...
<main id="main">...</main>
<style>
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 0; top: 0; background: #fff; padding: 0.5rem 1rem; }
</style>Mark the target of a fragment link with the id, and give main content a <main> landmark as in our semantic HTML guide. Next: the head and meta tags. To learn HTML with a mentor, Ampersand Academy teaches web development one-to-one.
Frequently asked questions
What is the difference between an internal and an external link?
An internal link points to a page on the same site using a path such as /css/guide. An external link uses a full URL with a domain, such as https://example.com.
Why should I add rel=noopener to links?
It prevents the opened page from accessing your window through window.opener. Modern browsers do this automatically for target blank, but adding it is explicit and harmless.
What makes good link text?
Words that describe the destination, so the link makes sense when read out of context. Avoid click here and read more, which are meaningless in a list of links.
How do I link to a section on the same page?
Give the target element an id and link to it with the hash, such as href set to the id. The browser scrolls to that element without reloading the page.
What is a skip link?
A link at the very top of the page that jumps to the main content, letting keyboard and screen reader users bypass the repeated navigation. It shows on focus.
Last updated on · Written by Dinesh Kumar R
