HTML Images – <img> tag: If you see any webpage, without images it looks so odd. So, in HTML we can add images by using the HTML img tag to display images on a web page.
HTML IMAGES
HTML <img> tag is an empty tag that contains attributes only. And closing tags are not used in HTML element.
Example:
<h2>HTML Image Example</h2> <img src="https://tutorials.freshersnow.com/wp-content/uploads/2019/04/HTML-Tutorial.jpg" alt="Freshersnow"/>
Attributes of HTML img tag
There are two important types of HTML attributes are present. They are src and alt. And also there are other tags present. They are as follows:
Img src
It is an important tag because it describes the source or path of an image. It will instruct the browser to look for the image on the server. And the location can be present on the same directory or another server.
Syntax:<img src=”URL”>
Img alt
It helps us to define the alternative text of the image. While the alt attribute describes the image in words. Moreover, it is good for an SEO perspective.
Example:
<img src="https://tutorials.freshersnow.com/wp-content/uploads/2019/04/HTML-Tutorial.jpg" alt="Freshersnow"/>
Img width & height
It is an optional attribute that is used to specify the width to display the image. And you have to apply CSS in place of width. The height attribute supports the iframe, image and object elements.
Example:
<img src="https://tutorials.freshersnow.com/wp-content/uploads/2019/04/Learn-HTML-Course.jpg" height="400" width="200" alt="python image">
Set HTML Image Border
We all know that the image will have the border around it. You can define the border thickness in terms of pixels using border attributes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png"alt="Test Image" border="3"/>
</body>
</html>
Set Image Alignment in HTML
If you want to set the image at right or center, we can change the positions by placing it.
Example:
</html>
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/python.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
HTML Background Images
For background images can be added using the CSS property.
Example:
<body style="background-image:url('python.jpg');">
<h2>Background Image</h2>
</body>