Lesson · 9 min

Links and images

Links

A link is an a element. The a stands for anchor. The href attribute holds the address that the link opens.

<a href="https://example.com/guide">Read the guide</a>

An attribute gives more detail about an element. It goes inside the opening tag, as a name and a value in quotation marks. The text between the tags is what the reader clicks.

Links do not open in the preview. The preview only shows that the link is there.

Links that open in a new tab

By default, a link replaces the current page. The target="_blank" attribute opens the link in a new tab instead. When you use it, also add rel="noopener". This stops the new page from taking control of the old one.

Images

An img element shows a picture. It has two attributes that you should always write:

src is the address of the picture file.
alt is a short text that describes the picture. Screen readers read it aloud, and the browser shows it when the picture cannot load.

An img has no closing tag.

<img src="harbor.jpg" alt="Fishing boats in a harbor at dawn" width="240">

The preview in Absolute Path cannot load pictures from other websites. Use this small picture for the task. It is a drawing that is stored inside the address:

data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23dbeafe'/%3E%3Ccircle cx='84' cy='26' r='14' fill='%23f59e0b'/%3E%3Cpath d='M0 80L40 36L80 80Z' fill='%2365a30d'/%3E%3C/svg%3E

Your turn

Do the four tasks in order. Use the address above as the src value of your picture.

Tasks

4 to do

Task 1, not checked yet. Add a link with the text Trail map. It goes to https://example.com/map. Use an a element with an href attribute.
Task 2, not checked yet. Make the link open in a new tab. Add target="_blank" and rel="noopener" to the a element.
Task 3, not checked yet. Add a picture with an img element. Use the src address from the lesson text. Set the alt text to An orange sun over a green hill.
Task 4, not checked yet. Set the width of the picture to 240 with the width attribute.

Task 1 of 4

Add a link with the text Trail map. It goes to https://example.com/map. Use an a element with an href attribute.