Links and Images

How to add hyperlinks and images to your web pages

Links and Images

Links and images are what make the web interactive and visual.

The <a> (anchor) element creates clickable links:

<!-- Link to another page -->
<a href="https://example.com">Visit Example</a>

<!-- Link to a page on your site -->
<a href="/about.html">About Us</a>

<!-- Link that opens in a new tab -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    External Link
</a>

<!-- Link to a section on the same page -->
<a href="#contact">Jump to Contact</a>
HTML

Images

The <img> element displays images:

<img src="photo.jpg" alt="A sunset over the ocean" width="800" height="600">
HTML

Required Attributes

  • src - Path to the image file
  • alt - Alternative text for screen readers and when the image fails to load

Optional Attributes

<img
    src="photo.jpg"
    alt="Description of the image"
    width="800"
    height="600"
    loading="lazy"
>
HTML

Linking Images

Wrap an image in an anchor tag to make it clickable:

<a href="/gallery">
    <img src="thumbnail.jpg" alt="View full gallery">
</a>
HTML

Figure and Figcaption

Use <figure> to associate an image with a caption:

<figure>
    <img src="chart.png" alt="Sales data for Q4 2024">
    <figcaption>Figure 1: Quarterly sales report</figcaption>
</figure>
HTML

Image Formats

Format Best For Features
JPEG Photos Small file size, lossy compression
PNG Graphics, screenshots Lossless, supports transparency
WebP Both photos and graphics Modern format, best compression
SVG Icons, logos Vector-based, scales perfectly
GIF Simple animations Limited colors, supports animation