MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 10: Media in HTML!
As the famous saying goes: "A picture is worth a thousand words!"
Imagine reading your school Science or Social Studies textbook if it only had walls of black-and-white plain text without a single diagram of the solar system, no photos of historic monuments, and no maps of India. It would feel boring and exhausting to read!
On the web, images capture attention, explain concepts visually, and build trust.
In this lesson, you will learn:
<img> tag.alt attribute is the most important image rule on the web.<figure> and <figcaption>.<picture> element!<img> Element 🖼️In HTML, images are embedded using the <img> tag.
Unlike paragraphs or headings, the <img> tag is an empty / void tag (it has no closing </img> tag).
<img> Tag:src (Source): The file path or web URL where the image file is stored.alt (Alternative Text): A written description of what is inside the picture.width & height: The dimensions of the image in pixels.alt Attribute 🛡️Beginners often skip writing the alt attribute because the image displays fine without it. Never do that! The alt attribute is the #1 rule of ethical web development:
Blind or low-vision students navigate websites using Screen Reader software. The software literally speaks the alt text aloud into their headphones: "Photo: Students building an autonomous drone in the robotics lab."
If a student is on a slow 2G/3G mobile network or the image link breaks, the browser shows a small icon alongside your alt text so the student still knows what was supposed to be there!
Google Image Search cannot "look" at pixels with human eyes; it reads your alt text to rank your school photos when people search online!
width and height 📐Have you ever visited a news website or blog on your smartphone, started reading a sentence, and suddenly — BAM! — an image popped onto the screen and the entire text jarringly jumped down 3 inches, making you lose your reading place?
That annoying jumping glitch is called Cumulative Layout Shift (CLS).
When you give the browser explicit width and height numbers in HTML:
The browser instantly reserves an exact rectangular empty space on the screen before the image even finishes downloading! When the picture finally downloads, it slips smoothly into its pre-reserved box without moving any text!
What if your school gallery has 50 high-resolution photos, but a visitor only glances at the first two at the top of the page? Downloading all 50 photos wastes their mobile internet data and slows down your website!
HTML gives you a magic attribute: loading="lazy":
With loading="lazy", the browser will NOT download the image until the user scrolls down and gets close to it! It speeds up page loading dramatically.
<figure> and <figcaption> 📚In science textbooks, you frequently see diagrams labeled like: "Figure 2.4: Cross-section of a Plant Cell".
In HTML5, we create textbook-style captions using <figure> and <figcaption>:
<figure>: The outer container wrapping the image and its caption together.<figcaption>: The caption text describing the figure.Which image format should you save your drawings and photos in?
| Format | Best For | Why Use It? |
|---|---|---|
| JPEG / JPG | Real-life photographs | Small file sizes with rich millions of realistic colors. |
| PNG | Logos, icons & graphics | Supports transparent backgrounds; sharp crisp text lines. |
| WebP | Modern web standard | Developed by Google; 30% smaller than JPG and PNG with identical quality! |
| SVG | Vector logos & line icons | Made of math formulas, so it never gets pixelated or blurry even on giant 4K TV screens! |
<picture> Element 📱💻Imagine you have a wide photograph of your school cricket team:
Wouldn't it be amazing if your website automatically showed a wide landscape photo on laptops, but switched to a close-up cropped portrait photo on phones?
This is called Art Direction, and we do it using the HTML5 <picture> tag!
<picture> Element Works:<source media="..."> rules from top to bottom.max-width: 600px), it loads the mobile image!<img> at the bottom.alt attributeNever leave off alt="". If an image is purely decorative (like a little background sparkle), write an empty alt="" so screen readers know to ignore it safely.
File extensions are case-sensitive on many web servers! If your photo is photo.JPG and you write src="photo.jpg", the image will break on the live internet.
If your photo is $800 \times 400$ (a 2:1 ratio), never set width="800" and height="800". It will stretch your picture vertically and make people look unnaturally tall! Always maintain the original aspect ratio.
<img> tag is an empty / void element that embeds images onto a webpage using the src attribute.alt attribute for screen reader accessibility, SEO, and broken-image fallbacks.width and height to prevent Cumulative Layout Shift (CLS).loading="lazy" to defer off-screen images and save mobile internet data.<figure> and <figcaption> to create textbook-style captions for diagrams and photos.<picture> element for responsive art direction to show different image crops on smartphones vs desktops.Test your understanding with these multiple-choice questions:
<img> tag?alt attribute considered essential on all HTML images?loading="lazy" to an image?Open VS Code and create a file named school-gallery.html.
Create a "School Science & Sports Exhibition Showcase":
<img> with full src, descriptive alt, explicit width, height, and loading="lazy".<figure> card with an image of the Solar System or an atom, followed by a <figcaption> labeled "Figure 1: Orbital Model of the Atom".<picture> with a mobile source (max-width: 600px) and a desktop fallback image.Next Up: In Topic 10.2, we will master Audio & Video in HTML5 — how to play native school podcasts, video lectures, and add accessible subtitles!
In the next lesson, we will continue your web development journey with Audio & Video (Media).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Div & Span Containers | Audio & Video |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.