Q1. Which attribute defines the destination URL in a link?
Q2. How do you open a link in a new tab?
Q3. What attribute should you add with target="_blank" for security?

Images in HTML

Images make websites visually appealing and informative. The <img> tag is a self-closing element that embeds images.

Basic Syntax

<img src="path/to/image.jpg" alt="Description of image">

Essential Image Attributes

Attribute Purpose Required?
src Image file path or URL ✅ Yes
alt Alternative text (accessibility & SEO) ✅ Yes
width Image width in pixels ❌ Optional
height Image height in pixels ❌ Optional
loading Lazy loading (loading="lazy") ❌ Optional
title Tooltip on hover ❌ Optional

Why Alt Text Matters

  • Accessibility - Screen readers announce alt text to visually impaired users
  • SEO - Search engines use alt text to understand images
  • Fallback - Shows when image fails to load
  • Context - Provides meaning when images are disabled

Writing Good Alt Text:

<!-- ❌ Bad: Too vague -->
<img src="dog.jpg" alt="image">

<!-- ❌ Bad: Redundant -->
<img src="sunset.jpg" alt="Image of a sunset">

<!-- ✅ Good: Descriptive -->
<img src="golden-retriever.jpg" alt="Golden retriever playing with ball in park">

<!-- ✅ Good: Context-aware -->
<img src="ceo-photo.jpg" alt="Jane Smith, CEO of TechCorp">

Image Examples

<!-- Basic image -->
<img src="logo.png" alt="Company Logo">

<!-- Image with dimensions -->
<img src="product.jpg" alt="Red sneakers" width="300" height="200">

<!-- Lazy loading for performance -->
<img src="large-photo.jpg" alt="Team photo" loading="lazy">

<!-- Responsive image (CSS) -->
<img src="banner.jpg" alt="Welcome banner" style="width:100%;max-width:800px;height:auto;">

<!-- Image as link -->
<a href="https://example.com">
  <img src="clickable-banner.jpg" alt="Visit our store - Special offer">
</a>

Responsive Images with <picture>

The <picture> element allows different images for different screen sizes or formats:

<picture>
  <!-- WebP format for modern browsers -->
  <source srcset="image.webp" type="image/webp">
  
  <!-- Mobile image (smaller file) -->
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  
  <!-- Desktop image (larger file) -->
  <source srcset="image-large.jpg" media="(min-width: 601px)">
  
  <!-- Fallback image -->
  <img src="image.jpg" alt="Product showcase">
</picture>

Image Formats

  • JPEG (.jpg) - Photos, complex images with many colors
  • PNG (.png) - Transparent backgrounds, logos, icons
  • WebP (.webp) - Modern format, smaller file size, good quality
  • SVG (.svg) - Vector graphics, logos, icons (scalable)
  • GIF (.gif) - Simple animations, low color images

Complete Image Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Images Example</title>
  <style>
    img { max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>Our Product Gallery</h1>
  
  <!-- Product image with details -->
  <img src="laptop.jpg" 
       alt="Silver laptop with 15-inch display" 
       width="500" 
       height="400"
       loading="lazy"
       title="MacBook Pro 2024">
  
  <!-- Clickable image -->
  <a href="product-details.html">
    <img src="phone.jpg" alt="View smartphone details">
  </a>
  
  <!-- Responsive image -->
  <picture>
    <source srcset="hero-mobile.jpg" media="(max-width: 768px)">
    <source srcset="hero-desktop.jpg" media="(min-width: 769px)">
    <img src="hero-default.jpg" alt="Welcome to our store">
  </picture>
</body>
</html>

Images Quick Quiz

Q4. Which attribute specifies the image file path?
Q5. Which attribute provides text when an image fails to load?
Q6. Which element allows different images for different screen sizes?
Q7. Which format is best for logos with transparent backgrounds?

Practice Tasks

  1. Navigation Menu:
    • Create links to Home, About, Services, Contact pages
    • Add an external link to GitHub (new tab with security)
    • Add email and phone links
  2. Image Gallery:
    • Add 3 images with proper alt text
    • Make images responsive (max-width: 100%)
    • Add lazy loading to images
    • Make one image clickable (links to larger version)
  3. Product Card:
    • Product image with dimensions 300x300
    • Product name as heading
    • Price with old price crossed out
    • "Buy Now" link button
  4. Responsive Hero Image:
    • Use <picture> element
    • Mobile image for screens under 768px
    • Desktop image for larger screens
    • Proper alt text describing the hero image

Lesson Summary

Key Takeaways:

  • Links (<a>) - Use href for destination, target="_blank" for new tab, rel="noopener noreferrer" for security
  • Link types - External, internal, anchor, email (mailto:), phone (tel:), download
  • Images (<img>) - Always include src and alt attributes
  • Alt text - Critical for accessibility, SEO, and when images fail
  • Responsive images - Use <picture> for different screen sizes
  • Image formats - JPEG (photos), PNG (transparency), WebP (modern), SVG (vectors)
  • Performance - Use loading="lazy" for images below the fold
  • Best practices - Descriptive link text, meaningful alt text, responsive design

Links and images are fundamental to web pages. Always prioritize accessibility with proper alt text and security with appropriate link attributes!