Images are a very important part of a web page as it improves the appearance of a web page and increases customer interaction. The USP of multiple websites is how they organise different images on their webpages & add flavors to it. In this HTML Images article, we will understand how to embed images in a webpage using HTML in the following order:
How To Add Image In HTML
To embed an image in a webpage HTML gives you <img> tag. Another important point to remember is, <img> doesn’t have a closing tag. scr attribute is used to specify the path of the image, which can be a url or image path from the system/server. Let us first start with the basic syntax of embedding image in a webpage using HTML.
Syntax
<span>img src="edureka.png"></span>
Sample Code
<!DOCTYPE html> <html> <head> <title>HTML Image</title> </head> <body> Embedding Images in Webpage <img src="edureka.png"> </body> </html>
Similar to other tags, there are various attributes associated with <img> tag. Let us look at each one of them one by one, understand their need & how to use them.
HTML Images Tags
- alt Attribute
The alt attribute is the alternate text for an image. The reason why alt attribute was introduced is if due to any reason the image could not load then an alternate text should appear giving an idea about the image. The reasons for image not loading could be slow internet connection or image doesn’t reside in the provided source, etc.
If the image resides inside the same folder where HTML file is, you can specify the name of the file directly. Otherwise, you have the provide the absolute path of the image file.
The value of the alt attribute should describe the image.
Example
<img src="edureka.png" alt="Edureka Logo">
<!DOCTYPE html> <html> <head> <title>HTML Image</title> </head> <body> Embedding Images in Webpage <img src="edureka1.png" alt="Edureka Logo"> </body> </html>
- Width and Height of an Image
Style attribute is used to set the height & width of an image. In style attribute you specify the CSS styling.
<!DOCTYPE html> <html> <head> <title>HTML Image</title> </head> <body> Embedding Images in Webpage <img src="edureka.png" alt="Edureka Logo" style="width:500px;height:200px;"> </body> </html>
Some of the important points while embedding an image in a webpage using HTML are:
- The width and height attributes are defined in pixels.
- You can also define the width and height of an image in percentage. It will consider the percentage according to the whole webpage.
<img src="edureka.png" alt="edureka logo" width="60%">
- If you only specify one of them then it adjusts the other accordingly.
- Embedding Images using URL
HTML also gives you the flexibility where you can pick the image from another server just by specifying the URL. You can use a separate server to host the images & then embed those images using URL.
<!DOCTYPE html> <html> <head> <title>HTML Image</title> </head> <body> Embedding Images in Webpage <img src="https://s3-eu-west-1.amazonaws.com/tpd/logos/5a140a150000ff0005b11342/0x0.png" alt="Edureka Logo"> </body> </html>
- Image as a Link
You can also use image as a link where the user can click on the image and land on a new webpage. To do so, you just have to put the <img> tag in <a> tag.
<!DOCTYPE html> <html> <head> <title>HTML Image</title> </head> <body> Embedding Images in Webpage <a href="https://www.edureka.co/"> <img src="edureka.png" alt="edureka logo" style="width:100px;height:50px;border:0;"> </a> </body> </html>
- Image Floating
You can also adjust the alignment of the image using CSS float property. All the CSS property needs to be specified in the style attribute.
<!DOCTYPE html> <html> <head> <title>HTML Image</title> </head> <body> <img src="edureka.png" alt="Edureka Logo" style="float:right;width:100px;height:50px;"> The image will float to the right of the text. <img src="edureka.png" alt="Edureka Logo" style="float:left;width:100px;height:50px;"> The image will float to the left of the text. </body> </html>
- Image Maps
This is one of the important features provided by HTML. <map> tag helps in defining an image-map. You must be wondering what an image map is. An image-map is an image with clickable areas
<!DOCTYPE html> <html> <head> <title>HTML Image</title> </head> <body> <img src="eduerka.png" alt="Eduerka" usemap="#edurekamap"> <map name="edurekamap"> <area shape="rect" coords="23,57,257,300" alt="e" href="https://www.edureka.co/devops"> <area shape="rect" coords="291,157,364,237" alt="d" href="https://www.edureka.co/big-data-and-hadoop"> <area shape="circle" coords="337,300,44" alt="u" href="https://www.edureka.co/robotic-process-automation-training"> </map> </body> </html>
- Background Image
You can also add a background image in a webpage. You just have to use the CSS property i.e. background-image in the style tag and add it to the HTML element.
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body style="background-image:url('edureka.png');">
<h2>Background Image</h2>
BODY element
</body>
</html>
With this we come to an end of this HTML Images Blog. Now after executing the above snippets you would have understood how to insert image in HTML. I hope this blog is informative and added value to you.
Related Post: How to add image in React JS
Check out our Full Stack Web Developer Course which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Got a question for us? Please mention it in the comments section of “HTML Images” blog and we will get back to you.