Skip to main content

HTML Links and Images

<a href="results.php">View tournament results</a>

Link text should describe the destination without relying on “click here”.

<a href="https://example.com"
   target="_blank"
   rel="noopener">Visit the example website</a>

Only open a new tab when useful, and make the behaviour clear in surrounding text.

Email and page sections

<a href="mailto:help@example.com">Email fictional support</a>
<a href="#testing">Jump to testing evidence</a>

<h2 id="testing">Testing evidence</h2>

Use example.com addresses in demonstrations rather than real school or personal details.

Images

<img src="images/fictional-team.jpg"
     alt="Fictional Falcons team logo">

Alternative text communicates the image’s purpose. A decorative image uses an empty alternative:

<img src="images/divider.svg" alt="">

Do not put essential words only inside an image. Avoid using width and height attributes to distort the aspect ratio; use responsive CSS.

Figures

<figure>
  <img src="images/leaderboard-example.png"
       alt="Leaderboard with the Falcons ranked first on 12 points">
  <figcaption>Example leaderboard produced from fictional data.</figcaption>
</figure>

Check

  • Link text is meaningful.
  • External new tabs use rel="noopener".
  • Demonstrations use fictional addresses and data.
  • Informative images have purposeful alternative text.
  • Decorative images use alt="".
  • Images resize without distortion.
Back to top