HTML Image Tag | HTML Tutorial in Hindi / Urdu | Complete HTML Course

This HTML course provides a complete introduction to HTML, covering essential concepts, tags, elements, and web development fundamentals for beginners and developers

HTML Image Tag | HTML Tutorial in Hindi / Urdu | Complete HTML Course

HTML Image Tag

The HTML Image Tag (<img>) is used to display images on a web page. Images play an important role in improving the visual appearance, user engagement, and overall user experience of a website. The <img> element allows developers to add photographs, illustrations, icons, logos, and other visual content to their webpages.

The image tag is an empty element, which means it does not require a closing tag. Instead, it uses attributes to define the image source and its behavior.

The most important attributes of the HTML image tag include:

src Attribute

The src (source) attribute specifies the path or URL of the image that should be displayed on the webpage. Without the src attribute, the browser cannot load the image.

alt Attribute

The alt (alternative text) attribute provides a textual description of the image. This text is displayed if the image cannot be loaded and is also used by screen readers to improve accessibility. Proper use of the alt attribute can also contribute to better SEO performance.

width Attribute

The width attribute defines the width of the image. It helps control how much horizontal space the image occupies on the webpage.

height Attribute

The height attribute defines the height of the image. It allows developers to control the vertical size of the image.

title Attribute

The title attribute displays additional information about the image when a user hovers over it with a mouse pointer.

Best Practices for Using Images in HTML

Always use descriptive alternative text with the alt attribute.
Optimize image file sizes to improve website performance.
Use appropriate image formats such as JPG, PNG, SVG, or WebP.
Define image dimensions when possible to reduce layout shifts.
Keep image file names meaningful and SEO-friendly.
Use responsive images to ensure compatibility across different devices and screen sizes.

In this lesson, you will learn how to add images to a webpage, use essential image attributes, and follow best practices for creating modern, accessible, and user-friendly websites using HTML.

                            
                                <div>
<div>&lt;!doctype html&gt;</div>
<br>
<div>&lt;!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial --&gt;</div>
<br><br>
<div>&lt;html lang="en"&gt;</div>
<div>&nbsp; &lt;head&gt;</div>
<div>&nbsp; &nbsp; &lt;meta charset="UTF-8" /&gt;</div>
<div>&nbsp; &nbsp; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;</div>
<div>&nbsp; &nbsp; &lt;title&gt;Document&lt;/title&gt;</div>
<div>&nbsp; &lt;/head&gt;</div>
<div>&nbsp; &lt;body&gt;</div>
<div>&nbsp; &nbsp;</div>
<div>&nbsp; &nbsp; &lt;!-- image in &nbsp;same directory &nbsp;--&gt;</div>
<div>&nbsp; &nbsp; &lt;img src="image1.jpg" alt=""&gt;</div>
<br>
<div>&nbsp; &nbsp; &lt;!-- image in images folder &nbsp;--&gt;</div>
<div>&nbsp; &nbsp; &lt;img src="images/image2.jpeg" alt=""&gt;</div>
<br>
<div>&nbsp; &nbsp; &lt;!-- Absolute Path and use link to link image &nbsp;--&gt;</div>
<div>&nbsp; &nbsp; &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTng1SD0h2twUzTLLlPJT75IhJ-nWL4HJAcCA&amp;s" width="300" height="300" border="5" alt="My Image"&gt;</div>
<br><br><br><br>
<div>&nbsp; &nbsp; &nbsp; &nbsp;&lt;br&gt;</div>
<div>&nbsp; &nbsp;</div>
<div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href="https://youtube.com/@theProvidersOfficial"&gt;The Providers&lt;/a&gt;</div>
<br><br>
<div>&lt;/body&gt;</div>
<div>&lt;/html&gt;</div>
</div>

Download Code Files