HTML Image, Image Attributes

0
334
html image

Use of Image in HTML

The element <img> is the most straight-forward way of displaying a static HTML image on a page. You should normally use it whenever an image is actually a part of the content (as opposed to using an image as part of a page’s design).

All tags <img> must have a defined attribute src. This defines the image to be displayed. Typically, the src is a URL, but a data representation of the image can also be used in some cases.

HTML Image

HTML <img> tag is used to display image on the web page. HTML <img> tag is an empty tag that contains attributes only, closing tags are not used in HTML image element.

<!DOCTYPE html> 
<html>
 <head>
   <title>Image Example</title>
 </head> 
<body>
   <img src="images/logo.png"> 
</body> 
</html>

HTML Image Tag Attribute

Option Description
src It is a necessary attribute that describes the source or path of the image. It instructs the browser where to look for the image on the server.
alt The alt attribute defines an alternate text for the image if it can’t be displayed. The value of the alt attribute describes the image in words. The alt attribute is considered good for SEO perspective.
width It is an optional attribute which is used to specify the width to display the image. It is not recommended now. You should apply CSS in place of width attribute.
height It specifies the height of the image. The HTML height attribute also supports iframe, image and object elements. It is not recommended now. You should apply CSS in place of height attribute.
border Image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.
align BImage will default align at the left side of the page, but you can use align attribute to set it in the center or right.

 

Example:

<!DOCTYPE html> 
<html> 
<head>
   <title>Image Example</title> 
</head> 
<body>
   <img src="images/logo.png" alt="Developers Funda" width="200" height="50" align="right"> 
</body> 
</html>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here