Topic 8 · 8 of 43

Hyperlinks and Images

All in one: every link and image, side by side

What this example compares

Making a link: <a href> vs <a> with no href vs <link>
Where a link points: absolute https://github.com vs relative css.html, ./css.html, images/campus.jpg, ../about.html vs root /index.html, and the capital-letter trap
Jumping inside a page: href="#contact" vs "about.html#team" vs "contact", "/contact", ".contact"
Links to other apps: mailto: vs tel: vs the made-up email:, call:
Where it opens: target="_self" vs "_blank" vs "_blank" + rel="noopener noreferrer", with rel="nofollow" and "license"
Open or save: no download vs download vs download="hello.txt"
What the link says: "Click here" vs "View our pricing plans" vs title
Go or do: <a href> vs <button> vs the fakes <a href="#"> and <div>
The image element: src + alt vs a missing file vs no alt
Which alt text: informative vs decorative alt="" vs functional alt="Print" vs logo vs alt="photo"
Size and timing: width + height vs width only vs no size vs loading="lazy"
A clickable picture: <a><img></a> vs <img href>
File formats: JPG vs PNG vs GIF vs WebP/AVIF vs SVG
Captions: <figure> + <figcaption> vs <img> + <p> vs <caption>
The browser picks a file: src vs srcset + sizes
A file per condition: <picture> with <source media> vs <source type> vs no <img>

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see sixteen panels (a few short ones sit two side by side) and a green Contact box at the bottom. Panels 1 to 8 are links: in panel 1 only the first box is blue and underlined; panels 2 to 7 look alike on purpose, because a wrong path, a made-up email: scheme or a missing rel gives no warning on screen; panel 8 shows two links, a real button, and a fake link that is plain text. From panel 9 on, the campus drawing appears wherever its file is found, and a small broken-picture icon with words appears wherever the browser asked for a file that is not in the demo: the words are the alt text (Main campus building at sunset, Print, Lovely Professional University, photo, LPU home in blue, Main campus, Campus). Panel 11 shows an empty reserved box next to a box with nothing at all, panel 14 shows the captioned figure indented, and in panel 16 the last box is empty. On a phone narrower than 600 pixels, the first box of panel 16 shows "Campus" too. There is no script, so the Console stays empty.

Quick check: in panel 10, if the file of the second box (alt="") goes missing, why do no words appear, while the fifth box still shows the word "photo"?

An empty alt="" says "this picture is decoration, there is nothing to say", so the browser shows no words (only the empty space that width and height keep) and a screen reader stays silent. alt="photo" is real text, so it is shown and read out, even though it tells nobody anything useful.