Course Overview (elevator pitch)

HTML is the fundamental language of the web — the skeleton that gives web pages structure. This course turns beginners into confident HTML practitioners who can write semantic, accessible, and exam-ready markup. Through theory, practical code, progressive exercises, tests, and projects (including finance-related examples like invoices and balance sheets), students will build the core skills needed for front-end development and for integrating with CSS/JS later.

Learning Outcomes (By the end of this course students will be able to...)

1. Explain HTML concepts and semantic structure clearly and use them in real projects.

2. Build accessible, well-structured web pages using HTML5 best practices.

3. Create forms, tables, multimedia embeds and perform basic client-side validation.

4. Apply accessibility (WCAG) and SEO-friendly practices in markup.

5. Debug HTML, validate markup, and follow testing checklists.

6. Produce an end-to-end HTML project (e.g., invoice app UI) and defend choices in exams/interviews.

Prerequisites & Recommended Environment

• Basic computer literacy. No prior coding required.

• Recommended editors: VS Code (with Live Server), Sublime Text, or any plain text editor.

• Recommended browsers: Chrome, Firefox (latest).

• Developer tools: Browser DevTools (Elements, Console), Lighthouse (for accessibility/SEO checks).

• Optional: Git for version control and GitHub for hosting.

Module-by-module Breakdown (12+ Modules)

Each module includes: summary, lesson content, code examples, common mistakes & tips, exercises, MCQs (with answers after set), and a mini-project idea with rubric.

Module 1 — HTML Basics & Document Structure

Summary (2–3 lines)

Introduce HTML syntax, DOCTYPE, , , , elements, attributes, tags, and document flow.

Detailed Lesson Content & Rationale

• HTML = HyperText Markup Language. It's not a programming language — it's a markup language.

• Every HTML page starts with  which tells browsers to use modern standards.

• The  contains metadata — title, meta tags, links to CSS. The  contains visible content.

• Use semantic tags for meaning: headings (

  –

  ), paragraphs (

  ), lists (

  • ,
   
  1. ), links (
  ), images ().
  1. Attributes modify element behavior; e.g., href for , src and alt for .

  Analogy: Think of the HTML document as a book:  is the ISBN telling the reader which edition;  is the table of contents & metadata;  is the chapters.

  Code Example (copy-paste-ready)

  Welcome to HTML Basics

  This is a sample paragraph demonstrating structure.

  
    Example Link
  
  
  

  Common Mistakes & Quick Tips

  • Forgetting  (may trigger quirks mode).

  • Missing alt attribute on images — bad for accessibility.

  • Using presentational tags like  (deprecated). Use CSS for presentation.

  Exercises

  1. Basic: Create an HTML page with a title, an h1, two paragraphs, and a link.

  2. Intermediate: Add a second page and create navigation between them using relative links.

  3. Challenge: Create a multi-section page using 

      and 

      with semantic headings and a table of contents anchor links.

  MCQs (5)

  1. Which tag sets the document title shown in browser tab?

  2. What does alt attribute provide?

  3. True/False:  and  are semantically identical.

• Which tag is appropriate for a blog post? (

  , 

  , )

• Where should meta viewport be placed? ( or )

• (Answers & explanations after Module 12 MCQ answers section.)

  Mini-project idea & grading rubric

  Mini-project: Create a “Student Profile” HTML page with header, bio, contact links, and list of courses.
  Rubric (out of 20): Structure & semantics (8), Use of attributes (alt, lang, meta) (4), Clean code & indentation (4), Extra touches like anchor links (4).

  ---

  Module 2 — Headings, Text, & Content Semantics

  Summary

  Use appropriate headings, text-level semantics (, , ), and manage document outline.

  Lesson Content

  • Headings define document structure — only one 

     per page is recommended for clarity.

  • Use semantic inline tags:  for importance,  for emphasis,  for references.

• Use 

   for long quotations;  for inline quotes.

• Code Example

  Financial Analysis 101

  Introduction

  Note: Always verify source data.

  This is a long quote from a financial report.

  Common Mistakes & Tips

  • Using heading tags for styling (e.g., 

     to get small text). Use CSS instead.

  • Overusing  and  — prefer semantic  and .

  Exercises

  1. Basic: Create a structured article using 

     –

     .

  2. Intermediate: Convert a plain-text outline into semantic HTML.

  3. Challenge: Create an accessible FAQ section using headings and 

     /

     .

  MCQs (5)

  (See answers section later.)

  Mini-project & rubric

  Mini-project: Write a short blog post “Introduction to Corporate Tax” with 3 headings, a quote, and emphasis.
  Rubric (out of 20): Semantic use (8), Readability (6), Accessibility (4), Code quality (2).

  ---

  Module 3 — Lists, Images, and Media

  Summary

  Implement ordered/unordered lists, description lists, and embed images & multimedia with best accessibility practices.

  Lesson Content

  • Lists: 

    • ,
     
    1. ,
     
    1. , 

       ,

        

       , 

       .

    2. Images: always add alt; use width/height attributes to reduce layout shifts. Use responsive images technique srcset for multiple sizes.

    3. Embedding video and audio using  and . Use captions () for accessibility.

    Code Example

    Top 3 Financial Ratios

    2. Current Ratio
    4. Debt-to-Equity
    6. Return on Equity

    Common Mistakes & Tips

    • Omitting alt.

    • Using images for text (bad for SEO & accessibility).

    • Not providing captions for videos.

    Exercises

    1. Basic: Create a grocery list using 

       • .

       • Intermediate: Build a price-list using 

         .

       • Challenge: Add a responsive  with srcset and sizes.

    MCQs (5)

    (Answers later.)

    Mini-project

    Mini-project: Build a “Product Card” with image, price list, and a short promo video.
    Rubric: Accessibility & alt usage (6), Responsive behavior (6), Media controls & captions (8).

    ---

    Module 4 — Links, Navigation & SEO Basics

    Summary

    Create internal and external links, navigation menus, and introduce SEO-related elements (

    Common Mistakes & Tips

    • Using "click here" for links — use descriptive anchor text.

    • Forgetting rel="noopener" with target="_blank".

    Exercises

    1. Basic: Build a navigation menu with three links.

    2. Intermediate: Implement breadcrumb navigation using an ordered list.

    3. Challenge: Create a sitemap page with semantic links.

    MCQs (5)

    (Answers later.)

    Mini-project

    Mini-project: Create a site header with logo, accessible nav menu, and meta tags for SEO.
    Rubric: Semantic nav (6), SEO tags (4), Accessibility (4), Visual clarity (6).

    ---

    Module 5 — Tables, Data & Financial Markup

    Summary

    Build accessible tables, use , , , and create finance-friendly tables (ledger, invoice, balance sheet).

    Lesson Content

    • Tables for tabular data only; do not use tables for layout.

    • Use  for table title, and  for headers — improves screen reader navigation.

    • Use numeric column alignment with CSS (text-align: right), and the  element for dates.

    Code Example — Balance Sheet (semantic)

    XYZ Corp — Balance Sheet (FY 2025)

    Particulars	Amount (₹)
    Cash & Cash Equivalents	150,000
    Inventory	250,000
    Total	400,000

    Common Mistakes & Tips

    • Missing  headers.

    • Not using caption.

    • Using tables to create columns for layout (bad for responsiveness).

    Exercises

    1. Basic: Create a 3×3 table with header and footer.

    2. Intermediate: Build an invoice table with columns: item, qty, rate, amount.

    3. Challenge: Add accessibility attributes and export to CSV logic (conceptual).

    MCQs (5)

    (Answers later.)

    Mini-project

    Mini-project: Build a responsive invoice table with totals and tax rows.
    Rubric: Semantic table markup (8), correct totals & calculations (6), Responsiveness (6).

    ---

    Module 6 — Forms & User Input

    Summary

    Create accessible forms, inputs, labels, fieldsets, validation attributes, and explain how forms map to server requests.

    Lesson Content

    • Use 

       with action and method (GET vs POST).

    • Use  linked to inputs — vital for accessibility.

    • Input types: text, email, tel, number, date, checkbox, radio, file, password.

    • Use required, min, max, pattern for client-side constraints (not a substitute for server validation).

    • Use 

       & 

       to group related fields.

    Code Example — Invoice Payment Form

    Payer Details

    Full Name Email
    Payment

    Amount (₹)

    
    
      Pay Now
    
    

    Common Mistakes & Tips

    • Not associating label with input.

    • Using placeholder as the only label (not accessible).

    • Overreliance on HTML validation — always validate server-side.

    Exercises

    1. Basic: Create a contact form with name, email, and message.

    2. Intermediate: Add validation constraints and a confirmation page.

    3. Challenge: Create a multi-step form using multiple 

        elements or JS (conceptual).

    MCQs (5)

    (Answers later.)

    Mini-project

    Mini-project: Build a payment form for a freelance invoice with required validation and accessible labels.
    Rubric: Form semantics (7), Validation (6), Usability (7).

    ---

    Module 7 — Semantic HTML5 & ARIA Basics

    Summary

    Use HTML5 semantic elements (

    ,