HTML Image Attributes

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

Syntax

<img src="url" alt="some_text" height="px" width="px">

Example :

<img src="url" alt="some_text" height="px" width="px">



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
</body>
</html>

Output

HTML Image Tag Example
HTML Image

The 'src' Attribute

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. The "src" attribute specifies the URL (web address) of the image. The location of image may be on the same directory or another server.

If a browser cannot find an image, it will display the value of the alt attribute:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>


The 'alt' Attribute

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. It is considered good for SEO prospective.

The "alt" attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

If a browser cannot find an image, it will display the value of the alt attribute:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>

Output

HTML Image Alt Attribute Example HTML5 Image

Image Size Attribute - 'Height' and 'Width'

With the help of this attribute we can customize the size of the Image To change the size of HTML Image we can use "height" and "width" attributes.

We can also use Style to change the size of HTML Image. We will discuss style later.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Size Attribute </title>
<body>
<img src="HTML5-Image.png" alt="HTML5 Image" width=600px height=250px>
</body>
</html>

Output

HTML Image Alt Attribute Example HTML5 Image

Browser Support

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<img>
Yes
Yes
Yes
Yes
Yes




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements