Hypertext Markup Language
- HTML - INTRODUCTION
- HTML - EDITORS
- HTML - BASIC
- HTML - ATTRIBUTE
- HTML - STYLE
- HTML - CHARSET
- HTML - FILEPATH
- HTML - IFRAME
- HTML - SYMBOL
- HTML - FORMS
- HTML - RESPONSIVE
- HTML - MEDIA
- HTML - Graphics
- HTML - Colors
- HTML - URL
- HTML - Plug Ins
- HTML - Semantic Markup
- HTML - Input Types
- HTML - Input Attributes
- HTML - CCE
- HTML - Tables
- HTML - CSS
- HTML - IMAGE
- HTML - Formating
- HTML - Headings
- HTML - Elements
- HTML - HTML5 SE
- HTML - HTML5
- HTML - xhtml
- HTML - HTML and HTML5
- HTML - APIs
- HTML - Classes
- HTML - Dom
- HTML - Entities
- HTML - BI Elements
- HTML - Head
- HTML - Lists
Images are considered as the best way to beautify and to represent many complex concepts in as simple way as possible. You can also insert images in an HTML document based on what you want to view on your webpage.
<img> tag is used to define images in your HTML web page.
This tag does not have any closing tag and contains only attributes, src, alt, height, width, style.
You can use one or more attributes depending on your requirements.
Syntax of <img> tag
Here, src attribute specifies the web address of an image.
The attribute is used with <img> tag when you want to display an alternate text for an image. This text will display when you take cursor on that specific image. It is also helpful in displaying a content that enables the user to understand what this image contains, especially when the user is unable to view this image due to any reason, such as poor internet connection, an error in src attribute and others.
The value of the alt attribute should be such that defines the image.
Width and Height of HTML Image
There are two ways to specify the width and height of an image.
● Using style attribute
● Using width and height attributes
Example - style attribute
Example - width and height attributes
In this example, you do not need to specify the size in pixels, as by default both width and height attributes define the image in pixels.
It is recommended to specify the width and height of the image. It is so because if you do not specify width and height, the page might flicker when uploading the image.
Which is better? - Width and height or Style
This example will help you to understand ‘which is better’.
<img src="good_morning.jpg" alt="Have a positive and wonderful day" width="300" height="400" >
<img src="good_morning.jpg" alt="Have a positive and wonderful day" style="width:300px; height:400px;" >
When the image uses width and height attributes, the stylesheet overrides the width attribute and set it to 100%, which means 300 pixels will get hidden under the stylesheet.
When the image uses the style attribute, the width which is set to 400 pixels overrides the stylesheet.
Images stored in another folder
If you have stored the image in a sub-folder, you have to include the folder name in the src attribute.
Images stored on another server
Some developers prefer to store the website images on the image servers. Though you can easily access any kind of image from any web address in the world, it is important to specify the address to display the image.
HTML Images as Link
You can also use any image in your HTML web page as a link.
Simply include <img> tag within the <a> tag.
<img src="butterfly.jpg" alt="Beautiful flying butterfly" style="width:50px; height:50px; border:0;" >
In this example, the value of border attribute is given 0 to prevent Internet Explorer from displaying a border around the image.