The HTML `<img>` tag is a void element with no closing tag that embeds an image from a source URL into a page. It is one of the most common elements in web development, yet its attributes are frequently misused—leading to accessibility failures, layout instability, or broken pages.
This guide covers the essential attributes every developer needs, the trade-offs of each approach, and which decisions matter most depending on your project.
Why It Matters
The `<img>` tag sits at the intersection of performance, accessibility, and layout. A missing `alt` attribute excludes screen reader users entirely. Missing dimensions cause layout shift, which hurts user experience and Core Web Vitals scores. The attributes you choose directly affect who can access your content and how smoothly your pages load.
Basic Syntax
“`html
<img src="path/to/image.jpg" alt="A short description of the image">
“`
Two attributes are mandatory:
`src`** tells the browser where the image file lives. Without it, nothing renders. Use absolute paths to avoid broken links when pages move within your site structure.
`alt`** provides text that screen readers announce and that browsers display when images fail to load. Write descriptions that convey the image's content or purpose, not its appearance. For purely decorative images, use an empty `alt` attribute so assistive technology skips them.
Controlling Display Size
“`html
<img src="/images/team-photo.jpg" alt="The TipTipa editorial team at a workshop" width="800" height="533">
“`
Two attributes set display dimensions:
- `width`: horizontal size in pixels
- `height`: vertical size in pixels
Setting both reserves space before the image loads, preventing layout shift that frustrates users on slower connections. This is a simple win for perceived performance.
When to use HTML attributes vs. CSS:** Use HTML `width` and `height` to establish intrinsic dimensions and reduce layout shift. Use CSS for responsive sizing, styling, and layout control.
Legacy Attributes to Avoid
| Attribute | Purpose | Modern Replacement |
|---|---|---|
| `align` | Floated image positioning | CSS float, flexbox, or grid |
| `border` | Border thickness in pixels | CSS `border` property |
Both attributes still function in modern browsers for backward compatibility, but they belong in stylesheets, not HTML markup. New projects should never include them.
The Complete Checklist
Before shipping any `<img>` tag, confirm:
- [ ] `src` points to a valid, accessible image URL
- [ ] `alt` describes the image or is empty for decorative images
- [ ] `width` and `height` are set to prevent layout shift
- [ ] No `align` or `border` attributes remain
Bottom Line
The `<img>` tag is tiny but consequential. A missing `alt` breaks accessibility. Missing dimensions break layout. Every image tag should include `src`, `alt`, and dimensions—then let CSS handle the rest.
Key takeaways
- Always include `src` and `alt`. They are required for valid, accessible HTML.
- Set `width` and `height` to reduce layout shift while images load.
- Keep alignment and borders in CSS, not HTML.
- Write `alt` text that describes purpose, or leave it empty for decorative images.
Frequently asked questions
Does the img tag need a closing tag?
No. It is a void element and closes itself with `>` at the end of the opening tag.
Is the alt attribute really required?
Yes. It makes images accessible to screen reader users and provides fallback text when images fail to load. For valid HTML, it is mandatory.
Should I use the width and height attributes or CSS?
Use both. HTML attributes set intrinsic dimensions and reduce layout shift. CSS handles responsive sizing, borders, and styling.
Can I use a relative path in the src attribute?
Yes, but absolute paths are more reliable and prevent broken links when pages are accessed from different URLs.
What should I write in the alt attribute for a decorative image?
Leave it empty (`alt=""`) so screen readers skip it entirely.