How to add an image to the web page using HTML?
A webpage with only text makes it boring. An image is a useful resource on the internet. There are many reasons to add images to a website. It enhances the webpage, can be used to promote products and services. The users on the internet are more interested in images than text.
Adding an image to the webpage using HTML
We can easily add images to the webpage using HTML.
The <img> element is used to add images to the webpage. The src attribute is added within <img> to add the path of the image.
- We can add the URL of the image or the path of the local disk to the src attribute.
- The alt attribute is added within <img> to add an alternative name to the image.
- When the image fails to load the alternative name is shown in that place.
- You may skip the alt attribute if the image is not so important.
Example: Adding an image to the webpage
Here is an example to add an image in HTML. Here we have added the path of an image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2>Images in HTML </h2>
<img src="pic1.png" alt="picture name">
</body>
</html>
Output
Here is the output of the above program.
Example: Use of alt attribute
As mentioned above the alt attribute is used to add an alternative description to the image which is shown when the image fails to load. There can be several reasons when the image fails to load like the wrong path, network issues, browser incompatibility, etc.
Here in the example, we have set the wrong path to the src attribute to show the use of alternative text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<body>
<h2>Images in HTML </h2>
<img src="pic12.png" alt="picture name">
</body>
</html>
Output
Here is the output of the above code.
Conclusion
The image can be easily added using HTML in the webpage. The images are important to the webpage and HTML provides the easiest way to add the images to the websites. We can add an image that is present on the internet using its URL or add it from your local disk. Images will enhance the look of the websites.
