Links and Images

Links

The anchor tag <a> creates a hyperlink. The href attribute holds the destination.

<a href="https://example.com">Visit Example</a>
<a href="https://example.com" target="_blank" rel="noopener">Open in a new tab</a>
<a href="mailto:hello@example.com">Send an email</a>
<a href="#section2">Jump to section 2</a>

• target="_blank" opens a new tab. Add rel="noopener" for safety.
• mailto: opens the visitor's email app.
• #id jumps to an element with that id on the same page.

Absolute and relative paths

• Absolute: the full address, like https://example.com/page.html.
• Relative: a path from the current file, like about.html or images/photo.jpg.

Images

<img src="images/photo.jpg" alt="Students studying in a library" width="600" height="400">

• src is the image location.
• alt describes the image for screen readers and shows if the image fails to load. Never skip it.
• width and height help the browser reserve space so the page does not jump while loading.

Image as a link

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

Good practice

• Use descriptive link text such as Read the HTML guide instead of click here.
• Compress images before uploading. Large images slow the page.
• Use modern formats such as WebP when you can.

Practice

Create a page with a link to a website you like, a link to your own second page and one image with proper alt text.