src
The file or URL the browser should load.
Platform under construction
HTML Images
Learn HTML Images with practical HTML examples for navigation, images, alt text, media behavior, metadata, accessibility, SEO and live practice.
HTML links and media
Images add visual meaning, but they need responsible HTML.
The img element embeds an image into the document. It is a void element, so it does not have a closing tag.
A professional image is not only src. It also needs the right alt text, dimensions, loading behavior and file size strategy.
Images can make a page feel premium, but they can also make a page slow, inaccessible or unstable if the markup is weak.
alt
A text alternative for meaningful images.
width + height
Reserve layout space and reduce page jumping.
loading
Can lazy-load images that are not immediately needed.
Syntax and structure
A useful img tag describes file, meaning and size.
Use src for the file, alt for meaning, and width/height for layout stability.
Image with meaning and dimensions
<img src="/assets/img/course-dashboard.webp" alt="Course dashboard showing HTML lesson progress" width="960" height="540" loading="lazy" >
Image that only happens to display
<img src="image1.jpg"> <img src="big-photo.jpg" alt="photo"> <img src="hero-final-final-new2.png" width="3000">
Rules that matter
Links and media should be useful, stable and understandable.
Clickable and visual HTML affects how people move, scan, trust and share a page. The details are small, but the user experience impact is large.
Use meaningful alt text
Describe what the image communicates in this context.
Reserve space
Width and height help the browser avoid layout shift.
Optimize file size
A huge photo can damage the whole page experience.
Use lazy loading below the fold
Do not delay critical hero images without thinking.
Use CSS for decoration
If the image is only decorative, CSS background-image may be a better fit.
Name files clearly
Readable file names make projects easier to maintain.
Production thinking
Navigation, images and metadata are part of product quality.
Why does this matter?
Images matter because they are often the most emotional part of a page. Strong image HTML keeps that visual impact fast, stable and accessible.
Accessibility
Images that communicate meaning need alt text. Decorative images can use empty alt="" or CSS backgrounds so they do not add noise.
Production note
Prepare images in modern formats, correct dimensions and sensible compression. Visual quality and performance should be balanced.
SEO note
Image file names, alt text and surrounding content help search engines understand image context, but keyword stuffing alt text is weak and bad for users.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change the src to "cat.jpg" and run the preview.
- Rewrite the alt text for the image you expected to load.
- Remove width and height once, then add them back.
Practice assignment
Do this before moving to the next lesson.
- Write three image tags: meaningful, decorative and lazy-loaded.
- Explain which alt text belongs on each one.
- Check whether every meaningful image has width, height and useful alt text.
Try it yourself
Build a clean image card
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you decide whether an image is content or decoration?
- Can you write alt text that explains meaning instead of the file name?
- Can you explain why width and height help page stability?
- Can you choose between img, picture and CSS background for a real use case?
- Can you spot when an image should be lazy-loaded?