HTML Images Syntax
<img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The
<img> tag creates a holding space for the referenced image.
<img> tag is empty, it contains attributes only, and does not have a closing tag.
<img> tag has two required attributes:
- src – Specifies the path to the image
- alt – Specifies an alternate text for the image
src attribute specifies the path (URL) to the image.
<img src=”img_chania.jpg” alt=”Flowers in Chania”>
The alt Attribute
alt attribute provides an alternate text for an image, if the user find some problem and cannot view it (because of slow network connection, an error in the src attribute, or if the user uses a screen reader).
The value of the
alt attribute should describe the image:
<img src=”img_flower.jpg” alt=”Flowers”>
Width and Height, or Style?
You must resize the dimensions of your image in HTML, if your image does not fit in the layout of the webpage. This is very useful and could be easily achieved with the help of using height and width attributes in the img tag. The default value inside these attributes is in pixels.
style attributes are all valid in HTML.
<img src=”flower.png” alt=”Flower Icon” width=”128″ height=”128″>
<img src=”flower.png” alt=”Flower Icon” style=”width:128px; height:128px;”>