Internet Programming Laboratory
Unit 1: Fundamentals of HTML5
HTML5 Document Structure, Semantic Elements, Metadata & SEO, Text Formatting, Block vs Inline, Validation — the bedrock of every web page on the internet.
🏢 Industry-Aligned | 📝 15 MCQs (Bloom's Taxonomy) | 🔬 5 Lab Exercises | 💼 Interview Prep
Why This Chapter Matters in 2025
Every single thing you interact with on the internet — from the Zomato restaurant page to your IRCTC train ticket — is built on HTML. It is not a programming language; it is the skeleton of the web. Without it, CSS has nothing to style, JavaScript has nothing to manipulate, and React/Angular have no DOM to render into. HTML5 is the foundation. Master it first, or everything else will crumble.
🏢 Industry Connection — Who Uses HTML5 in Production?
Zomato uses semantic HTML5 (<article>, <section>) for every restaurant listing. Google's crawler reads these tags to rank Zomato pages higher — if they used <div> everywhere, their SEO would collapse.
Flipkart structures every product page with <main>, <header>, <footer>, and <nav>. Their accessibility audit requires screen readers to navigate the page — impossible without semantic HTML.
Razorpay uses HTML5 metadata (<meta> tags) for Open Graph previews. When you share a Razorpay payment link on WhatsApp, the preview card (title, description, image) comes from their HTML5 <head>.
Prerequisite Checklist ✅
- ✅ A text editor installed (VS Code recommended — free, industry standard)
- ✅ A modern web browser (Chrome/Firefox/Edge — for DevTools)
- ✅ Basic computer literacy (file/folder operations)
- ✅ No prior coding experience required — we start from absolute zero
Learning Outcomes — Bloom's Taxonomy
| Bloom's Level | Learning Outcome |
|---|---|
| L1 — Remember | Recall the purpose and syntax of all HTML5 semantic elements (header, footer, main, section, article, nav, aside) |
| L2 — Understand | Explain WHY semantic HTML improves SEO, accessibility, and maintainability over div-based layouts |
| L3 — Apply | Build a complete, valid HTML5 page with correct document structure, metadata, and semantic markup |
| L4 — Analyze | Analyze a poorly structured HTML page and identify semantic, SEO, and accessibility violations |
| L5 — Evaluate | Evaluate competing HTML structures for a real-world page (e.g., blog vs e-commerce) and justify which semantic elements to use |
| L6 — Create | Design and build a complete multi-section webpage for an Indian startup using all HTML5 semantic elements |