Adding an image to your HTML page is quite simple. You can use the `<img>` tag, which is a self-closing tag, meaning it doesn't need a closing tag. Here's a basic example:
```html
<img src="path/to/your/image.jpg" alt="Description of the image">
```
Here's a breakdown of the attributes used:
- **`src`**: Specifies the path to the image file. This can be a relative path (if the image is in the same directory as your HTML file) or an absolute URL.
- **`alt`**: Provides alternative text for the image, which is displayed if the image cannot be loaded. It's also useful for accessibility, as screen readers will read this text to describe the image.
### Example
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Example</title>
</head>
<body>
<h1>My Favorite Picture</h1>
<img src="images/my-favorite-picture.jpg" alt="A beautiful sunset over the mountains">
</body>
</html>
```
In this example, the image file `my-favorite-picture.jpg` is located in a folder named `images` within the same directory as the HTML file. The `alt` attribute describes the image as "A beautiful sunset over the mountains"¹².
Feel free to try this out and let me know if you have any questions or need further assistance! 😊
¹: [W3Schools](https://www.w3schools.com/html/html_images.asp)
²: [HTML Easy](https://www.html-easy.com/learn/how-to-add-an-image-in-html/)
(1) HTML Images - W3Schools. https://www.w3schools.com/html/html_images.asp.
(2) How to Add an Image in HTML: A Step-by-Step Tutorial for Beginners. https://www.html-easy.com/learn/how-to-add-an-image-in-html/.
(4) How to Work with Images in HTML – A Beginner's Guide - freeCodeCamp.org. https://www.freecodecamp.org/news/how-to-work-with-images-in-html/.
(5) HTML Images - W3Schools. https://www.w3schools.in/html/images.
(6) github.com. https://github.com/WebReflection/uce-loader/tree/6c722f807a8026b7043725fadfbdb7ca4a85e1ac/README.md.
(7) github.com. https://github.com/prakharrathi25/Sports-Management-System/tree/f8d14aec01a5ec9ea6932a34a518f5fdd0b35158/gallery.php.
Check this also-How to add an image to my HTML page?
💡 Enjoying the content?
Subscribe to our BLOG
0 Comments