You might see <img> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.
The Idea in Plain English
Displays an image that contributes to the page. Supply useful alt text and intrinsic dimensions to reduce layout shifts.
For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<img src="/images/red-kite.jpg"
alt="Red kite soaring above a grassy hill"
width="800" height="500">What Each Part Does
- The img displays an image and uses alt for its text alternative.
- src points to the asset the browser should load.
- alt supplies replacement text for an informative image or empty text for a decorative one.
- width reserves the image or embedded resource’s intended horizontal dimension.
The image appears with a text alternative for people who cannot see it.
Try It Yourself
Try replacing the example content with your own while keeping the valid HTML structure.
Common Beginner Mistakes
- Using file names as alt text or forgetting size information for important images.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Displays an image that contributes to the page. Supply useful alt text and intrinsic dimensions to reduce layout shifts.
- The image appears with a text alternative for people who cannot see it.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.