HTMLLesson 4 of 10Jump to practice

Links and images

Connect pages with the a element and show pictures with img, using attributes to add the details.

So far every element has been a tag plus content. Links and images also need extra information: where the link goes, which image to show. That extra information goes in attributes.

An attribute sits inside the start tag and is written as name="value".

A link uses the <a> element. The href attribute holds the address.

A link
Open in editor
<p>
Read more on
<a href="https://developer.mozilla.org/">MDN Web Docs</a>.
</p>
Result

To open a link in a new tab, add target="_blank":

<a href="https://example.com" target="_blank">Opens in a new tab</a>

Images

An image uses <img>. It is an empty element, so it has no end tag.

  • src is the address of the image file.
  • alt describes the image in words. Screen readers read it aloud, and it appears if the image fails to load.
An image
Open in editor
<img
src="https://picsum.photos/id/1018/400/200"
alt="A mountain valley with a river"
width="400"
>
<p>Change the width, or break the src address to see the alt text.</p>
Result

Linking an image

Elements nest, so you can put an image inside a link to make it clickable:

<a href="/gallery/">
  <img src="photo.jpg" alt="Open the photo gallery">
</a>

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Complete the link so it goes to https://example.com.

    <a ="https://example.com">Visit Example</a>

  2. Exercise 2

    Fill in the two attributes every image needs: the file address and a text description.

    <img ="cat.jpg" ="A gray cat asleep on a sofa">

  3. Exercise 3

    Make this link open in a new tab.

    <a href="https://example.com" target="">Example</a>

Quiz: 3 questions

1. Where are attributes written?
2. What is the alt attribute for?
3. A photo is purely decorative. What alt should it have?

Finish the practice to complete this lesson.

Sign in to keep your progress on any device.