HTML Images || HTML Images Syntax
HTML provides a way to include images in your web pages using the '<img>' tag. The '<img>'> tag is a self-closing tag, which means it doesn't need a closing tag.
The '<img>' tag requires at least one attribute, which is the 'src' attribute. This attribute specifies the URL of the image file that you want to display on the page. For example:
<img src="images/myimage.jpg" alt="My Image">
The ' alt ' attribute is optional but recommended, as it provides alternative text that is displayed if the image cannot be loaded or if the user is using a screen reader. This text should describe the content of the image in a way that makes sense in the context of the page.
<img src="images/myimage.jpg" alt="A beautiful sunset over the ocean">
In addition to the ' src ' and 'alt 'attributes, there are several other attributes that you can use to control how the image is displayed on the page:
' width ' and 'height' attributes: These attributes specify the width and height of the image in pixels. It's a good practice to specify both the width and height attributes, as this helps the browser to lay out the page correctly before the image is loaded. For example:
<img src="images/myimage.jpg" alt="My Image" width="500" height="300">
'title' attribute: This attribute specifies a title for the image, which is displayed when the user hovers over the image. The text can be used to provide additional information about the image. For example:
<img src="images/myimage.jpg" alt="My Image" title="This is a beautiful sunset over the ocean" width="500" height="300">
'align' attribute: This attribute specifies how the image should be aligned with the surrounding text. You can use the values "left", "right", "center", or "none". For example:
<img src="images/myimage.jpg" alt="My Image" align="left">
'border' attribute: This attribute specifies the width of the border around the image, in pixels. For example:
<img src="images/myimage.jpg" alt="My Image" border="1">
'usemap' attribute: This attribute specifies the name of a map that defines clickable areas on the image. For example:
<img src="images/myimage.jpg" alt="My Image" usemap="#myimagemap">
<map name="myimagemap">
<area shape="rect" coords="0,0,50,50" href="page1.html">
<area shape="rect" coords="50,50,100,100" href="page2.html">
</map>
➡ The <img> tag: In HTML, images are displayed using the <img> tag. This tag is an empty tag, which means that it does not require a closing tag.
➡ Image source: The '<img>' tag requires the "src" attribute to be set to the URL of the image you want to display. For example, <img src="example.jpg">.
➡ Alternative text: The "alt" attribute is used to provide alternative text for the image. This text is displayed if the image cannot be loaded or if the user is using a screen reader.
➡ Image dimensions: You can set the dimensions of an image using the "width" and "height" attributes. For example, <img src="example.jpg" width="500" height="300">.
➡ Image alignment: You can align images to the left, right, or center of a page using the "align" attribute. For example, <img src="example.jpg" align="left">.
➡ Image links: You can turn an image into a link by wrapping it in an <a> tag. For example, <a href="example.html"><img src="example.jpg" alt="Example"></a>.
➡ Image formats: HTML supports several image formats, including JPEG, PNG, GIF, and SVG. The appropriate format to use depends on the type of image and its intended use.
➡ Image optimization: To ensure that images load quickly and do not slow down your website, it is important to optimize them for the web. This can include reducing the file size, compressing the image, and using the appropriate format.
| Common Image Formats | ||
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
