Links and Images

The web is called the web for a reason — pages connect to each other like threads in a spider's web. The <a> tag (short for anchor) creates these connections:

<a href="https://example.com">Click here to visit Example</a>

The href attribute tells the browser where the link should go. When someone clicks "Click here to visit Example," their browser navigates to https://example.com.

You can also link to other pages on your own site using a relative path:

<a href="about.html">About Me</a>
<a href="contact.html">Get in Touch</a>

Links don't have to be plain text — you can wrap them around anything, including images and buttons. The text between the opening and closing tags is what the user sees and clicks on.

The <a> tag supports several useful attributes beyond just href:

<!-- Open in a new browser tab -->
<a href="https://example.com" target="_blank">Visit Example</a>

<!-- Show a tooltip when hovering -->
<a href="https://example.com" title="Goes to Example.com">Visit Example</a>

<!-- Both attributes together -->
<a href="https://example.com" target="_blank" title="Opens in a new tab">
  Visit Example
</a>

• target="_blank" — opens the link in a new browser tab. Use this for external links so visitors don't lose your page.
• title — shows a small tooltip when the user hovers their mouse over the link. Great for giving extra context.

Accessibility tip: link text should describe where the link goes. Avoid "click here" — instead use something like "download the guide" or "view our portfolio."

Images are added with the <img> tag. Unlike most tags, <img> is self-closing — there's no </img>:

<img src="photo.jpg" alt="A sunset over the ocean">

Two essential attributes:

• src (source) — where the image file is located. It can be a filename in the same folder, a path, or a full URL.
• alt (alternative text) — a description of the image. This is what screen readers say aloud, and what displays if the image fails to load.

Why alt text matters: it makes your site accessible to visually impaired users, helps search engines understand your images, and provides a fallback when images don't load. Always include it.

You can control how large an image appears using the width and height attributes (values are in pixels):

<img src="photo.jpg" alt="A sunset" width="400" height="300">

A better approach: set image sizes later with CSS (we'll cover this in Module 2). For now, just be aware that huge image files slow down your page. If a photo from your camera is 4000 pixels wide, resize it first — most websites display images at 300–800 pixels wide.

Some common image formats on the web:

• JPEG (.jpg) — best for photos. Small file size, good quality.
• PNG (.png) — best for logos, icons, and images that need transparent backgrounds.
• WebP (.webp) — a modern format that's even smaller than JPEG and PNG. Most browsers support it now.

Want to make an image clickable? Wrap it in an <a> tag:

<a href="https://example.com">
  <img src="banner.jpg" alt="Click to visit Example">
</a>

Now when someone clicks the image, they'll go to https://example.com. This is how logos, product photos, and thumbnail galleries work on real websites.

Create a page with all three elements you've learned so far:

• A heading (use <h1>)
• A paragraph that includes a link to your favorite website
• An image (use a free image URL like https://placehold.co/400x300 if you don't have one)

Remember: the image needs both src and alt. The link needs href.