Attributes: src, alt, width, height in html
When you insert or embed an image in an HTML web page using the <img> tag, some of the default properties of the inserted image in the web page are image src, alt, width, and image height. The default image attributes are image src, alt, width, and image height, which you can manually customize in the web page as per your requirement.
Image src (source).
The storage source path of the inserted image in the current web page is added here, where the image path can be either an online web image URL or an offline local computer hard drive storage path location. The image source attributes display the image storage location in any web browser.
Image source example in an HTML web page.
<img src=”images/logo.jpg” alt=”company logo”>
Here you can define the online website URL and local computer hard drive image location of the inserted image in the web page as the image source.
Image alt (alternative text).
An image alternative description text information can be added to the image tag along with the inserted image in any web page. This alt text is displayed in the web page when the image is not loading or displaying properly in the web browser due to some reason, and the image alt text is used by visually impaired internet users with screen reader software. Apart from this, image alt text is helpful in web page image seo.
Image alt text example.
<img src=”images/flower.jpg” alt=”nice flower image”>
Image width.
The default width of the embedded image in the HTML web page is set manually to more or less image pixel width. Sometimes the web developer needs to display the image in a particular width size in the website. Then the image width is used with the image tag.
Image width example in HTML web page.
<img src=”images/logo.jpg” alt=”organization logo” width=”300″>
Remember, in HTML web page you can manually customize both the width and height attributes of the image as per your requirement. The image will be displayed in the web page as per the image height and width set by the web developer.
Image height.
The default image height size of the embedded image in the HTML web page can be manually configured in the web browser display. If you want to display the embedded image height in a web page by manually setting the custom height as per your requirement in the web browser, then you can use the image height attributes.
Image height example in HTML web page.
<img src=”images/map.png” alt=”country map” height=”270″>
Remember, if you are creating an image web page, you can display the image in the desired size in the web browser layout by manually setting the default height and width of each image as per your requirement. Apart from this, you can custom set the web browser layout as per your requirement.
Image Attributes Example in HTML Web Page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Html Image Tag</title>
</head>
<body>
<h2>Web Page Image Attributes</h2>
<img
src=”https://cdn.pixabay.com/photo/2023/09/25/14/06/cat-8275147_960_720.jpg”
alt=”nice cat image”
width=”500″
height=”500″
>
<p>Yuo can see clear cat online image</p>
</body>
</html>
