An HTML link is an <a> element with an href: <a href="/pricing">See pricing</a>. Point href at a page, at #id to jump within the page, or at mailto: and tel: to start an email or call. Add target="_blank" for a new tab, and use a <button>, not a link, for actions that change something.
| Goal | Markup |
|---|---|
| Another page | <a href="/about">About us</a> |
| A section on this page | <a href="#faq">FAQ</a> |
| Open in a new tab | <a href="…" target="_blank"> |
| Start an email | <a href="mailto:[email protected]"> |
| Start a phone call | <a href="tel:+15550100"> |
| Download a file | <a href="/menu.pdf" download> |
Updated
Every link pattern a small site needs, each with code you can edit and a live result. The jump-link demo shows the sticky-header problem and its one-line fix, and the button section settles when a link should look like a button and when it should be one.
Relative paths are resolved against the current page; a path starting with / starts from the site root.
<ul>
<li><a href="https://example.com/">A full address on another site</a></li>
<li><a href="/pricing">A page on this site, from the root</a></li>
<li><a href="team.html">A file next to this page</a></li>
<li><a href="#hours">A section on this page</a></li>
</ul>Give the target an id and link to it with #id. scroll-behavior: smooth animates the jump, and scroll-margin-top stops a sticky header from covering the heading.
Click a link in the bar. Each section lands just below the header because of scroll-margin-top. Delete that line to see the problem it solves.
<style>
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
header { position: sticky; top: 0; background: #0f172a; padding: 10px }
header a { color: #fff; margin-right: 12px }
section { min-height: 220px; padding: 8px; border-bottom: 1px solid #ddd }
section { scroll-margin-top: 52px }
</style>
<header>
<a href="#menu">Menu</a> <a href="#hours">Hours</a> <a href="#find-us">Find us</a>
</header>
<section id="menu"><h2>Menu</h2><p>Soups, salads and fresh bread.</p></section>
<section id="hours"><h2>Hours</h2><p>Every day, 8am to 4pm.</p></section>
<section id="find-us"><h2>Find us</h2><p>Corner of Mill Lane and High Street.</p></section>noopener is implied by current browsers but costs nothing to keep. noreferrer also hides the address of your page from the other site.
<a href="https://example.com/terms" target="_blank" rel="noopener noreferrer">
Supplier terms (opens in a new tab)
</a>| The click… | Element | Example |
|---|---|---|
| Goes to another address | <a href> | Sign up, View plans, Read the guide |
| Submits a form | <button type="submit"> | Send message, Pay now |
| Changes something on this page | <button type="button"> | Open menu, Add to basket, Show more |
Both look alike. Only the link can be opened in a new tab; only the button belongs inside a form action.
<style>
.btn { display: inline-block; padding: 10px 18px; border-radius: 999px; background: #2563eb; color: #fff;
font: 600 15px system-ui; text-decoration: none; border: 0; cursor: pointer }
.btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px }
</style>
<a class="btn" href="/signup">Create an account</a>
<button class="btn" type="button">Add to basket</button>The alt text names the destination, because it is the link's only text. Here the image is a small inline SVG so the demo works offline.
<a href="/">
<img alt="Harbour Bakery home page" width="120" height="40"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='8' fill='%23b45309'/%3E%3Ctext x='60' y='26' font-size='16' text-anchor='middle' fill='white' font-family='sans-serif'%3EHarbour%3C/text%3E%3C/svg%3E">
</a>Write phone numbers in the href in international format with no spaces. The visible text can be formatted however you like.
<p><a href="mailto:[email protected]?subject=Table%20booking">[email protected]</a></p>
<p><a href="tel:+353915550142">091 555 0142</a></p>The value, if given, suggests a file name. It only applies to files on your own origin or to blob: and data: addresses.
<a href="/files/spring-menu.pdf" download="harbour-bakery-menu.pdf">
Download the spring menu (PDF, 240 KB)
</a>| Weak | Better |
|---|---|
| Click here | Read the delivery terms |
| Read more | Read more about our catering menu |
| https://example.com/docs/setup | Setup guide |
| Here (PDF) | Price list (PDF, 1 page) |
An <a> without href is only a placeholder: it is not focusable with the keyboard and does nothing on click. The href is what makes it a link. The text between the tags is the accessible name, and on an image link the image's alt text plays that role.
Other attributes refine the link. target chooses where it opens, rel describes the relationship to the target page (nofollow, noopener, noreferrer, sponsored), download asks the browser to save rather than show the file, and hreflang or type describe the destination.
Keyboard users press Enter to follow a link, and Enter or Space to press a button. Screen readers announce them differently, and only links get a context menu with Open in new tab. When a link is used for an action, or a div is used for either, some of those behaviours disappear.
The visual style is free. A Sign up link in the header can look like a solid button, and a Remove button in a list can look like plain underlined text. Choose the element by what happens, then style it however the design needs.
Links need to be recognisable without colour alone. An underline does that in body text; in navigation bars the layout usually makes it clear. Keep a visible focus outline, and if you replace the browser default, make sure the new one has enough contrast.
Avoid several links with the same text going to different places, like a row of Read more links. Either write distinct text or add a visually hidden span that completes the phrase for screen reader users.
Current browsers apply noopener behaviour to target="_blank" links automatically, so the opened page cannot reach back to yours through window.opener. Adding rel="noopener" is still harmless and protects very old browsers. Add noreferrer as well if you do not want the other site to see which page sent the visitor.
Use <a href> when the click takes someone to a new address that they could bookmark or open in a new tab. Use <button> when the click does something on the current page, such as opening a menu, submitting a form or adding to a basket. You can style either one to look like the other.
The browser scrolls the target to the very top of the window, which is where your fixed header sits. Add scroll-margin-top to the targets, set to the header height plus a little room, and the heading lands just below it.
Browsers only honour download for files on the same origin as the page, or for blob: and data: addresses. For a file on another domain the link simply opens it, unless that server sends a Content-Disposition header telling the browser to save it.
Add it as a query string: mailto:[email protected]?subject=Booking%20request&body=Hi. Spaces and special characters must be percent-encoded, so a space becomes %20.
Related: HTML images guide, HTML comments, line breaks and spaces, CSS text styling, Contact link generator, HTML viewer.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.