Internet Programming Laboratory
Unit 2: Advanced HTML5 & Responsive Design
Lists, Links, Images, Media, Tables, and HTML5 Forms — build real web pages that work on every device.
🏢 Industry-Aligned | 📝 15 MCQs (Bloom's Taxonomy) | 🔬 5 Lab Exercises | 💼 Interview Prep
Why This Chapter Matters in 2025
Unit 1 gave you the skeleton. Unit 2 gives you the muscles and organs. Every real website needs: navigation lists, clickable links, optimized images, embedded videos, data tables, and user input forms. This unit covers every one of these — using modern HTML5 standards that Indian IT companies expect in 2025.
🏢 Industry Connection — Who Uses These Features?
IRCTC — India's largest booking platform relies on HTML5 forms with 15+ input types (date pickers, dropdowns, radio buttons) to book 15 lakh tickets daily. A single validation error = thousands of failed bookings.
Swiggy — Every restaurant menu is a nested list (<ul> inside <ul>). Every dish image uses srcset for responsive loading — serving smaller images on mobile to save bandwidth.
OYO — Hotel listings display room details in accessible tables with scope and caption. Their booking form uses HTML5 validation attributes (required, pattern, min, max) for client-side validation before the data even hits the server.
Prerequisite Checklist ✅
- ✅ Unit 1 completed — HTML5 document structure & semantic elements
- ✅ Comfortable with
<header>,<main>,<article>,<section> - ✅ Can create a valid HTML5 page from scratch
Learning Outcomes — Bloom's Taxonomy
| Bloom's Level | Learning Outcome |
|---|---|
| L1 — Remember | Recall the syntax and purpose of all HTML5 form input types (text, email, date, range, color, tel, number, search) |
| L2 — Understand | Explain how srcset and loading="lazy" optimize image performance on mobile networks |
| L3 — Apply | Build a complete, accessible HTML5 form with client-side validation using required, pattern, min/max |
| L4 — Analyze | Analyze a data table and determine the correct use of scope, caption, colspan, and rowspan for accessibility |
| L5 — Evaluate | Evaluate whether a given form design meets UX, accessibility, and validation best practices for an Indian fintech app |
| L6 — Create | Design and build a complete multi-step booking form (IRCTC-style) with all HTML5 input types and native validation |