← All lessons

Lesson 4 · HTML

Links & Images

~20 min

1. Links: <a>

<a href="https://infotris.com">Visit Infotris</a>
<a href="about.html">About (same site)</a>
<a href="#contact">Jump to section</a>
<a href="mailto:hello@example.com">Email me</a>

href is the destination. For external links, add target="_blank" rel="noopener" so it opens in new tab safely.

2. Images: <img>

<img src="photo.jpg" alt="Student learning HTML on laptop" width="400" height="300">
<figure>
  <img src="chart.png" alt="Bar chart of HTML usage">
  <figcaption>HTML powers 95% of websites.</figcaption>
</figure>

alt is required — describes image for screen readers and when image fails. width/height prevents layout shift.

Avoid

  • Missing alt: <img src="x.jpg"> → inaccessible
  • Wrong href: href="abouthtml" (missing dot)
  • Unclosed <a> that makes whole page a link
Interactive Practice

Practice: Links & Images

Try the examples in your editor and check off when done.

0% complete
Check when done
Quiz

Test Your Understanding

1. Which attribute is required for <img>?

2. How to link to same-page section?