Skip to content
html.sh

Links and Images

Links and Images

Section titled “Links and Images”

Links connect the web. Images make it beautiful. Together, they transform plain text into an engaging experience. In this tutorial, you’ll master both.

What you’ll learn:

  • Creating hyperlinks with the <a> element
  • Absolute vs. relative URLs
  • Special link types (email, phone, anchors)
  • Embedding images with the <img> element
  • Image alt text and accessibility
  • Responsive images with the srcset attribute

Prerequisites:

Section titled “Creating Links with <a>”

The anchor element <a> creates clickable links to other pages or websites.

Section titled “Basic Hyperlinks”
Result

The href attribute specifies where the link goes. Notice:

  • Links are blue and underlined by default
  • Text inside the <a> tag is what users click
  • The URL comes after href="
Section titled “Types of Links”
Section titled “1. External Links (Absolute URLs)”

External links go to websites outside your own. Always include the full URL:

Result

Always use https:// (or http://). Without it, browsers treat it as a relative link.

Section titled “2. Internal Links (Relative URLs)”

Internal links navigate within your own website. Use relative paths:

Result

Relative URL examples:

  • about.html — File in the same folder
  • pages/about.html — File in a subfolder
  • ../about.html — File in the parent folder
  • /about — File from the website root
Section titled “3. Email Links”

Use mailto: to create email links:

Result

Adding ?subject=Hello automatically fills the email subject.

Section titled “4. Phone Links”

Use tel: to make clickable phone numbers:

Result

On mobile devices, this opens the phone dialer.

5. Page Anchors

Section titled “5. Page Anchors”

Link to specific sections within a page using anchor IDs:

Result

First create an ID with id="name", then link to it with href="#name".

Section titled “Link Attributes”

Target: Open in New Tab

Section titled “Target: Open in New Tab”

Use target="_blank" to open links in a new tab:

Result

Title: Link Hover Text

Section titled “Title: Link Hover Text”

Add a tooltip that appears on hover:

Result

Adding Images with <img>

Section titled “Adding Images with <img>”

Images make your pages visual. The <img> element embeds images directly:

Result

Understanding <img> Attributes

Section titled “Understanding <img> Attributes”
AttributePurpose
srcPath to the image file (required)
altText if image doesn’t load (required)
widthImage width in pixels
heightImage height in pixels

Alt Text: Critical for Accessibility

Section titled “Alt Text: Critical for Accessibility”

The alt attribute is crucial for users with visual impairments who use screen readers.

Good Alt Text

Section titled “Good Alt Text”
<!-- Describes the image content -->
<img src="dog.jpg" alt="A golden retriever playing in a park">


<!-- Describes what the image shows -->
<img src="chart.jpg" alt="Bar chart showing sales growth from 2020 to 2024">


<!-- For decorative images that add no meaning, use empty alt -->
<img src="decoration.jpg" alt="">

Bad Alt Text

Section titled “Bad Alt Text”
<!-- Too vague -->
<img src="dog.jpg" alt="Image">


<!-- Redundant (already in caption) -->
<img src="dog.jpg" alt="Dogs"> <p>Dogs</p>


<!-- Missing entirely -->
<img src="dog.jpg">
Section titled “Images and Links Together”

You can wrap an image in a link:

Result

This makes the entire image clickable.

Responsive Images with srcset

Section titled “Responsive Images with srcset”

For modern responsive design, use srcset to serve different images on different screen sizes:

<img
  src="image-small.jpg"
  srcset="
    image-small.jpg 480w,
    image-medium.jpg 768w,
    image-large.jpg 1024w
  "
  alt="A beautiful sunset"
  width="400"
  height="300"
>

This tells the browser which image to load based on screen width:

  • Phones see image-small.jpg
  • Tablets see image-medium.jpg
  • Desktops see image-large.jpg

Complete Example: A Product Card

Section titled “Complete Example: A Product Card”
Result

Try It Yourself

Section titled “Try It Yourself”

Create a page with links and images:

Result

Experiment with:

  1. Adding more internal links
  2. Creating email or phone links
  3. Changing image URLs to different images
  4. Creating anchor links to sections

Common Mistakes

Section titled “Common Mistakes”

Summary

Section titled “Summary”
  • <a> tags create clickable links with the href attribute
  • Use absolute URLs for external links, relative URLs for internal links
  • Special URLs: mailto: for email, tel: for phone, # for page anchors
  • <img> embeds images with required src and alt attributes
  • Alt text is essential for accessibility and SEO
  • target="_blank" opens links in new tabs
  • Responsive images use srcset for different screen sizes

Next Steps

Section titled “Next Steps”

Lists

Organize information with ordered and unordered lists. Continue →

Basic Structure

Learn semantic page structure with header, nav, main, and footer. Continue →