40 Mins beginner
4. Links & Images
HTML
Links & Images
Links are the fabric of the internet — they connect every page together. Images make pages visual and engaging. Both use attributes to work.
🔗 The Anchor Tag — Creating Links
Links are made with the <a> (anchor) tag. The href attribute sets the destination.
<!-- Link to an external website -->
<a href="https://google.com">Visit Google</a>
<br><br>
<!-- Open link in a new tab -->
<a href="https://github.com" target="_blank">GitHub (opens in new tab)</a>
<br><br>
<!-- Link to another page in your own project -->
<a href="/about.html">About Us (internal link)</a>
<br><br>
<!-- Jump to a section on the same page -->
<a href="#contact">Jump to Contact Section</a>
🖼️ The Image Tag
Images use the <img> tag. It is self-closing — no closing tag needed. The src sets the source, and alt is required for accessibility.
<!-- Image from the internet -->
<img
src="https://picsum.photos/300/150"
alt="A random placeholder image"
width="300"
height="150"
>
<br><br>
<!-- Smaller image -->
<img src="https://picsum.photos/100/100" alt="Square image">
⚠️Never skip alt! Screen readers for visually impaired users read the alt text aloud. It also shows if the image fails to load, and helps Google understand your images.
🔗 Image as a Link
Wrap an <img> inside an <a> tag to make a clickable image:
<a href="https://google.com" target="_blank">
<img src="https://picsum.photos/200/80" alt="Click me to visit Google">
</a>
Knowledge Check
Ready to test your understanding of 4. Links & Images?