HTML Tutorial
HTML Introduction
HTML Tutorial
HTML Tags
HTML Attributes
HTML Formatting
HTML Heading
HTML Paragraph
HTML Anchor
HTML Image
HTML Table
HTML Fonts
HTML Lists
HTML Ordered List
HTML Unordered List
HTML Description List
HTML Forms
HTML Forms
HTML Input Types
HTML Form Attributes
HTML Tags
HTML Title
HTML Marquee Tag
HTML Code
HTML Quotes
HTML Button Tag
HTML BR Tag
HTML HR Tag
HTML Bold Tag
HTML 5
HTML5 Tutorial
HTML Meter
HTML Article Tag
HTML Footer Tag
HTML Figure Tag
HTML Dialog Tag
HTML 5 Advance
HTML Doctype
HTML Meta Tags
HTML Styles
HTML Scripts
HTML Progress Tag
HTML Symbols
HTML Media
HTML Video Tag
HTML Audio Tag
HTML Youtube Video
HTML 5 Form
HTML Datalist Tag
HTML keygen Tag
HTML output Tag
HTML 5 Graphics
HTML Canvas
HTML SVG
Reading Section
Interview Questions
HTML 5 Quiz
Advertisement
Advertisement
HTML Image Attributes
HTML<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"> Try this code »
Example : <img src="url" alt="some_text" height="px" width="px"> Try this code »
Example
Try this code »
<!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>
<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
The 'src' Attribute
It is a necessary attribute that describes thesource 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:
Example
Try this code »
<!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>
<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:
Example
Try this code »
<!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>
<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
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.
Example
Try this code »
<!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>
<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
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<img> |
Recommended :
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 »