Home/Learn/HTML, CSS & Responsive/Text, Links and Buttons

Text, Links and Buttons

Beginner

Semantic HTML

A link goes somewhere, a button does something. Getting that one distinction right fixes more accessibility problems than any ARIA attribute.

Overview

The link-versus-button confusion is the most common markup error in professional codebases, and it has real consequences: a link opens in a new tab with Ctrl-click, appears in the browser history, and is announced as a link; a button submits, toggles, or opens, is activated with Space as well as Enter, and does not create a history entry. A div with an onClick is neither, and is invisible to a keyboard. The rest of text semantics is a small vocabulary — em, strong, time, abbr, code — that costs nothing and carries meaning styling cannot.

Link or Button

One question decides it: does the URL change?

Does the URL change?

// Navigates -> a link
<a href="/dsa/problems">All problems</a>

// Performs an action on this page -> a button
<button type="button" onclick="openDialog()">Show hint</button>

// The differences you get for free with the right element:
//              <a href>            <button>
// keyboard     Enter               Enter AND Space
// Ctrl+click   opens a new tab     nothing
// history      yes                 no
// announced    "link"              "button"
// right-click  copy link address   nothing

// The two failures:
<a href="#" onclick="save()">Save</a>       // jumps to top, adds history
<div onclick="go()">Go</div>                // unreachable by keyboard

// Inside a form, button defaults to type="submit" —
// which is why a "Cancel" button reloads the page:
<button>Cancel</button>                     // submits!
<button type="button">Cancel</button>       // correct

Writing Links Properly

The text is the accessible name, and screen-reader users often hear it out of context.

Link text must make sense alone

// A screen reader can list every link on the page. This list is useless:
<a href="/a">Click here</a>  <a href="/b">Read more</a>  <a href="/c">Here</a>

// Self-describing links
<a href="/dsa/two-sum">Solve Two Sum</a>
<a href="/pricing">See Pro pricing</a>

// External and new-tab links warn the user
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Documentation <span aria-hidden="true">↗</span>
  <span class="sr-only">(opens in a new tab)</span>
</a>
// rel="noopener" stops the new page reaching window.opener.

// Other link types
<a href="mailto:hi@aicancode.org">Email us</a>
<a href="tel:+919999999999">Call</a>
<a href="/report.pdf" download>Download the report (PDF, 2MB)</a>

// Never remove the focus outline without a replacement:
a:focus-visible { outline: 2px solid; outline-offset: 2px }

Text Semantics

A small vocabulary that carries meaning styling alone cannot.

strong, em, time, code, lists

<p>Use a <strong>hash map</strong>, not a <em>nested loop</em>.</p>
// strong = importance, em = emphasis. Both are announced.
// <b> and <i> are purely visual — use them only when there is no
// added meaning (a ship name, a technical term).

<time datetime="2026-09-08">8 September 2026</time>
<abbr title="Time to Interactive">TTI</abbr>
<code>Array.prototype.at()</code>
<pre><code>const x = 1</code></pre>       <!-- pre preserves whitespace -->
<kbd>Ctrl</kbd> + <kbd>K</kbd>
<mark>highlighted</mark>
<del>old price</del> <ins>new price</ins>

<blockquote cite="https://…">
  <p>…</p>
  <footer>— <cite>Source</cite></footer>
</blockquote>

// Lists carry a count: a screen reader announces "list, 5 items".
<ul>  unordered      <ol>  ordered, sequence matters
<dl><dt>Term</dt><dd>Definition</dd></dl>

// Do not fake a list with divs and bullet characters.

Key Points to Remember

1A link changes the URL; a button acts on the current page — that single question decides the element
2A button inside a form defaults to type="submit", which is why a Cancel button can reload the page
3Link text is the accessible name and is heard out of context, so "click here" is unusable
4target="_blank" needs rel="noopener" and a visible or screen-reader warning
5strong and em carry announced meaning; b and i are purely visual, and lists announce their item count

Interview Questions

When should you use a link and when a button?

Easy

Why is "Click here" bad link text?

Easy

What is the difference between <strong> and <b>?

Medium

Ask Aria about Text, Links and Buttons

Your personal AI tutor — ask anything about this concept

Revision Status

Personal Notes

Discussion

Loading discussion…

Document Structure and Landmarks

Forms — Labels, Input Types and Autofill