Code Playground

Interview Toolkit

How to Add an Image to a Webpage Using HTML | CodeCareer4u

How do you add an image to a webpage using HTML?

Images make websites visually appealing and help convey information quickly. In HTML, images are added using the <img> element.

Simple Definition: The <img> tag displays an image on a webpage. It is an empty (self-closing) element that does not have a closing tag.

Basic Syntax

<img src="image-url" alt="description">

- src specifies the path to the image file (required).
- alt provides alternative text if the image cannot be displayed (required for accessibility).

Example of Adding an Image

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

This will display the image file logo.png on the webpage. If the image cannot be loaded, the text Company Logo will appear instead.

Common Attributes of the <img> Tag

Attribute	Purpose / Example
src	Specifies the image path or URL (required)
alt	Provides descriptive text for accessibility (required)
width	Specifies the width of the image (e.g., `200`)
height	Specifies the height of the image (e.g., `100`)
title	Displays additional text when hovering over the image

Example with Width, Height, and Title

<img src="logo.png" alt="Company Logo" width="200" height="100" title="Our Logo">

Linking an Image

Images can also be used as clickable links using the <a> tag:

<a href="https://www.example.com">
  <img src="logo.png" alt="Company Logo">
</a>

Best Practices for Using Images in HTML

Always use the alt attribute for accessibility
Optimize image size for faster loading
Use descriptive filenames
Specify width and height to prevent layout shifts
Use images that enhance content, not distract from it

Conclusion

The <img> tag is the standard way to display images on webpages. By using attributes like src, alt, width, and height, you can control how images appear, improve accessibility, and enhance user experience.