HTML Links and Images
Connect pages and show pictures with alternative text.
On this page
The concept
The a element makes a link, and href gives its destination. The img element shows a picture from src. The alt attribute describes the image for people who cannot see it, and width and height let the browser reserve space before the image loads.
Code example
HTML
<a href="/tutorials">Browse tutorials</a>
<img src="logo.png" alt="Programonic logo" width="120" height="120">Follow the code
Open the walkthrough to inspect the example one step at a time.
Show guided walkthrough
Guided walkthroughReady
1
<a href="/tutorials">Browse tutorials</a>2
<img src="logo.png" alt="Programonic logo" width="120" height="120">Follow the example
Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.
View the complete dry-run table
| Step / line | What happens | State after step | Output so far |
|---|---|---|---|
| A link whose destination is /tutorials. | — | — | |
| An image with alternative text and a reserved size. | — | — |
Behind the scenes
How HTML processes this code
The browser parses HTML into a document tree and renders its elements. HTML does not execute as a sequence of program statements.