The <a> element
The <a> (anchor) tag creates a hyperlink to another page, a location within the same page, an email address, a phone number, or a file. Its most important attribute is href, which sets the destination — without it, the tag renders as a placeholder link with no target.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, interactive content, palpable content |
| Content model | Transparent — can contain any content except another <a>, when href is present |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLAnchorElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| href | The link’s destination — a URL, an in-page anchor (#id), a mailto:, or a tel: link |
| target | Where to open the link — e.g. _blank for a new tab |
| rel | Relationship to the linked resource — commonly noopener or nofollow |
| download | Prompts the browser to download the linked file instead of navigating to it |
| title | Extra advisory text, usually shown as a tooltip on hover |
Common examples
Link to another page
Use a relative URL for pages on your own site and a full absolute URL for other websites.
Email and phone links
The mailto: and tel: schemes open the visitor’s email app or phone dialer.
Jump to a section on the same page
Give the target an id, then link to it with # followed by that id — great for tables of contents and “back to top” links.
<a> vs <button>
This is one of the most common HTML questions, and the rule is simple: links go somewhere, buttons do something. Use <a href> when clicking takes the visitor to another page, file or section. Use a <button> when clicking performs an action on the current page, such as submitting a form, opening a menu or playing a video.
Getting this right matters for accessibility: screen readers announce links and buttons differently, and keyboard users expect Enter to follow a link but Space or Enter to press a button. It also matters for SEO, because only real links with an href pass ranking signals between pages.
| <a href> | <button> | |
|---|---|---|
| Purpose | Navigate to a URL | Run an action |
| Keyboard | Enter | Enter or Space |
| Followed by search engines | Yes | No |
Common mistakes to avoid
- “Click here” link text. Vague text tells nobody where the link goes. Describe the destination: “Download the 2026 price list”.
- Using a link as a button. If clicking runs an action (open a menu, submit data) rather than going somewhere, use a <button>.
- Broken relative paths.
about.htmland/about.htmlpoint to different places; test links after moving files. - Nesting a link inside another link. It’s invalid HTML and browsers split the links unpredictably.
Accessibility & SEO tips
- Descriptive anchor text is one of the clearest signals search engines use to understand what the linked page is about — and it helps screen reader users who browse a list of links.
- Mark paid or untrusted links with
rel="sponsored"orrel="nofollow", as Google recommends. - Avoid opening links in new tabs unless there’s a good reason; if you do, say so in the link text, e.g. “(opens in new tab)”.
- Keep a visible focus style (outline) so keyboard users can see which link is selected.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorials: How to add a link, How to add an image, How to make a button, How to make a footer, How to make a navigation bar
Related tags
Frequently asked questions
How do I open a link in a new tab?
target="_blank", and pair it with rel="noopener" so the new tab can't access the original page for security reasons.