Skip to main content
HTML5 Complete Guide for Beginners 💻

How Do You Add Images in HTML5?

By October 7, 2026No Comments

You add images in HTML5 using the <img> element with a src attribute that specifies the image location and an alt attribute that describes the image. The basic syntax is <img src="image.jpg" alt="Description of the image">, making it easy to display images on webpages while supporting accessibility and SEO.

Images are an essential part of modern websites. They can make blog posts more engaging, explain complex concepts, showcase products, display portfolio projects, and help visitors understand information more quickly.

HTML5 provides the <img> element for displaying images on webpages. Unlike many HTML elements, <img> does not require a closing tag because it is a void element. You specify the image location with

How Do You Create Links in HTML5

the src attribute and provide alternative text with the alt attribute.

Whether you are a student learning web development, a developer building websites, or a freelancer creating websites for clients, knowing how to add and optimize images is an important HTML5 skill.

What Is the HTML5 <img> Element?

The <img> element tells the browser to display an image on a webpage.

The basic syntax is:

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

There are two essential attributes beginners should understand:

  • src — specifies the location or URL of the image.
  • alt — provides alternative text describing the image.

For example:

<img src="html5-code.jpg" alt="HTML5 code displayed on a computer screen">

When the browser loads the page, it retrieves the image specified by src and displays it.

How Do You Add an Image in HTML5?

Adding an image is a simple process.

Step 1: Add the <img> Element

Start by writing:

<img>

This tells the browser that you want to display an image.

Step 2: Add the src Attribute

Next, specify where the image is located:

<img src="image.jpg">

The src attribute stands for source.

It can point to an image stored in your website’s files or to an appropriate image URL.

Step 3: Add Alternative Text

Add an alt attribute:

<img src="image.jpg" alt="A laptop displaying HTML5 code">

The alt attribute provides a text alternative that can be useful when the image cannot be displayed and for people using screen readers.

Step 4: Use a Complete Image Element

A basic HTML5 image therefore looks like this:

<img src="image.jpg" alt="A laptop displaying HTML5 code">

There is no </img> closing tag.

What Is the src Attribute?

The src attribute specifies the image source.

For example:

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

In this example, the browser looks for logo.png inside the images folder.

You can also use an absolute URL:

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

However, for images that belong to your own website, using properly organized local image files is usually easier to manage.

Relative vs. Absolute Image URLs

There are two common ways to specify image locations.

Relative URL

A relative URL points to a file based on the current website structure.

<img src="images/photo.jpg" alt="Sample photo">

If the image is located in the same folder as the HTML file, you can use:

<img src="photo.jpg" alt="Sample photo">

Absolute URL

An absolute URL includes the complete web address:

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

Relative URLs are commonly used for images hosted within your own website, while absolute URLs are useful when referencing resources hosted elsewhere.

Why Is the alt Attribute Important?

The alt attribute is one of the most important parts of an HTML image.

For example:

<img src="developer.jpg" alt="Web developer working on an HTML5 project">

The alternative text describes the purpose or content of the image.

Accessibility

Screen readers can use alternative text to communicate relevant image information to users who cannot see the image.

When an Image Fails to Load

If the image cannot be loaded, the browser may display the alternative text instead.

SEO

Descriptive and relevant alternative text can help search engines understand the subject of an image. However, alt text should describe the image naturally rather than being filled with keywords.

Good Alt Text

<img src="html-course.jpg" alt="Student learning HTML5 on a laptop">

Poor Alt Text

<img src="html-course.jpg" alt="HTML5 HTML tutorial HTML5 course HTML">

Avoid keyword stuffing. Write useful descriptions for real users.

How Do You Set Image Width and Height?

You can specify an image’s dimensions using the width and height attributes.

<img src="photo.jpg" alt="Mountain landscape" width="800" height="500">

Defining dimensions can help the browser reserve the appropriate space for the image while the page loads.

However, responsive websites also need to ensure images adapt to different screen sizes.

A common CSS approach is:

img {
    max-width: 100%;
    height: auto;
}

This helps prevent images from overflowing their containers on smaller screens.

How Do You Make Images Responsive?

A responsive image adjusts appropriately to the available screen width.

For example:

<img src="website-design.jpg"
     alt="Responsive website design on multiple devices">

Then use CSS:

img {
    max-width: 100%;
    height: auto;
}

This is especially important for mobile-friendly websites.

An image that looks perfect on a large desktop monitor may otherwise become too wide on a smartphone.

How Do You Add an Image With a Caption?

If an image needs a caption, HTML5 provides the <figure> and <figcaption> elements.

For example:

<figure>
    <img src="html5-example.jpg" alt="Example HTML5 code">
    <figcaption>An example of basic HTML5 image markup.</figcaption>
</figure>

The <figure> element groups the image and its related content, while <figcaption> provides a caption.

This can be particularly useful for:

  • Tutorials
  • Technical documentation
  • Photography websites
  • Product demonstrations
  • Educational content
  • Research articles

How Do You Add a Link to an Image?

You can make an image clickable by placing the <img> element inside an <a> element.

For example:

<a href="/html5-tutorial/">
    <img src="html5-guide.jpg" alt="HTML5 beginner guide">
</a>

When the user clicks the image, they are taken to the linked page.

This technique is commonly used for:

  • Website logos
  • Product images
  • Blog thumbnails
  • Portfolio projects
  • Gallery images
  • Promotional banners

How Do You Add a Local Image in HTML5?

Suppose your project has this structure:

website/
├── index.html
└── images/
    └── laptop.jpg

You can display the image with:

<img src="images/laptop.jpg" alt="Laptop used for web development">

The browser looks inside the images directory and loads laptop.jpg.

Organizing images into dedicated folders makes larger projects easier to maintain.

Common Image Formats for Websites

Different image formats are useful for different situations.

JPEG

JPEG is commonly used for photographs and images containing many colors.

PNG

PNG can support transparency and is often useful for graphics, screenshots, and images where lossless quality is important.

SVG

SVG is a vector format that works particularly well for logos, icons, and other scalable graphics.

WebP

WebP can provide efficient image compression while maintaining good visual quality and is widely supported by modern browsers.

AVIF

AVIF is another modern image format designed to provide efficient compression and high image quality.

The best format depends on the type of image, browser support requirements, and performance goals.

How Do You Optimize Images for a Website?

Adding an image is only part of the process. Large, unoptimized images can slow down webpages.

Consider these practices:

  • Resize images to appropriate dimensions.
  • Compress images before uploading them.
  • Choose an appropriate image format.
  • Use responsive images when necessary.
  • Provide meaningful alt text.
  • Avoid unnecessarily large files.
  • Use lazy loading for suitable below-the-fold images.
  • Keep image filenames descriptive.

For example, instead of:

IMG12345.jpg

a descriptive filename could be:

html5-image-element-example.jpg

Descriptive filenames can make your media library easier to manage and can provide additional context about the image.

How Do You Use Lazy Loading?

For images that are not immediately visible when the page loads, you can use the loading="lazy" attribute:

<img src="tutorial.jpg"
     alt="HTML5 tutorial example"
     loading="lazy">

This tells supporting browsers that the image can be loaded when it approaches the user’s viewport.

Lazy loading can be useful on pages containing many images, such as long blog posts, galleries, and product listings.

However, important above-the-fold images should be handled carefully because delaying critical images can hurt the initial visual experience.

Common Mistakes When Adding Images in HTML5

Forgetting the src Attribute

This does not specify an image source:

<img alt="HTML5 example">

You normally need a valid source:

<img src="html5-example.jpg" alt="HTML5 example">

Forgetting alt

Avoid:

<img src="photo.jpg">

For meaningful images, provide useful alternative text:

<img src="photo.jpg" alt="Student working on a web development project">

Using Incorrect File Paths

If your image is stored inside an images folder, make sure the path reflects that:

<img src="images/photo.jpg" alt="Sample photo">

A wrong path can result in a broken image.

Using Extremely Large Images

Uploading a huge image and displaying it at a small size can waste bandwidth and affect page performance.

Resize and compress images appropriately before using them.

Using Keyword-Stuffed Alt Text

Alt text should describe the image naturally. It should not be written primarily for search engine manipulation.

HTML5 Images and SEO

Images can contribute to a better search experience when they are properly implemented.

For SEO-friendly images:

  • Use descriptive filenames.
  • Write useful alt text.
  • Compress images.
  • Use appropriate dimensions.
  • Keep images relevant to the surrounding content.
  • Use responsive techniques.
  • Avoid unnecessary decorative images in the content.
  • Provide captions where they genuinely help users.

For example:

<figure>
    <img src="html5-image-element.jpg"
         alt="HTML5 image element showing src and alt attributes">
    <figcaption>
        Basic HTML5 syntax for adding an image to a webpage.
    </figcaption>
</figure>

This gives both users and search engines additional context.

Practical Example for Students

A student creating a personal portfolio might use:

<h1>My Web Development Portfolio</h1>

<p>Here is an example of one of my web development projects.</p>

<img src="portfolio-project.jpg"
     alt="Student portfolio website project displayed on a laptop"
     width="800"
     height="500">

This simple example demonstrates how an image can support the surrounding content.

Practical Example for Freelancers

Freelancers can use images to showcase their previous work:

<h2>My Website Design Project</h2>

<p>
    This project demonstrates a responsive website created for a small business.
</p>

<img src="business-website-project.jpg"
     alt="Responsive small business website design"
     loading="lazy">

This approach can be useful for portfolio websites and service pages.

Best Practices for HTML5 Images

Before publishing a webpage, check the following:

  • Use <img> to display images.
  • Always provide a valid src.
  • Use meaningful alt text for informative images.
  • Use an empty alt="" for purely decorative images when appropriate.
  • Optimize image file sizes.
  • Use responsive CSS.
  • Specify dimensions where appropriate.
  • Use <figure> and <figcaption> when an image needs a caption.
  • Use descriptive filenames.
  • Consider modern image formats.
  • Use lazy loading for suitable non-critical images.
  • Make sure image paths work correctly.

Frequently Asked Questions

What tag is used to add an image in HTML5?

The <img> element is used to add an image to an HTML5 webpage.

Does the <img> tag need a closing tag?

No. <img> is a void element and does not require a closing </img> tag.

What is the src attribute in an image?

The src attribute specifies the location or URL of the image that the browser should display.

Why is the alt attribute important?

The alt attribute provides alternative text that can improve accessibility and help describe an image when it cannot be displayed.

Can I make an image clickable?

Yes. Place the <img> element inside an <a> element:

<a href="/portfolio/">
    <img src="project.jpg" alt="View portfolio project">
</a>

How can I make an HTML image responsive?

You can use CSS such as:

img {
    max-width: 100%;
    height: auto;
}

This allows the image to scale down within its container.

Final Thoughts

Adding images in HTML5 is easy once you understand the <img> element, src attribute, and alt attribute. From a simple image on a beginner webpage to optimized responsive images on a professional website, these fundamentals provide the foundation for working with visual content on the web.

As you continue learning HTML5, combine images with links, paragraphs, headings, figures, captions, and semantic elements to build well-structured webpages. For students, mastering these basics creates a strong foundation for CSS and JavaScript. For developers and freelancers, using images correctly can improve usability, accessibility, performance, and the overall quality of client websites.

TM

TM

Leave a Reply