Master HTML From Scratch

Clear, interactive, and structured HTML lessons designed for beginners.

COURSE SYLLABUS
1. Introduction to HTML
Introduction to HTML HTML Document Structure How HTML Works HTML vs CSS vs JavaScript
2. Basic HTML
Basic HTML HTML Elements HTML Attributes Headings Paragraphs Comments Line Breaks Horizontal Rules
3. HTML Tags
HTML Tags
4. Text Formatting
Text Formatting Text Formatting Elements Bold & Strong Italic & Emphasis Underline & Highlight Subscript & Superscript Quotations Abbreviations Special Characters
5. Links & Media
Links & Media Hyperlinks Link Attributes Images Image Attributes Audio Video Iframes
6. Lists & Tables
Lists & Tables Unordered Lists Ordered Lists Description Lists Nested Lists Tables Table Headers Colspan & Rowspan
7. HTML Forms
Forms Form Basics Form Attributes Input Types Labels Text Area Select & Option Radio Buttons Check Boxes Buttons Form Validation
8. Semantic HTML
Semantic HTML Semantic Elements Header Nav Main Section Article Aside Footer HTML Page Layout
9. HTML5 Features
HTML5 Features HTML5 Introduction New Input Types Audio & Video Canvas SVG Progress & Meter Details & Summary Data Attributes
10. Advanced HTML
Advanced HTML Global Attributes Meta Tags Viewport HTML Accessibility ARIA Basics HTML Best Practices SEO-Friendly HTML

HTML Images

Images make web pages more attractive, informative, and easier to understand. HTML provides the <img> element to display images on a webpage.

1. Introduction to HTML Images

The HTML <img> element is used to embed an image into a webpage.

The <img> element is an empty element, which means it does not require a closing tag. 

<img src="image.jpg" alt="Sample Image">

2. Basic Image Syntax

The basic syntax of an HTML image is: 

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

Two important attributes are src and alt.

Attribute Purpose
src Specifies the image file or image URL.
alt Provides alternative text for the image.

3. The src Attribute

The src attribute specifies the path or URL of the image. 

<img src="flower.jpg" alt="Beautiful Flower">

If the image is stored inside an images folder: 

<img src="images/flower.jpg" alt="Beautiful Flower">

An external image can also be loaded using a complete URL: 

<img src="https://example.com/images/photo.jpg"
     alt="Example Photo">

4. The alt Attribute

The alt attribute provides alternative text for an image. It is displayed or used when the image cannot be loaded. 

<img src="student.jpg" alt="Student studying HTML">
Important: Always provide meaningful alternative text for informative images. For decorative images, an empty alt value can be appropriate.

5. Complete Image Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Images</title>
</head>
<body>

    <h1>Welcome to HTML</h1>

    <img src="images/html.jpg"
         alt="HTML learning image">

</body>
</html>

6. Image Width and Height

The width and height attributes can be used to specify the dimensions of an image. 

<img src="flower.jpg"
     alt="Flower"
     width="300"
     height="200">

The values are normally specified in pixels when used as HTML attributes.

7. Example with Width and Height

<img src="images/nature.jpg"
     alt="Nature"
     width="500"
     height="300">
Example Output:
Sample Image Area

8. Image from a Folder

Organizing images inside a separate folder is common in web projects.

Example folder structure:

MyWebsite/
│
├── index.html
│
└── images/
    ├── logo.png
    ├── banner.jpg
    └── student.jpg

To display logo.png: 

<img src="images/logo.png" alt="Website Logo">

9. Relative Image Path

A relative path points to an image based on the location of the current HTML file. 

<img src="images/logo.png" alt="Logo">

If the image is one folder above the current page: 

<img src="../images/logo.png" alt="Logo">

The ../ notation moves one directory level upward.

10. Absolute Image URL

An absolute URL contains the complete address of the image. 

<img src="https://example.com/images/logo.png"
     alt="Example Logo">

Absolute URLs are useful when referencing images hosted on another website or content delivery system.

11. Image as a Link

An image can be placed inside an <a> element to make the image clickable. 

<a href="https://www.example.com">
    <img src="images/logo.png" alt="Visit Example Website">
</a>

When the user clicks the image, the browser follows the link.

12. Image with Border

CSS can be used to add a border around an image. 

<img src="images/photo.jpg"
     alt="Photo"
     style="border: 3px solid black;">

13. Image with CSS Width

CSS provides more flexible control over image dimensions. 

<img src="images/banner.jpg"
     alt="Banner"
     style="width: 500px;">

14. Responsive Images

A responsive image adjusts to the available screen width. A common CSS technique is to use max-width: 100%. 

<img src="images/banner.jpg"
     alt="Website Banner"
     style="max-width: 100%; height: auto;">
Why Responsive Images?
  • They work better on mobile devices.
  • They can fit different screen sizes.
  • They help prevent horizontal scrolling.

15. Using the style Attribute

Inline CSS can be used to customize image appearance. 

<img src="images/photo.jpg"
     alt="Photo"
     style="width:300px; height:auto; border-radius:10px;">

16. Image Alignment

CSS can be used to position an image within a webpage. 

<img src="images/photo.jpg"
     alt="Photo"
     style="display:block; margin:auto; width:300px;">

The example uses margin:auto to center the image when the image is displayed as a block element.

17. Image Formats

Different image formats are commonly used on websites.

Format Common Use
JPG / JPEG Photographs and complex images.
PNG Images requiring transparency or lossless quality.
GIF Simple animations and limited-color graphics.
SVG Scalable vector graphics such as logos and icons.
WebP Modern web images with efficient compression.

18. Image Title

The title attribute can provide additional information about an image. 

<img src="images/logo.png"
     alt="Company Logo"
     title="Company Logo">

19. Using Figure and Figcaption

The <figure> element can group an image with its caption. 

<figure>

    <img src="images/mountain.jpg"
         alt="Mountain landscape"
         width="500">

    <figcaption>
        Beautiful Mountain Landscape
    </figcaption>

</figure>
Sample Mountain Image
Beautiful Mountain Landscape

20. Image Loading and Broken Images

If the browser cannot find or load an image specified by the src attribute, the image may not be displayed. 

<img src="wrong-image.jpg"
     alt="Sample Image">

A meaningful alt value helps communicate the intended content when the image cannot be displayed.

21. Accessibility Best Practices

  • Use meaningful alternative text for informative images.
  • Keep image descriptions concise and useful.
  • Use an empty alt attribute for purely decorative images when appropriate.
  • Avoid putting important text only inside images.
  • Use suitable image dimensions and formats.

22. Common Mistakes

  • Forgetting the src attribute.
  • Using an incorrect image path.
  • Forgetting the alt attribute.
  • Using extremely large images unnecessarily.
  • Using inappropriate image formats.
  • Using fixed dimensions that break the layout on small screens.

23. Practice Task

Create an HTML page containing:

  1. A logo image.
  2. An image loaded from an images folder.
  3. An image with width and height.
  4. An image with meaningful alt text.
  5. A responsive image using CSS.
  6. An image wrapped inside a hyperlink.
  7. A figure containing an image and caption.

24. Complete Practice Example

<!DOCTYPE html>
<html>
<head>
    <title>My Image Page</title>
</head>
<body>

    <h1>My Favorite Place</h1>

    <figure>

        <img src="images/nature.jpg"
             alt="Beautiful nature landscape"
             style="max-width:100%; height:auto;">

        <figcaption>
            Beautiful Nature Landscape
        </figcaption>

    </figure>

    <br>

    <a href="https://www.example.com">
        <img src="images/logo.png"
             alt="Example Website Logo"
             width="150">
    </a>

</body>
</html>

Summary

HTML images are displayed using the <img> element. The src attribute specifies the image location and the alt attribute provides alternative text. Images can be resized, styled, made responsive, used as links, and combined with <figure> and <figcaption> for structured image content.

← Previous: Link Attributes Next: Image Attributes →