Course Curriculum — 8 Units
01
Introduction to HTML
- What is HTML? History & evolution — Understanding the core structure of the World Wide Web and how browsers parse web pages.
- Structure of an HTML document — The boilerplates: Document Type Definition (<!DOCTYPE html>), the HTML root tag, and metadata.
- Basic tags: <html>, <head>, <body> — Differentiating between the document header (for metadata and styles) and the body (visible elements).
- Headings, paragraphs & text formatting — Working with typographic tags (<h1>–<h6>, <p>) and formatting text semantically (<strong>, <em>, <mark>, <code>).
- Lists: ordered, unordered & definition — Creating structured data lists using <ul>, <ol>, and key-value <dl> (description lists).
- SEO Basics & Metadata — Structuring <meta> description, keywords, viewport configuration, and Favicons.
02
Links & Navigation
- Anchor tags <a> and key attributes — Linking pages together using href, target="_blank", and rel="noopener".
- Internal vs external navigation — Navigating between sections on the same page (scroll links) vs navigating to other websites.
- Email, phone & file-download links — Creating action-oriented triggers using mailto:, tel:, and the download attribute.
- Navigation menus with <nav> — Building clean, crawlable semantic site headers and navbar structures.
03
Images & Media
- Adding images with <img> — Displaying visual graphics on a page.
- Attributes: alt, title, width, height — SEO and accessibility best practices for images, and avoiding layout shifts.
- Responsive images with srcset & <picture> — Serving different image sizes and formats dynamically based on device screens.
- Embedding audio and video — Implementing basic <audio> and <video> tags.
- Modern additions: Lazy loading & formats — Native loading optimization (loading="lazy") and modern asset delivery (WebP, AVIF).
- Resource hints for speed — Using preload, preconnect, and prefetch to accelerate file delivery.
04
Tables
- Basic table: <table>, <tr>, <td>, <th> — Structuring data sets in row and column grids.
- <thead>, <tbody>, <tfoot> — Partitioning table content for readability and printer-friendly styling.
- Merging cells: rowspan & colspan — Creating multi-row and multi-column spanned cells.
- Captions & accessibility attributes — Adding summaries and utilizing scope attributes for screen readers.
05
Forms & User Input
- Form structure with <form> & action/method — Connecting frontend forms to backend services via GET and POST requests.
- Input types: text, email, password, date, file… — Collecting diverse user data types with native keyboard triggers.
- <textarea>, <select>, <option>, <datalist> — Building multi-line text blocks, dropdown selections, and auto-suggest search inputs.
- <fieldset> & <legend> — Grouping related form elements together for clean structure and accessibility.
- Built-in HTML5 form validation — Using required, pattern, min/max, and custom validation messages without JavaScript.
- Modern additions: Mobile optimization & APIs — Customizing virtual keyboards (inputmode, enterkeyhint), Constraint Validation API, and native components like <dialog>, <popover>, <details>, and <summary>.
06
Semantic HTML
- What is semantic markup & why it matters — Writing clean, readable HTML that browsers, developers, and search engines understand.
- <header>, <footer>, <main>, <article>, <section>, <aside> — Defining layout regions instead of relying on generic <div> wrappers.
- Impact on SEO & screen-reader accessibility — How Google crawlers and assistive devices navigate a semantic structure.
- Accessibility & WAI-ARIA — Introducing basic ARIA roles (role="..."), labels (aria-label), and keyboard navigation.
07
Advanced Multimedia & Graphics
- <audio> & <video> with controls & attributes — Embedding media with autoplay, loop, muted, and custom player attributes.
- <canvas> for dynamic 2D graphics — Scripting graphics, shapes, and animations directly in the browser.
- <svg> for scalable vector graphics — Creating resolution-independent inline vector shapes and symbols.
- Embedding external content with <iframe> — Safely embedding maps, external videos, and sandboxing them for security.
08
HTML5 APIs & Modern Features
- Geolocation API — Accessing user location coordinates with permission.
- Drag-and-Drop API — Creating interactive interfaces where users can drag and drop elements.
- Web Storage: localStorage & sessionStorage — Storing client-side user data securely in the browser.
- Web Components & Shadow DOM — Building reusable, encapsulated HTML custom elements with <template>, <slot>, and CSS styling scopes.
🏗️
Build Real Websites
Create fully structured, accessible HTML pages from scratch
🔍
SEO-Ready Markup
Write semantic HTML that search engines and screen readers love
📱
Responsive Media
Use HTML5 picture, srcset & media tags for responsive layouts
🎓
Unisoft Certificate
Earn a recognised certificate on successful course completion
💼
Placement Support
Interview prep & referrals to 10+ hiring partner companies
🚀
Strong Foundation
Ready to advance to CSS, JavaScript & full-stack frameworks
Tools & Technologies Covered
HTML5
VS Code
Chrome DevTools
GitHub Basics
Live Server Extension
ARIA & Accessibility
SEO Fundamentals
HTML5 APIs
HTML Course — Official Syllabus