Images in HTML

An image needs a source, alternative text, and dimensions to reserve space.

<img src="/img/keyboard.png" alt="A split mechanical keyboard"
     width="640" height="360">
<img src="/img/divider.svg" alt="" width="200" height="8">
<img src="/img/chart.png" alt="Words per minute over six weeks"
     width="480" height="320" loading="lazy">

How it works

alt describes the image; leave it empty for pure decoration.
width and height prevent the page from jumping as it loads.
loading=lazy defers images that start below the fold.

The run, in numbers

Lines: 5
Characters to type: 252
Tokens: 48
Three-star pace: 65 tpm

At the three-star pace of 65 tokens a minute, this run takes about 44 seconds.

Type this snippet

Step 5 of 7 in Links & images, step 20 of 28 in Document structure.

← Previous Next →