In HTML, you can easily display images on a webpage using the <img> (image) tag. The <img> tag allows you to embed images from local or remote sources. Here’s how you can include images in your HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Images in HTML</title>
</head>
<body>
<h1>My Webpage with Images</h1><!– Image from a local source –>
<img src=”images/my_picture.jpg” alt=”My Picture”><!– Image from a remote source (absolute URL) –>
<img src=”https://www.example.com/images/example_image.jpg” alt=”Example Image”><!– Image with width and height attributes –>
<img src=”images/another_picture.png” alt=”Another Picture” width=”300″ height=”200″><!– Image with descriptive text –>
<figure>
<img src=”images/flower.jpg” alt=”Flower”>
<figcaption>A beautiful flower</figcaption>
</figure>
</body>
</html>
Explanation:
- Local Image: To display an image from a local source (e.g., an image stored in the same folder as the HTML file), you provide the relative path to the image in the
srcattribute. In the example above, the first image is named “my_picture.jpg” and is located in the “images” folder. - Remote Image (Absolute URL): To display an image from a remote source (e.g., an image hosted on another website), you provide the absolute URL of the image in the
srcattribute. The second image in the example is hosted on “www.example.com.” - Image Dimensions: You can use the
widthandheightattributes to specify the dimensions of the image. It’s a good practice to specify the dimensions to reserve space for the image while the page loads. This way, the page layout doesn’t change abruptly when the image is loaded. - Image Alternative Text (Alt Text): The
altattribute provides alternative text for the image. This text is displayed if the image cannot be loaded or is not available. It is also used by screen readers to describe the image to users with visual impairments. Always include descriptive alt text to enhance accessibility. - Image with Descriptive Text: You can use the
<figure>and<figcaption>elements to group an image with its descriptive text. The<figcaption>element provides a caption for the image.
Remember to use appropriate image formats (such as JPEG, PNG, GIF, etc.) based on the content and requirements of your website. Also, ensure that you have the necessary permissions to use any images from external sources and comply with copyright laws.