Marigold
Lesson Goal
By the end of this page, you will understand how to place images correctly, how to describe them, how to size them, how to make them responsive, and how to avoid common mistakes.
Main idea
- <img> is used to put an image inside an HTML page.
- The src attribute tells the browser where the image file is.
- The alt attribute describes the image for accessibility and fallback.
- Good images need correct size, compression, caption, and responsive behavior.
0
Level 0 — Understand the folder path
Before writing the tag, know where the image is saved.
In this project, the HTML file is beside a folder named pics. So an image inside that folder is written as pics/marigold.png.
Folder map
html-img-0-to-infinity/
index.html
pics/ marigold.png, lotus.png, hibiscus.png, jasmine.png
Project structure
html-img-0-to-infinity/
├── index.html
└── pics/
├── marigold.png
├── lotus.png
├── hibiscus.png
└── jasmine.png1
Level 1 — Your first image
The simplest useful image uses src and alt.
The img tag is an empty element. It does not need
a closing </img> tag.
Output
First image code
<img src="pics/marigold.png" alt="A bright marigold flower illustration with green leaves">Why alt matters
If the image cannot load, the browser can show the alternate text. Screen readers also use it to explain the image to users who cannot see it clearly.
2
Level 2 — Width, height, and responsive image size
Do not let images break your layout.
A common modern rule is img { max-width:100%;
height:auto; }. This prevents an image from becoming wider than its container.
Responsive image inside a two-column hero
Flower of the day
This block stays readable while the image adapts to available space.
Responsive image CSS
img {
max-width: 100%;
height: auto;
display: block;
}
.flower-photo {
border-radius: 18px;
border: 1px solid #efdfb2;
}Important habit
Add real width and height attributes when possible. They help the browser reserve space before the image loads.
3
Level 3 — Build a flower gallery
Now use several images in a clean grid.
A gallery is a repeated image pattern. The HTML repeats cards; the Cascading Style
Sheets control the grid.
Flower gallery
Lotus
Hibiscus
Jasmine
Gallery HTML + CSS
<div class="flower-grid">
<article class="flower-card">
<img src="pics/marigold.png" alt="Marigold flower">
<p>Marigold</p>
</article>
<article class="flower-card">
<img src="pics/lotus.png" alt="Lotus flower">
<p>Lotus</p>
</article>
</div>
.flower-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}4
Level 4 — Cropping with object-fit
Make mixed image sizes look consistent.
Sometimes gallery images have different natural sizes. Use object-fit: cover when you want every image to fill the same visual
box.
Same image, different frames
Wide card
Equal height
Clean gallery
object-fit code
.flower-card img {
width: 100%;
height: 180px;
object-fit: cover;
}Common mistake
Do not stretch an image by forcing both width and height without object-fit. It can make people, products, and diagrams look distorted.
5
Level 5 — Figure, lazy loading, srcset, and picture
Now move toward professional usage.
figure + figcaption
When to use figure
Use figure when the image and its caption form one meaningful unit, such as a diagram, chart, gallery photo, or teaching illustration.
When to use loading="lazy"
Use lazy loading for images that are lower on the page. The browser may delay them until the user scrolls near them.
Professional image patterns
<figure>
<img
src="pics/jasmine.png"
alt="A jasmine flower illustration"
width="900"
height="600"
loading="lazy"
>
<figcaption>Jasmine flower example with a visible caption.</figcaption>
</figure>
<img
src="pics/marigold.png"
srcset="pics/marigold.png 900w, pics/lotus.png 900w"
sizes="(max-width: 700px) 100vw, 50vw"
alt="Flower example for responsive image learning"
>
<picture>
<source media="(max-width: 700px)" srcset="pics/lotus.png">
<img src="pics/marigold.png" alt="A flower selected by the browser">
</picture>Best Practices Checklist
Use this before publishing
- Use meaningful file names such as marigold-flower.png.
- Write useful alt text for meaningful images.
- Use empty alt text alt="" only for purely decorative images.
- Compress large images before uploading.
- Set max-width:100% for responsive layouts.
- Use captions when the image teaches or explains something.
- Use lazy loading for lower-page images.
- Use Search Engine Optimization image tags when the page will be shared.
Practice Challenge
Improve this flower image lesson yourself.
Challenge 1: Add a fifth flower image to the pics folder and place it in the gallery.
Show idea
Add a new image file and copy one article.flower-card block. Change the src, alt, and caption text.
Challenge 2: Make every image card show a hover zoom effect.
Show idea
Use overflow:hidden on the card and transform:scale(1.05) on the image during hover.
Challenge 3: Create a hero banner using picture so mobile and desktop get different images.
Show idea
Use a source tag for the mobile image and keep a normal img fallback.
Final Summary
The img tag looks small, but it opens a large subject: paths, accessibility, performance, responsive design, captions, and Search Engine Optimization.
Best next step
Turn this into a real flower encyclopedia page. Add flower names, seasons, uses, location, and a larger image gallery.