Links and images

Create links to other pages and display images with the a and img tags.

7 min · 3 questions

The "HyperText" in HTML is precisely the ability to connect pages to one another with links. A link is created with the <a> tag (short for anchor). Its destination is given by the href attribute (hypertext reference), which contains a URL: the address of a web page, such as https://en.wikipedia.org. The text placed between <a> and </a> becomes clickable.

<p>My favorite pages:</p>
<a href="https://en.wikipedia.org">Visit Wikipedia</a>
<a href="contact.html">See the contact page</a>

To display an image, you use the <img> tag. It is a self-closing tag: it has no content and no closing tag - everything fits inside the tag itself. Two attributes are essential. src (source) says where the image file is located. alt (alternative text) describes the image in words: this text is displayed if the image fails to load, and it is read aloud by the screen readers used by visually impaired people.

<img src="images/cat.jpg" alt="A sleeping ginger kitten">
<img src="logo.png" alt="My site's logo">
<img src="beach.jpg" alt="A beach at sunset">

You can combine the two: an image placed inside an <a> element becomes clickable. That is exactly what website logos do - they take you back to the home page when you click them.

<a href="https://en.wikipedia.org">
  <img src="wiki-logo.png" alt="Wikipedia logo">
</a>

Knowledge check

Make sure you remember the key points of this lesson.

1. Which attribute contains the destination address of a link?
   • src
   • href
   • alt
   • lang
2. What is the alt attribute of an image for?
   • Describing the image if it does not display
   • Setting the size of the image
   • Giving the address of the image file
3. Does the <img> tag have a closing tag?
   • Yes, you must always write </img>
   • No, it is a self-closing tag
   • Only if the image is large