Inserting images in HTML allows you to enhance the visual appeal of your web pages by displaying graphics, photos, or other visual content. Here’s how you can do it:

1. **Using the `<img>` Tag:**
– The `<img>` tag is used to insert images into HTML documents.
– The `src` attribute specifies the URL of the image file.
– Example:
“`html
<img src=”image.jpg” alt=”Description of the image”>
“`
– In this example, “image.jpg” is the URL of the image file, and “Description of the image” is the alternative text (alt attribute) displayed if the image fails to load.

2. **Specifying Image Dimensions:**
– You can specify the width and height of the image using the `width` and `height` attributes of the `<img>` tag.
– Example:
“`html
<img src=”image.jpg” alt=”Description of the image” width=”300″ height=”200″>
“`
– This sets the width of the image to 300 pixels and the height to 200 pixels.

3. **Using Relative and Absolute URLs:**
– You can use either relative or absolute URLs to specify the location of the image file.
– Relative URLs point to image files within the same website or directory, while absolute URLs point to image files hosted on external websites.
– Example of a relative URL:
“`html
<img src=”images/image.jpg” alt=”Description of the image”>
“`
– Example of an absolute URL:
“`html
<img src=”https://www.example.com/images/image.jpg” alt=”Description of the image”>
“`

4. **Image Accessibility (Alt Attribute):**
– It’s important to provide descriptive alternative text using the `alt` attribute for accessibility purposes.
– Alternative text is read by screen readers for visually impaired users and displayed if the image fails to load.
– Example:
“`html
<img src=”image.jpg” alt=”A cat playing with a ball”>
“`

5. **Responsive Images:**
– To ensure images scale properly on different devices and screen sizes, you can use CSS or HTML attributes like `srcset` and `sizes`.
– Example using `srcset`:
“`html
<img src=”small.jpg” alt=”Small image” srcset=”small.jpg 500w, medium.jpg 800w, large.jpg 1200w”>
“`
– This specifies multiple image files with different widths, allowing the browser to choose the most appropriate image based on device capabilities.

By following these guidelines, you can effectively insert and display images in your HTML documents, enhancing the visual presentation of your web pages.