# HTML Links and Images

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

## Links

~~~html
<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:

~~~html
<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

~~~html
<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

~~~html
<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:

~~~html
<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

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