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

Section 1

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.

🇮🇳 IRCTC🇮🇳 Swiggy🇮🇳 OYO🇮🇳 Zepto

Prerequisite Checklist ✅

✅ Unit 1 completed — HTML5 document structure & semantic elements
✅ Comfortable with <header>, <main>, <article>, <section>
✅ Can create a valid HTML5 page from scratch

Section 2

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

Section 3

Concept Explanations

3.1 Lists — OL, UL, and DL

Real-World Analogy

Think of lists like a restaurant menu. An unordered list is the menu categories (no ranking). An ordered list is cooking steps (sequence matters). A definition list is the menu legend explaining symbols (🌶️ = Spicy, 🥬 = Vegan).

HTML5
<!-- 📁 FILE: swiggy-menu.html -->
<!-- 🏢 INDUSTRY CONTEXT: Swiggy/Zomato menu structure -->

<!-- Unordered List — menu categories (no sequence) -->
<h2>🍕 Menu Categories</h2>
<ul>
  <li>Starters
    <ul>  <!-- Nested list — subcategories -->
      <li>Paneer Tikka — ₹249</li>
      <li>Chicken Wings — ₹299</li>
    </ul>
  </li>
  <li>Main Course</li>
  <li>Desserts</li>
</ul>

<!-- Ordered List — cooking steps (sequence matters) -->
<h2>🧑‍🍳 How to Order on Swiggy</h2>
<ol>
  <li>Open the Swiggy app</li>
  <li>Search for your favourite restaurant</li>
  <li>Add items to cart</li>
  <li>Apply coupon code</li>
  <li>Pay via UPI and wait for delivery 🛵</li>
</ol>

<!-- Definition List — key-value pairs -->
<h2>🏷️ Menu Legend</h2>
<dl>
  <dt>🟢</dt>  <dd>Vegetarian</dd>
  <dt>🔴</dt>  <dd>Non-Vegetarian</dd>
  <dt>🌶️</dt>  <dd>Spicy — may contain chillies</dd>
  <dt>⭐</dt>  <dd>Chef's Special</dd>
</dl>

3.2 Hyperlinks & Target Attributes

HTML5
<!-- Basic link -->
<a href="https://www.irctc.co.in">Book Train Tickets</a>

<!-- Open in new tab (external links should ALWAYS do this) -->
<a href="https://www.irctc.co.in" target="_blank" rel="noopener noreferrer">
  IRCTC Official Site ↗
</a>

<!-- INDUSTRY NOTE: rel="noopener noreferrer" prevents:
     1. The new tab from accessing window.opener (security)
     2. Referrer header leaking (privacy)
     Every Indian company's security audit requires this. -->

<!-- Internal page link (anchor) -->
<a href="#contact">Jump to Contact Section</a>

<!-- Email link -->
<a href="mailto:support@shopdesi.in">Email Us</a>

<!-- Phone link (crucial for mobile UX) -->
<a href="tel:+911800123456">📞 Call: 1800-123-456</a>

<!-- Download link -->
<a href="brochure.pdf" download>📥 Download Brochure</a>

Students write target="_blank" without rel="noopener noreferrer". This is a security vulnerability — the new tab can access window.opener and redirect your original page to a phishing site. This is flagged in every security audit at TCS, Infosys, and Wipro.

3.3 Images — Optimization with srcset & Lazy Loading

❌ Before — One size for all devices

<img src="product-1920.jpg"
     alt="Cotton Kurti">
<!-- Mobile downloads a 2MB desktop image
     on a 4G connection. Wastes bandwidth. -->

✅ After — Responsive with srcset & lazy loading

<img
  src="product-800.jpg"
  srcset="product-400.jpg 400w,
         product-800.jpg 800w,
         product-1200.jpg 1200w"
  sizes="(max-width:600px) 400px,
        (max-width:1024px) 800px,
        1200px"
  alt="Cotton Kurti Set - Red"
  loading="lazy"
  width="800" height="600">
<!-- Browser picks the best image for device.
     loading="lazy" defers off-screen images. -->

Lazy Loading — Images below the fold (not visible on screen) are NOT downloaded until the user scrolls near them. loading="lazy" is a native HTML5 attribute — no JavaScript needed. Flipkart's product listing page has 50+ images; lazy loading saves ~60% bandwidth on initial page load.

The alt attribute is not optional. It must describe the image content: alt="Red Cotton Kurti Set with gold embroidery", not alt="image" or alt="photo". For decorative images (icons, backgrounds), use alt="" (empty) to tell screen readers to skip them. Always include width and height to prevent layout shift (CLS).

3.4 Embedding Media — Audio, Video & Iframe

HTML5
<!-- 📁 FILE: media-embed.html -->
<!-- 🏢 INDUSTRY CONTEXT: YouTube-style video player, Spotify-style audio -->

<!-- HTML5 Video — native player, no Flash needed -->
<video controls width="640" height="360" poster="thumbnail.jpg" preload="metadata">
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video.
     <a href="intro.mp4">Download the video</a>.</p>
</video>

<!-- HTML5 Audio -->
<audio controls preload="none">
  <source src="podcast.mp3" type="audio/mpeg">
  <source src="podcast.ogg" type="audio/ogg">
  Your browser doesn't support HTML5 audio.
</audio>

<!-- Iframe — embed YouTube, Google Maps, etc. -->
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560" height="315"
  title="Product Demo Video"
  allow="accelerometer; autoplay; encrypted-media"
  allowfullscreen
  loading="lazy">
</iframe>

3.5 Tables with Accessibility

When to use tables

Tables are for tabular data only — timetables, price comparisons, reports. Never use tables for page layout (that's a 1990s practice — use CSS Grid/Flexbox instead).

HTML5
<!-- 📁 FILE: oyo-room-listing.html -->
<!-- 🏢 INDUSTRY CONTEXT: OYO room comparison table -->

<table>
  <caption>OYO Townhouse — Room Types & Pricing (Bangalore)</caption>

  <thead>
    <tr>
      <th scope="col">Room Type</th>
      <th scope="col">Price/Night</th>
      <th scope="col">Capacity</th>
      <th scope="col">WiFi</th>
      <th scope="col">Breakfast</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Standard</th>
      <td>₹1,299</td>
      <td>2 guests</td>
      <td>✅</td>
      <td>❌</td>
    </tr>
    <tr>
      <th scope="row">Deluxe</th>
      <td>₹2,499</td>
      <td>2 guests</td>
      <td>✅</td>
      <td>✅</td>
    </tr>
    <tr>
      <th scope="row">Suite</th>
      <td colspan="2">₹4,999 (fits 4 guests)</td>
      <td>✅</td>
      <td>✅ + Dinner</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="5"><small>All prices inclusive of GST. Check-in: 12 PM, Check-out: 11 AM</small></td>
    </tr>
  </tfoot>
</table>

scope="col" tells screen readers "this header applies to the entire column." scope="row" tells it "this header applies to the entire row." Without scope, a blind user hearing "₹2,499" doesn't know which room type it belongs to. <caption> is the table's title — visible and announced by screen readers. These are WCAG 2.1 requirements.

3.6 HTML5 Forms — The Most Important Section

Why forms matter

Forms are how users talk to your application. Every login, registration, booking, payment, and search is a form. IRCTC processes 15 lakh bookings/day — each one starts with a form. Get forms wrong, and users abandon your app.

Form Attributes

Attribute	Purpose	Example
`action`	URL where form data is sent	`action="/api/register"`
`method`	HTTP method (GET for search, POST for sensitive data)	`method="POST"`
`enctype`	Encoding for file uploads	`enctype="multipart/form-data"`
`novalidate`	Skip browser validation (for custom JS validation)	`novalidate`

Complete HTML5 Form with All Input Types

HTML5
<!-- 📁 FILE: irctc-booking-form.html -->
<!-- 🏢 INDUSTRY CONTEXT: IRCTC-style train booking form -->
<!-- ⚠️ COMMON ERROR: Forgetting 'name' attribute = data not sent to server -->

<form action="/api/book-ticket" method="POST" enctype="multipart/form-data">

  <!-- Fieldset groups related inputs with a visible legend -->
  <fieldset>
    <legend>🚆 Passenger Details</legend>

    <!-- Text input with validation -->
    <label for="fullName">Full Name (as on ID):</label>
    <input type="text" id="fullName" name="fullName"
           required minlength="3" maxlength="50"
           placeholder="e.g., Rahul Sharma"
           autocomplete="name">

    <!-- Email with built-in validation -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"
           required placeholder="rahul@gmail.com">

    <!-- Tel — mobile keyboard shows number pad -->
    <label for="phone">Mobile Number:</label>
    <input type="tel" id="phone" name="phone"
           required pattern="[6-9]\d{9}"
           title="Indian mobile: 10 digits starting with 6-9"
           placeholder="9876543210">

    <!-- Number — age with min/max -->
    <label for="age">Age:</label>
    <input type="number" id="age" name="age"
           required min="1" max="120" value="25">

    <!-- Radio buttons — gender -->
    <p>Gender:</p>
    <label><input type="radio" name="gender" value="male" required> Male</label>
    <label><input type="radio" name="gender" value="female"> Female</label>
    <label><input type="radio" name="gender" value="other"> Other</label>
  </fieldset>

  <fieldset>
    <legend>🗓️ Journey Details</legend>

    <!-- Date picker -->
    <label for="travelDate">Travel Date:</label>
    <input type="date" id="travelDate" name="travelDate"
           required min="2025-01-01">

    <!-- Select dropdown -->
    <label for="fromStation">From Station:</label>
    <select id="fromStation" name="fromStation" required>
      <option value="">-- Select Station --</option>
      <option value="NDLS">New Delhi (NDLS)</option>
      <option value="BCT">Mumbai Central (BCT)</option>
      <option value="MAS">Chennai Central (MAS)</option>
      <option value="HWH">Howrah Junction (HWH)</option>
      <option value="SBC">Bangalore City (SBC)</option>
    </select>

    <!-- Datalist — autocomplete search -->
    <label for="toStation">To Station:</label>
    <input type="search" id="toStation" name="toStation"
           list="stations" required placeholder="Type station name...">
    <datalist id="stations">
      <option value="New Delhi (NDLS)">
      <option value="Mumbai Central (BCT)">
      <option value="Jaipur Junction (JP)">
      <option value="Varanasi Junction (BSB)">
    </datalist>

    <!-- Select class (multi-select not needed here but shown) -->
    <label for="travelClass">Class:</label>
    <select id="travelClass" name="travelClass" required>
      <option value="SL">Sleeper (SL)</option>
      <option value="3A">AC 3-Tier (3A)</option>
      <option value="2A">AC 2-Tier (2A)</option>
      <option value="1A" selected>AC First Class (1A)</option>
    </select>

    <!-- Range — number of passengers -->
    <label for="passengers">Passengers: <output id="passOutput">1</output></label>
    <input type="range" id="passengers" name="passengers"
           min="1" max="6" value="1"
           oninput="passOutput.textContent=this.value">
  </fieldset>

  <fieldset>
    <legend>🎫 Preferences</legend>

    <!-- Checkboxes — multiple selections -->
    <label><input type="checkbox" name="meal" value="veg"> 🥬 Veg Meal</label>
    <label><input type="checkbox" name="meal" value="nonveg"> 🍗 Non-Veg Meal</label>
    <label><input type="checkbox" name="insurance" checked> 🛡️ Travel Insurance (₹35)</label>

    <!-- Textarea — special requests -->
    <label for="specialReq">Special Requests:</label>
    <textarea id="specialReq" name="specialReq"
              rows="3" cols="50"
              maxlength="200"
              placeholder="e.g., Lower berth preferred, wheelchair assistance"></textarea>

    <!-- Color picker (for fun — theme selection) -->
    <label for="themeColor">Ticket Theme Color:</label>
    <input type="color" id="themeColor" name="themeColor" value="#0369a1">

    <!-- File upload — ID proof -->
    <label for="idProof">Upload ID Proof (Aadhaar/PAN):</label>
    <input type="file" id="idProof" name="idProof"
           accept=".jpg,.png,.pdf">
  </fieldset>

  <!-- Submit & Reset -->
  <button type="submit">🎫 Book Ticket</button>
  <button type="reset">🔄 Reset Form</button>

</form>

HTML5 Validation Attributes Reference

Attribute	What It Does	Example
`required`	Field must be filled	Prevents empty submission
`pattern`	Regex validation	`pattern="[6-9]\d{9}"` (Indian mobile)
`min` / `max`	Range for number/date	`min="1" max="120"`
`minlength` / `maxlength`	Text length limits	`minlength="3" maxlength="50"`
`placeholder`	Hint text (disappears on focus)	`placeholder="e.g., Rahul"`
`autocomplete`	Browser autofill hints	`autocomplete="email"`
`accept`	Restrict file types	`accept=".jpg,.pdf"`

HTML5 form validation happens before JavaScript even runs. When you add required and type="email", the browser validates the input natively — no JS needed. This is faster, more accessible (screen readers announce validation errors), and works even if JS is disabled. JavaScript validation should be a second layer, not the only layer.

Section 4

Real-Life Industry Problems

🏢 INDUSTRY PROBLEM #1 — Swiggy Restaurant Menu Page

Scenario

Build a restaurant menu page for "Biryani House" on a Swiggy-like platform. The menu must be navigable by screen readers and optimized for 4G mobile connections.

Requirements

Nested unordered lists: categories → dishes (Starters → Paneer Tikka, Chicken 65)
Each dish shows: name, price (<strong>), dietary mark (🟢/🔴), rating
Images with srcset (400w, 800w) and loading="lazy"
Navigation links to jump to each category (#starters, #mains, #desserts)
Definition list for the menu legend (symbols explained)

Interview Angle: "Swiggy asks freshers: How would you structure a menu page for SEO and accessibility?"

🏢 INDUSTRY PROBLEM #2 — OYO Room Comparison Table

Scenario

Build a responsive room comparison table for an OYO-style hotel booking site. The table must be accessible — a blind user should understand which amenities belong to which room type.

Requirements

Table with <caption>, <thead>, <tbody>, <tfoot>
Use scope="col" and scope="row" for accessibility
At least one colspan and one rowspan
Footer row with pricing disclaimer
5+ room types with 5+ amenity columns

What This Teaches: Accessible table design. Interview Angle: "WCAG 2.1 compliance is tested in TCS and Wipro audits."

🏢 INDUSTRY PROBLEM #3 — IRCTC Train Booking Form

Scenario

Build a complete train booking form for an IRCTC-style platform. The form must validate all inputs using only HTML5 attributes (no JavaScript). Every field must have proper labels, placeholders, and native validation.

Requirements

3 fieldsets: Passenger Details, Journey Details, Payment
Input types: text, email, tel (with Indian mobile pattern), number, date, radio, checkbox, select, datalist, range, file, color, textarea
All fields with required, pattern, min/max, placeholder
Datalist for station autocomplete
File upload for Aadhaar/PAN with accept filter

What This Teaches: Complete HTML5 form design with native validation — the foundation for Unit 5's JS validation.

Section 5

Lab Exercises

🟢 Beginner Exercise 1: Nested Menu List

Estimated Time: 20 minutes

Create a restaurant menu using nested lists. Main categories (Starters, Main Course, Desserts, Beverages) as <ul>. Each category contains 3+ dishes as nested <li>. Add prices using <strong> and dietary marks (🟢/🔴). Add a definition list (<dl>) explaining the symbols.

Hints: (1) Nest <ul> inside <li>, not inside another <ul> directly. (2) Use <s> for original prices on discounted items.

🟢 Beginner Exercise 2: Image Gallery with Lazy Loading

Estimated Time: 25 minutes

Create a "Tourist Destinations of India" gallery with 6+ images. Each image must use alt (descriptive), width/height, and loading="lazy". For at least 2 images, add srcset with 2 sizes. Use the <figure> and <figcaption> elements for image captions.

Extension: Embed a YouTube video of "Top 10 Indian Destinations" using <iframe> with loading="lazy" and a title attribute.

🟡 Intermediate Exercise 3: Accessible Data Table

Estimated Time: 30 minutes

Create an "Indian Railways Fare Chart" table comparing fares across 5 trains (rows) and 4 classes (columns: SL, 3A, 2A, 1A). Include: <caption>, scope attributes, colspan for merged header, and <tfoot> with disclaimer. Make the table pass WAVE accessibility checker.

Hints: (1) Headers need scope="col". (2) Row headers need scope="row". (3) Use <thead>, <tbody>, <tfoot> to group.

🔴 Advanced Exercise 4: Complete Registration Form

Estimated Time: 40 minutes

Build a "Campus Placement Portal" registration form with 3 fieldsets: Personal Details (name, email, phone with Indian pattern, DOB, gender radios), Academic Details (college select, branch datalist, CGPA number 0-10, resume file upload), Preferences (preferred locations checkboxes, expected CTC range slider, cover letter textarea). All fields must have HTML5 validation attributes. Test by clicking Submit without filling — every required field should show a native error.

⚫ Industry-Level Exercise 5: Complete E-Commerce Product Page

Estimated Time: 50 minutes

Build a complete Flipkart-style product detail page with: (1) Image gallery using <figure>, srcset, and lazy loading. (2) Product details in a definition list (Brand, Color, Material, Warranty). (3) Size selection via radio buttons. (4) Quantity selector via number input (min=1, max=10). (5) Specifications in an accessible table. (6) Review form with star rating (range 1-5), comment textarea, and file upload for photos. All content must use semantic HTML. Validate at W3C — zero errors.

Section 6

MCQ Assessment Bank — 15 Questions

Level 1 — Remember ⭐

Which HTML5 input type shows a date picker on mobile browsers?

<input type="text">
<input type="date">
<input type="calendar">
<input type="datetime">

✅ B
📖 type="date" triggers the native date picker on mobile/desktop. (A) Shows text field. (C) Doesn't exist. (D) datetime is deprecated; use datetime-local.
🏢 Tested in: TCS NQT, AMCAT

L1 Remember

The <datalist> element provides:

A dropdown select menu
An autocomplete suggestion list for an input field
A data table
A list of downloadable files

✅ B
📖 <datalist> provides autocomplete suggestions for <input>. Unlike <select>, users can type freely AND pick from suggestions. (A) That's <select>. (C)(D) Unrelated.
🏢 Tested in: Infosys InfyTQ

L1 Remember

Which attribute is used to group related form controls with a visible title?

<div> + <h3>
<fieldset> + <legend>
<section> + <label>
<group> + <title>

✅ B
📖 <fieldset> groups related inputs; <legend> provides the group's visible title. Screen readers announce the legend when entering the group. (A) No semantic grouping. (C)(D) Don't exist for this purpose.
🏢 Tested in: Wipro NLTH

L1 Remember

Level 2 — Understand ⭐⭐

Why should external links use rel="noopener noreferrer" with target="_blank"?

To improve page loading speed
To prevent the new tab from accessing window.opener (security) and leaking referrer data (privacy)
To enable the link in incognito mode
To make the link SEO-friendly

✅ B
📖 Without noopener, the new tab can call window.opener.location = 'phishing-site.com' — redirecting your original tab. noreferrer prevents the destination from seeing where the user came from. (A)(C)(D) Incorrect.
🏢 Security audit requirement at all companies

L2 Understand

What is the purpose of loading="lazy" on images?

It makes images load slower
It defers loading off-screen images until the user scrolls near them, saving bandwidth
It compresses the image file
It adds a fade-in animation

✅ B
📖 Lazy loading delays downloading images that aren't visible. On a Flipkart page with 50+ product images, only the first ~6 load initially — the rest load as you scroll. Saves 60%+ bandwidth on mobile.
🏢 Google Core Web Vitals metric

L2 Understand

Why does <input type="tel"> show a numeric keypad on mobile but NOT validate phone format?

It's a browser bug
type="tel" only controls the keyboard layout; phone formats vary by country, so validation requires pattern
It validates on desktop, not mobile
You need JavaScript for the keypad

✅ B
📖 Indian phones: 10 digits starting 6-9. US: (xxx) xxx-xxxx. UK: +44 xxxx xxxxxx. No single validation works globally. type="tel" just shows the dial pad. Use pattern="[6-9]\d{9}" for Indian numbers.
🏢 UX design principle

L2 Understand

Level 3 — Apply ⭐⭐

Which code correctly validates an Indian mobile number (10 digits, starts with 6-9)?

<input type="number" min="6000000000" max="9999999999">
<input type="tel" pattern="[6-9]\d{9}" required>
<input type="phone" validate="indian">
<input type="text" maxlength="10">

✅ B
📖 type="tel" shows numeric keypad. pattern enforces regex. [6-9] = first digit 6-9. \d{9} = exactly 9 more digits. (A) Number type strips leading zeros. (C) No "phone" type. (D) No format validation.
🏢 Every Indian fintech form uses this pattern

L3 Apply

Which code correctly creates a table header that a screen reader can associate with its column data?

<td class="header">Price</td>
<th>Price</th>
<th scope="col">Price</th>
<strong>Price</strong>

✅ C
📖 <th scope="col"> tells assistive technology "this header applies to the entire column below." (B) <th> without scope works but is less explicit. (A)(D) Not table headers at all.
🏢 WCAG 2.1 AA requirement

L3 Apply

To allow a user to upload only PDF and image files, which attribute is correct?

type="file" filter=".pdf,.jpg"
type="file" accept=".pdf,.jpg,.png"
type="upload" format="pdf,jpg"
type="file" allowed="application/pdf"

✅ B
📖 accept restricts the file picker dialog to show only matching file types. Note: this is a UI hint, not security — always validate on the server too. (A)(C)(D) Use non-existent attributes.
🏢 IRCTC ID proof upload uses this

L3 Apply

Level 4 — Analyze ⭐⭐⭐

Q10

A form uses method="GET" for a login page. What is the security risk?

No risk — GET and POST are identical for security
GET appends data to the URL — passwords appear in browser history, server logs, and can be bookmarked
GET encrypts data automatically
GET prevents CSRF attacks

✅ B
📖 GET: /login?username=rahul&password=secret123 — visible in URL bar, browser history, and server access logs. POST sends data in the request body — not visible in URLs. Always use POST for sensitive data (login, payment, registration).
🏢 Security 101 — every company's code review catches this

L4 Analyze

Q11

A developer adds srcset to images but doesn't include sizes. What happens?

Images don't load at all
The browser defaults to assuming the image is 100vw (full viewport width) and may download an oversized image for smaller containers
The smallest image is always loaded
srcset is ignored

✅ B
📖 Without sizes, the browser assumes the image fills 100% of the viewport. For a 300px sidebar image on a 1440px screen, it downloads the 1440px variant. sizes="300px" tells the browser the actual display size. (A)(C)(D) Incorrect.
🏢 Google Core Web Vitals — LCP optimization

L4 Analyze

Level 5 — Evaluate ⭐⭐⭐

Q12

A teammate argues: "We should use only JavaScript for form validation and skip HTML5 validation attributes." What's your response?

"Agreed — JavaScript is more powerful"
"HTML5 validation provides a first layer that works without JS, is accessible, and is faster. JS should add a second layer for complex rules. Use both."
"HTML5 validation is enough, no need for JavaScript"
"Both are unnecessary if we validate on the server"

✅ B
📖 Defense in depth: HTML5 validates without JS (works if JS fails/blocked). JS handles complex rules (comparing fields, async checks). Server validates everything again (never trust client). All three layers are needed. (A) Ignores accessibility/JS-off. (C) Complex rules need JS. (D) Server-only means bad UX.
🏢 Architecture interview question at product companies

L5 Evaluate

Q13

A table without <caption>, scope, or <thead>/<tbody> looks identical to a properly structured table. Should the team refactor it?

No — visual correctness is sufficient
Yes — screen readers can't navigate the table, violating WCAG; search engines can't understand the data; and long tables won't have proper scroll behavior
Only if the table has more than 10 rows
Only if the client specifically requests accessibility

✅ B
📖 Accessibility is not feature-request-based — it's a compliance requirement. caption provides context, scope enables cell-header association, and thead/tbody enables proper printing and scrolling. (A)(C)(D) Miss legal and UX implications.
🏢 Accessibility audit at any enterprise

L5 Evaluate

Level 6 — Create ⭐⭐⭐

Q14

You're designing a flight booking form for a startup. Which combination of HTML5 elements best handles: departure date (no past dates), number of passengers (1-9), and cabin class selection?

Three <input type="text"> fields
<input type="date" min="today"> + <input type="number" min="1" max="9"> + <select> with Economy/Business/First
A single <textarea> asking users to type all details
Three <input type="radio"> groups

✅ B
📖 Each control matches its data type: date picker prevents past dates natively, number input enforces 1-9 range, select gives fixed options. (A) No validation. (C) Unstructured. (D) Radio is wrong for date/number.
🏢 Form design at MakeMyTrip, Cleartrip

L6 Create

Q15

A form requires the user to enter a GST number in the format: 22AAAAA0000A1Z5 (2 digits, 5 letters, 4 digits, 1 letter, 1 digit, 1 letter, 1 digit). Which HTML achieves this?

<input type="text" maxlength="15">
<input type="text" required pattern="\d{2}[A-Z]{5}\d{4}[A-Z]\d[A-Z]\d" title="Valid GST: 22AAAAA0000A1Z5">
<input type="gst">
<input type="number" minlength="15">

✅ B
📖 The regex \d{2}[A-Z]{5}\d{4}[A-Z]\d[A-Z]\d matches the GST format exactly. title shows a hint on validation failure. (A) No format check. (C) No such type. (D) Number can't contain letters.
🏢 Every Indian B2B fintech form

L6 Create

Section 7

Chapter Summary

Concept Mind Map

Mind Map
                    ADVANCED HTML5 & RESPONSIVE DESIGN
                                │
        ┌───────────┬───────────┼───────────┬───────────┐
      Lists       Links      Images      Tables      Forms
        │           │           │           │           │
   ├─ ul (unord)  ├─ href     ├─ srcset   ├─ caption  ├─ fieldset/legend
   ├─ ol (order)  ├─ target   ├─ sizes    ├─ scope    ├─ input types (15+)
   ├─ dl (defn)   ├─ rel      ├─ lazy     ├─ colspan  ├─ select/datalist
   └─ nesting     ├─ mailto   ├─ alt      ├─ rowspan  ├─ textarea
                  ├─ tel      ├─ figure   ├─ thead    ├─ validation attrs
                  └─ download └─ figcaption└─ tfoot   └─ file upload

Key Takeaways for Industry

Forms are the #1 user interaction point — get them wrong and users leave. HTML5 gives you 15+ input types and native validation for free. Use them.
Images must be responsive — srcset + sizes + loading="lazy" is the industry standard. A 2MB image on 4G is unacceptable.
Tables are for data, not layout — and accessible tables need caption, scope, thead/tbody/tfoot. No exceptions.
Always add rel="noopener noreferrer" to target="_blank" links. Security audits flag this everywhere.
HTML5 validation is your first defense line — required, pattern, min/max validate without JavaScript. JS adds the second layer. Server adds the third.

Quick Reference — HTML5 Input Types

TYPE           KEYBOARD    VALIDATES         USE CASE
text           ABC         No                Name, address
email          @ keyboard  Email format      Email fields
tel            Dial pad    No (use pattern)  Phone number
number         Numeric     min/max/step      Age, quantity
date           Date picker Date format       DOB, travel date
search         ABC + ✕     No                Search bar
url            ABC + .com  URL format        Website field
color          Color wheel Valid hex          Theme picker
range          Slider      min/max           Volume, rating
file           File picker accept filter     Upload documents
password       ABC (dots)  No                Login
hidden         None        No                Form tokens

"What to Google Next"

🔍 "HTML5 form validation API MDN" — Deep dive into checkValidity() and setCustomValidity()
🔍 "srcset and sizes explained" — Master responsive images
🔍 "WCAG 2.1 table accessibility" — Learn enterprise-grade table accessibility

Section 8

Interview Preparation

10 Frequently Asked Interview Questions

1. What is the difference between <select> and <datalist>?

<select> shows a fixed dropdown — users MUST pick from the options. <datalist> provides suggestions for an <input> — users can type freely OR pick a suggestion. Datalist is ideal for large lists (like 7,000+ railway stations) where a dropdown is impractical.

2. What does enctype="multipart/form-data" do?

It changes how form data is encoded when submitted. Default encoding (application/x-www-form-urlencoded) can't handle files. multipart/form-data encodes each field as a separate "part" — required for file uploads. Without it, <input type="file"> sends only the filename, not the file content.

3. Explain the difference between GET and POST methods.

GET appends data to the URL (?key=value) — visible, cacheable, limited to ~2KB. Use for search, filters. POST sends data in the request body — hidden from URL, no size limit. Use for login, registration, file uploads, payments. Never use GET for sensitive data.

4. What is srcset and why is it important?

srcset provides multiple image sources for different screen sizes/resolutions. The browser picks the best one — serving a 400px image on mobile and a 1200px image on desktop. Saves bandwidth, improves load time, and is a Google Core Web Vitals factor (LCP).

5. How do you make a table accessible for screen readers?

Use <caption> for the table title, <th> with scope="col"/scope="row" for headers, and <thead>/<tbody>/<tfoot> for grouping. This lets screen readers announce "Row 3, Column Price: ₹2,499" instead of just "₹2,499."

6. What is the pattern attribute used for?

pattern specifies a regex that the input must match. Example: pattern="[6-9]\d{9}" validates Indian mobile numbers. Combined with title, it shows a hint on validation failure. Works without JavaScript — native browser validation.

7. What is the difference between colspan and rowspan?

colspan="3" makes a cell span 3 columns horizontally. rowspan="2" makes a cell span 2 rows vertically. Common use: "Suite" room type spanning price + capacity columns, or a company name spanning all rows of its employees.

8. What happens if you omit the name attribute on a form input?

The input's data is NOT sent to the server when the form is submitted. name is the key in the key-value pair. Without it, the field is invisible to the backend — a very common bug in student projects and even production code.

9. Explain loading="lazy" on images and iframes.

It defers loading until the element is near the viewport (user scrolls close). Reduces initial page weight dramatically — a page with 50 product images might only load 8 initially. Native HTML attribute — no JavaScript needed. Supported in all modern browsers.

10. When should you use <figure> and <figcaption>?

Use them when an image (or diagram, code listing, video) has a caption that explains it. <figure> wraps the media + caption as a semantic unit. Screen readers announce the caption as part of the image. Better than a random <p> below an <img>.

GitHub Portfolio Tip 💼

Build and push: A complete "Hotel Booking" or "Train Booking" form with all HTML5 input types, validation, responsive images, and accessible tables. Include a README documenting which HTML5 features you used and why. This demonstrates form mastery — the #1 skill companies test in HTML interviews.

Certification Path 🎓

✅ freeCodeCamp — Responsive Web Design: HTML Forms section
✅ Google Developers — Web Accessibility course (forms & tables)
✅ MDN Web Docs — HTML Forms Guide (interactive tutorials)