Images — Complete Guide
Images — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 9 of 100
Images
Basics → Forms & semantics → APIs & performance → Projects
Basics · 1 — Structure & media · ~6 min · HTML — Foundations
What is this?
img embeds images with src and alt. Width/height help reduce layout shift.
Why should you care?
MarkupVerse product shots and logos need meaningful alt (or empty alt if decorative).
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<img src="/assets/card.png" alt="MarkupVerse debit card front" width="320" height="200">
<img src="/assets/divider.svg" alt="" width="40" height="4">Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Decorative images use alt="".
- Don’t put critical text only in an image.
- Prefer modern formats later (webp).
Practice next
- Add a content image with alt.
- Add a decorative image with empty alt.
- Set width and height.
- Add loading="lazy".
- Swap to a webp src.
Remember
src + alt required. Empty alt if decorative. Size attributes help CLS.
MarkupVerse card image
Product image has clear alt.
Outcome: a11y and SEO both improve.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
