Module 1: Basics & Setup (Structuring Content)
This module covers the core syntax, essential elements, and how to set up a local environment for writing and viewing HTML.
| Chapter No. | Topic | Core Concepts Covered |
| H1.1 | Introduction & Tools | What is HTML5? The role of HTML, CSS, and JavaScript. Setting up a local environment (VS Code, browser choice). Live Server extension. |
| H1.2 | The HTML Document Structure | The minimal required elements: <!DOCTYPE html>, <html>, <head>, and <body>. Saving files as .html. |
| H1.3 | Elements, Tags, and Attributes | Understanding elements vs. tags. Opening/closing tags. Attributes (e.g., src, href, class). Void (self-closing) elements (e.g., <br>, <img>). |
| H1.4 | Metadata and Head Elements | Using <title>, <meta charset="UTF-8">, and <meta viewport>. Linking to external CSS files (<link>). |
| H1.5 | Text and Semantic Elements | Headings (<h1> to <h6>), Paragraphs (<p>). Semantic markup like <header>, <footer>, <article>, <section>, <nav>. |
| H1.6 | Lists and Links | Unordered lists (<ul>, <li>), ordered lists (<ol>). Creating Hyperlinks (<a> with href, target). Absolute vs. Relative paths. |
| H1.7 | Basic Media Embedding | Embedding images (<img> with src, alt). Audio (<audio>) and video (<video>) tags. |
Module 2: Intermediate HTML (Forms, Tables, and Advanced Media)
This module focuses on complex content structures vital for data presentation and user interaction.
| Chapter No. | Topic | Core Concepts Covered |
| H2.1 | Tables | Structuring tabular data: <table>, <thead>, <tbody>, <tr>, <th>, <td>. colspan and rowspan attributes. |
| H2.2 | Introduction to Forms | The <form> element. Form attributes (action, method). Using <label> to improve accessibility. |
| H2.3 | Input Types and Attributes | Common input types: text, password, email, number, checkbox, radio, submit. Essential attributes: name, value, placeholder. |
| H2.4 | Advanced Form Elements | Using <textarea>, <select>, <option>, and <button>. Grouping inputs with <fieldset> and <legend>. |
| H2.5 | Form Validation (Client-Side) | Using HTML5 validation attributes: required, min/max, pattern, and type="email"/"url". |
| H2.6 | IDs, Classes, and Block vs. Inline | Differentiating id (unique) vs. class (reusable). Understanding block-level (<div>, <p>) and inline-level (<span>, <a>) elements. |
| H2.7 | Entities and Special Characters | Using HTML entities for reserved characters (e.g., <, >, ©). Non-breaking space ( ). |
Module 3: Advanced HTML5 Features (APIs, Semantics, and Best Practices)
This module explores the new features introduced in HTML5, advanced APIs, performance optimization, and integration with modern web technologies.
| Chapter No. | Topic | Core Concepts Covered |
| H3.1 | Custom Data Attributes | Using data-* attributes to store custom data privately on elements, often utilized by JavaScript. |
| H3.2 | HTML5 Microdata & Schema | Using microdata vocabulary (like Schema.org) for search engine optimization (SEO) and rich snippets. |
| H3.3 | The <canvas> Element | Introduction to the <canvas> element for drawing 2D graphics and animations using JavaScript (focusing on the HTML structure). |
| H3.4 | Geolocation API | Using the navigator.geolocation object to access the user’s location (focus on API access/permissions). |
| H3.5 | Web Storage: Local & Session | Using localStorage and sessionStorage to store key/value pairs locally in the browser. |
| H3.6 | Optimizing Media and Performance | Using the <picture> element and srcset attribute for responsive images. Lazy loading with loading="lazy". |
| H3.7 | Accessibility (A11y) and ARIA | Understanding web accessibility standards. Using ARIA attributes (e.g., role, aria-label) to enhance semantics for screen readers. |
| H3.8 | HTML Best Practices & Validation | Writing clean, semantic code. Introduction to HTML validation tools (W3C Validator). Code commenting best practices. |
