HTML Images
In HTML, you can add images to a webpage using the <img> tag. This tag is self-closing and requires at least one attribute, src, which specifies the source of the image. Here's the basic syntax for including an image:
HTML Img Attributes:
- src:The path to the image file (can be a URL or a local file path).
- alt:A description of the image, useful for accessibility and when the image cannot be displayed.
- width:Specifies the width of the image in pixels.
- height:Specifies the height of the image in pixels.
HTML Images Syntax
The HTML <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 tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
- src - Specifies the path to the image
- alt - Specifies an alternate text for the image
The src Attribute
he required src attribute specifies the path (URL) to the image.
Example:
<img src="myimage.jpg" alt="My Image">
The alt Attribute
The required 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).
The value of the alt attribute should describe the image:
Example:
<img src="india.jpg" alt="Image of India">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example:
<img src="img1.jpg" alt="Image 1" style="width:500px;height:600px;">
Here are the key points to remember about HTML images:
- <img> Tag: Used to embed images in a webpage.
- src Attribute: Specifies the path (URL or local file path) to the image file. It’s mandatory.
- alt Attribute:Provides alternative text for the image when it can’t be displayed (important for accessibility and SEO). It’s highly recommended.
- Dimensions: You can specify the width and height of an image using the width and height attributes (in pixels or percentage).
- Responsive Images: Use CSS or the srcset attribute for responsive images that adapt to different screen sizes or resolutions.