HTML Basics
HTML Images
Images bring web pages to life. The <img> tag embeds a picture, and a few key attributes control its source, size, and accessibility.
What is an HTML Image?
The <img> tag places an image on the page. It is an empty element — it has no closing tag. The src attribute gives the image's location, and the alt attribute provides descriptive text shown if the image fails to load or is read by a screen reader.
Images do not sit inside the <img> tag; they are referenced by URL. That URL can point to a file on your own site or to any image on the web.
Basic Usage
<img src="https://picsum.photos/200" alt="A random placeholder photo">Example: Image With Size and Alt Text
<!DOCTYPE html>
<html>
<body>
<h2>A photo</h2>
<img src="https://picsum.photos/300/200"
alt="A 300 by 200 placeholder landscape"
width="300" height="200">
<p>The width and height keep the layout stable while loading.</p>
</body>
</html>More Examples
<a href="https://myinternships.in">
<img src="https://picsum.photos/200" alt="Click to visit MyInternships.in">
</a><!DOCTYPE html>
<html>
<body style="max-width:250px;">
<img src="https://picsum.photos/600/400"
alt="A responsive placeholder photo"
style="width:100%; height:auto; border-radius:8px;">
</body>
</html>Key img Attributes
| Attribute | Purpose |
|---|---|
| src | The image's URL (required). |
| alt | Text alternative for accessibility and fallback. |
| width | The display width in pixels. |
| height | The display height in pixels. |
| loading | Set to "lazy" to defer off-screen images. |
Always include an alt attribute. It is essential for screen reader users and appears if the image cannot load. Use alt="" only for purely decorative images.
Set width and height (or a CSS aspect ratio) so the browser reserves space before the image loads. This prevents the page from jumping around as images appear.
Key Takeaways
- The <img> tag embeds an image and has no closing tag.
- src sets the image URL; alt describes it for accessibility.
- Set width and height to keep the layout stable.
- Wrap an <img> in an <a> tag to make it clickable.