HTML is ubiquitous on the internet—used to create web pages and web applications all over the globe. Part of its power comes through the help of different HTML tags; available in the language. In this article, we will discuss the HTML image tag, which is used to insert an image into a web page and improve its appearance.
What is HTML <img> tag?
An HTML image (<img>) tag is used to embed an image on the web page.
The <img> tag has two required attributes:
- src - This specifies the path of the image.
- alt - This is an alternate text that will be displayed in the image's place if the image cannot be displayed for any reason.
How to Insert an Image?
There are two different ways you can add images to your web page:
- From your local drive
- By copying the image URL
1. From Your Local Drive
To add images from your local drive, you need to save the image in the same folder where your HTML file is located.
Next, add the image by typing the image file name with proper image format.
This will produce the following result:
Note: Remember that the image name is always case sensitive. Be sure to specify the correct image file name in the src attribute.
You can use JPEG, PNG, and GIF formats, depending on your requirements.
2. By Copying the Image URL
You can also add the image by copying the URL of that image.
This will produce the following result:
This image was taken from asianetnews.com.
Image Tag Attributes
The HTML image tag supports the following attributes:
|
Attributes |
Values |
Description |
|
src |
URL |
Specifies the path to the image |
|
width |
pixels |
Specifies the width of an image |
|
height |
pixels |
Specifies the height of an image |
|
align |
“Left”, “Right” |
Specifies the image align side |
|
border |
size |
Specifies the image border size |
|
alt |
text |
Specifies an alternate text for an image |
Set Image Alignment
Using the align attribute will set the alignment of the image. By default, the image is aligned to the left side of the web page.
This will produce the following result:
Set Image Width and Height
You can specify the width and height of the image according to your requirements using the width and height attributes.
This will produce the following result:
Add a Hyperlink to an Image
You can also link an image to another web page. To do this, use the <img> tag inside an <a> tag.
This will produce the following result:
When you click on the image, you will be directed to the Simplilearn website.
Learn top skills demanded in the industry, including Angular, Spring Boot, Hibernate, Servlets, and JSPs, and SOA to build highly web scalable apps with the Full Stack Java Developer Masters Program
Set Image Border
You have the option to add a border around an image. To do this, use the border attribute and specify the border thickness in terms of the pixel.
This will produce the following result:
Get Ahead of the Curve and Master HTML Today
This article on HTML image tags covered the different ways in which you can add images to a web page. We discussed several attributes of the image tag and how we can use it to create an interactive web page. To learn more about web development in its entirely, a certification is highly recommended, which can also help jumpstart your career. Simplilearn’s Full Stack Java Developer course helps students master web development and various developer technologies. Students also receive hands-on practice, and enrollment includes the opportunity to build an end-to-end application, test and deploy code, store data using MongoDB, and much more.
If you’re an aspiring web and mobile developer, HTML training will broaden your skills and career horizons. Do you have any questions for us? Please leave them in the comments section, and we'll have our experts answer them for you.