Images are used on web pages to make the page more interactive and appealing to the user. In this article, we are going to discuss HTML images, i.e., how to add images to a webpage using HTML.
The HTML <img> Element
To define an image on the web page, we use the HTML
<img> element. <img> is an empty tag, so it does not have any paired-end tag. <img> has a mandatory attribute
src that stands for source, and it specifies the image name on the local system or URL on the internet.
<img src= "image_name">
Image present on the local system
<img src = "google.png">
<img src = "https://www.google.com /images/branding/googlelogo/1x/ googlelogo_color_272x92dp.png">
Note: If you are directly using the image name, make sure that the image and the HTML document are present in the same folder or directory.
The alt Attribute
alt attribute stands for alternate text, and it is used to provide extra information about the image. However, the user can not see the alt information if the image loads correctly, and alt text is only displayed if the web browser could not load the image.
<img src ="techgeekbuzz.png" alt ="It's the logo of techgeekbuzz" >
Note: The alt attribute is optional; however, from an SEO perspective, it is always suggested to add it.
Image Width and Height
The width and height of an image can be set using the style attribute. It is always a good practice to define the width and height of HTML images and specify the proper image area.
<img src="techgeekbuzz.png" alt="techgeekbuzz logo" style="width:200px;height:200px;">
Importing Image from Another Folder
If the image is not present in the same folder where the HTML document is, we need to specify the location of the image along with the image name.
<img src="C:\Users\name\Pictures\koala.jpg" alt ="koala picture" style ="width:120px; height: 120px;">
Importing HTML Images from The Server
In the src attribute, we can also pass the server link of the image to display the image on our web page.
<img src=""https://www.google.com /images/branding/googlelogo/1x/ googlelogo_color_272x92dp.png" alt ="google logo">
If we put the <img> elements inside the <a> element, then the image will work as a link.
<a href="https://www.techgeekbuzz.com"> <img src ="techgeekbuzz.png" > </a>
Floating images are useful when we want to display an image to the left or right side of a text.
<p> <img src="image.jpg" style="float:right; width:30px;height:30px;"> Image will be displayed on the right side of this text</p>
- To display an image on the web page, we use the <img> element.
- It is mandatory to pass the src attribute in the <img> tag.
- <img> is an empty tag.
- The alt attribute is optional (but highly recommended), and it provides textual information about the image.
- Always mention the image width and height by using the style element or attribute.
To become a confident HTML developer and build stunning websites, you can purchase the course here.
People are also reading: