HTML Links and Images

Links support navigation and images communicate visual information. Both need meaningful text alternatives.

Links

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

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

For an external link opened in a new tab:

<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.