HTML HTML Component Exercise: Responsive Product Card

A useful interface does not need to be complicated. Start with native HTML, then add JavaScript only when you need it.

What You Need to Know

A product card should present one understandable item, with its name, image description, price, and a clear action. Its HTML structure matters more than decorative spacing.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<article class="product-card">
    <img src="images/notebook.jpg" alt="Blue spiral notebook" width="640" height="420" loading="lazy">
    <h2>School notebook</h2>
    <p>80 pages, recycled paper.</p>
    <p><strong>$5</strong></p>
    <button type="button">Add to cart</button>
</article>

Let’s Read the Code

<img>: The img displays a picture; its alt is the text alternative.
<h2>: A heading divides the page into understandable parts.
src: Src identifies a resource path for images, frames, or media.
width: Width gives a preferred or intrinsic media width, depending on the element.

What the example shows: Article groups one standalone product. The image has alt text, the price is readable, and the action uses a button.

What Happens in the Browser?

When this example includes JavaScript, it supplies behavior that ordinary HTML does not automatically provide. Always think about a fallback.

Start with native behavior. Details, dialog, and popover each solve a different interface problem. Choose the simplest control that actually matches what a visitor wants to do, then test focus and dismissal as well as appearance.

Your Turn

Add a second product card with a different accessible image description.

Common Beginner Mistakes

Assuming new HTML syntax works in every browser without testing.
A product card can show an action, but adding to a cart requires application code.

Key Takeaways

A product card should present one understandable item, with its name, image description, price, and a clear action.
<img>: The img displays a picture; its alt is the text alternative.
Test the behavior you expect rather than trusting how the snippet looks in your editor.