HTML & HTML5 Complete Syllabus Web Development Foundation
HTML & HTML5
COMPLETE COURSE SYLLABUS
H5 HTML5 — Semantic, Multimedia, APIs & Modern Web Standards
10 Modules 75+ Topics 120+ Hours HTML5 Included
COURSE OVERVIEW
This course covers HTML from the ground up — starting with basic document structure and
progressing to advanced HTML5 APIs, semantic markup, accessibility, forms, multimedia, and
modern web standards. HTML5 features are clearly marked throughout every module with an
H5 badge.
Course Details Learning Outcomes
Duration: 120+ hours Write valid, semantic HTML documents
Level: Beginner to Advanced Use HTML5 semantic tags correctly
Prerequisites: None — start from scratch! Build accessible, SEO-friendly pages
Modules: 10 comprehensive modules Implement HTML5 APIs & multimedia
Module 1 Introduction to HTML 8 Hours
Topic Details & Key Concepts
What is HTML? HyperText Markup Language, role in web development, how
browsers render HTML, HTML vs CSS vs JS.
History of HTML HTML 1.0 to HTML 4.01, XHTML, HTML5 revolution, HTML Living
Standard (WHATWG).
HTML Document Structure <!DOCTYPE html>, <html>, <head>, <body> — anatomy of a web
page.
DOCTYPE Declaration 5 <!DOCTYPE html> for HTML5, legacy doctypes, why DOCTYPE
matters.
Head Elements <title>, <meta>, <link>, <style>, <script>, <base> — what goes in the
<head>.
Character Encoding <meta charset='UTF-8'>, importance of encoding, special characters,
HTML entities.
HTML Comments <!-- comment --> syntax, use cases, best practices.
H5 = HTML5 Feature | Page 1
HTML & HTML5 Complete Syllabus Web Development Foundation
Your First Web Page Creating [Link], opening in browser, validating with W3C
Validator.
Text Editors & Tools VS Code, Live Server extension, browser DevTools for HTML
inspection.
Module 2 HTML Core Elements & Text 12 Hours
Topic Details & Key Concepts
Headings <h1> through <h6>, hierarchy importance, SEO impact, one <h1> per
page rule.
Paragraphs & Line Breaks <p>, <br>, whitespace collapsing, difference between block and inline
display.
Text Formatting <strong>, <em>, <b>, <i>, <u>, <s>, <mark>, <small>, <sup>, <sub>.
Abbreviations & Definitions <abbr title=''>, <dfn>, <cite> — semantic inline elements.
Quotations <blockquote cite=''>, <q>, <cite> — block and inline quotes.
Preformatted Text <pre>, <code>, <kbd>, <samp>, <var> — code and keyboard
elements.
Horizontal Rule <hr> as a thematic break, not just a visual line.
HTML Entities &, <, >, , ©, © — special characters in
HTML.
Inline vs Block Elements Display differences, when to use each, nesting rules.
Span & Div <span> for inline grouping, <div> for block grouping — generic
containers.
Global Attributes 5 id, class, style, title, lang, tabindex, hidden, data-* attributes.
data-* Custom Attributes 5 Storing custom data on elements with data-name='value', reading via
JavaScript.
Module 3 Links, Lists & Tables 12 Hours
Topic Details & Key Concepts
Anchor Tag <a> href attribute, linking pages, external URLs, email links ([Link]
phone links ([Link]
Relative vs Absolute URLs Relative paths (../[Link]), absolute URLs ([Link] root-relative
(/page).
Link Target target='_blank', _self, _parent, _top — controlling where links open.
Link States :link, :visited, :hover, :active — CSS hook, but anchor semantics
matter.
Download Attribute 5 <a href='[Link]' download> — prompting file download.
Unordered Lists <ul> with <li> — bullet lists, nesting lists, accessibility considerations.
Ordered Lists <ol> with <li>, type attribute (1, A, a, I, i), start and reversed
attributes.
H5 = HTML5 Feature | Page 2
HTML & HTML5 Complete Syllabus Web Development Foundation
Description Lists <dl>, <dt>, <dd> — key-value / term-description lists.
HTML Tables <table>, <tr>, <td>, <th> — building tabular data structures.
Table Structure <thead>, <tbody>, <tfoot> — semantic grouping of table sections.
Table Spanning colspan and rowspan attributes — merging cells horizontally and
vertically.
Table Caption & Scope <caption>, scope='col'/'row' — table accessibility for screen readers.
Table Summary & Using <th> with scope, aria-label on complex tables, when to use
Accessibility tables.
Module 4 Images & Multimedia 12 Hours
Topic Details & Key Concepts
<img> Element src, alt, width, height attributes — embedding images, importance of
alt text.
Image Formats JPEG, PNG, GIF, WebP, SVG, AVIF — when to use each format.
Responsive Images 5 srcset and sizes attributes for different screen densities and widths.
<picture> Element 5 Art direction with <picture>, <source> with media queries for
responsive images.
Lazy Loading Images 5 loading='lazy' attribute — native browser lazy loading without
JavaScript.
Figure & Figcaption 5 <figure> and <figcaption> — semantic wrapping of images with
captions.
<video> Element 5 HTML5 video: src, controls, autoplay, loop, muted, poster, preload
attributes.
Multiple Video Sources 5 <source> inside <video> for fallback formats (MP4, WebM, OGG).
<audio> Element 5 HTML5 audio: src, controls, autoplay, loop, muted — embedding
audio.
Multiple Audio Sources 5 <source> inside <audio>, type attribute, codec fallbacks.
<track> Element 5 Subtitles and captions with <track kind='subtitles'>, WebVTT format.
<iframe> Element Embedding external pages, YouTube videos, maps — src, width,
height, allow.
SVG in HTML 5 Inline <svg>, <img src='[Link]'>, using SVG for scalable graphics.
<canvas> Element 5 HTML5 Canvas for 2D drawing — intro to element, actual drawing via
JS.
Module 5 HTML5 Semantic Elements 12 Hours
All elements in this module are HTML5 features. Semantic HTML improves accessibility, SEO,
and code readability by using meaningful tag names instead of generic divs.
Topic Details & Key Concepts
H5 = HTML5 Feature | Page 3
HTML & HTML5 Complete Syllabus Web Development Foundation
<header> 5 Page or section header — site logo, navigation, intro content. Can
appear multiple times.
<nav> 5 Navigation links — primary nav, breadcrumbs, pagination. Only for
major navigation blocks.
<main> 5 The main unique content of the page — only one <main> per page,
not nested.
<article> 5 Self-contained content: blog posts, news articles, forum posts,
widgets.
<section> 5 Thematic grouping of content — should have a heading. Different
from <article>.
<aside> 5 Content tangentially related to surrounding content — sidebars, pull
quotes, ads.
<footer> 5 Page or section footer — copyright, links, contact. Can appear
multiple times.
<figure> & <figcaption> 5 Self-contained media with optional caption — images, code blocks,
diagrams.
<details> & <summary> 5 Native disclosure widget — expandable/collapsible content without
JavaScript.
<dialog> 5 Native modal and non-modal dialog element, open attribute,
showModal() method.
<mark> 5 Highlighted / search-match text — do not use for styling, use for
semantic highlighting.
<time> 5 <time datetime='2024-01-01'> — machine-readable dates and times
for SEO.
<address> 5 Contact information for nearest <article> or <body> — not for postal
addresses only.
<progress> & <meter> 5 <progress value='70' max='100'>, <meter low high optimum value>
— native progress.
Semantic Page Layout 5 Combining header, nav, main, article, aside, section, footer in real
page layouts.
Module 6 HTML Forms & Input Elements 16 Hours
Topic Details & Key Concepts
<form> Element action, method (GET/POST), enctype, novalidate, autocomplete
attributes.
<input> Types (Classic) text, password, checkbox, radio, submit, reset, button, hidden, file,
image.
HTML5 Input Types 5 email, url, number, range, date, time, datetime-local, month, week,
color, search, tel.
<label> Element Linking labels to inputs with for/id, wrapping label pattern,
accessibility importance.
<textarea> Multi-line text input, rows, cols, resize CSS, maxlength, placeholder.
<select> & <option> Dropdown menus, <optgroup> for grouping options, multiple, size
attributes.
H5 = HTML5 Feature | Page 4
HTML & HTML5 Complete Syllabus Web Development Foundation
<datalist> 5 Autocomplete suggestions with <datalist> and <option> — linked via
list attribute.
<fieldset> & <legend> Grouping related form controls, <legend> as group label, accessibility
benefits.
Input Attributes placeholder, required, readonly, disabled, autofocus, autocomplete,
name, value.
HTML5 Validation required, min, max, step, minlength, maxlength, pattern — native
Attributes 5 form validation.
pattern Attribute 5 Regular expression validation: pattern='[A-Za-z]{3}' — without
JavaScript.
novalidate & Bypassing browser validation, custom JS validation workflows.
formnovalidate 5
Form Submission Default GET/POST behavior, preventing default with JS, FormData
API.
File Upload 5 <input type='file'>, accept, multiple, capture attributes for camera/file
access.
Output Element 5 <output> — result of a calculation or user interaction, for= attribute.
Form Accessibility ARIA roles, aria-required, aria-describedby, error announcement
patterns.
Module 7 HTML5 APIs & Browser Features 14 Hours
This module covers HTML5 built-in APIs that extend the browser's capabilities — all powered
through HTML attributes and JavaScript.
Topic Details & Key Concepts
Geolocation API 5 [Link](), watchPosition() —
location access with user permission.
Web Storage API 5 localStorage and sessionStorage — setItem, getItem, removeItem,
clear, storage events.
IndexedDB 5 Client-side database for structured data, transactions, object stores
— intro level.
Drag & Drop API 5 draggable attribute, ondragstart, ondragover, ondrop events,
DataTransfer.
Canvas API 5 getContext('2d'), drawing shapes, paths, text, images, gradients on
<canvas>.
WebGL (via Canvas) 5 getContext('webgl') — 3D graphics in the browser, intro overview.
History API 5 [Link](), popstate event — client-side routing without
page reload.
Web Workers 5 background threads with new Worker('[Link]'), postMessage — no
DOM access.
Service Workers 5 Offline-first, caching with Cache API, fetch interception, PWA
foundation.
Notifications API 5 [Link](), new Notification() — browser push
H5 = HTML5 Feature | Page 5
HTML & HTML5 Complete Syllabus Web Development Foundation
alerts.
Web Sockets 5 new WebSocket(url), onmessage, onopen, onclose — real-time
bidirectional comm.
Fullscreen API 5 [Link](), [Link](),
fullscreenchange event.
Clipboard API 5 [Link](), readText() — copy-paste
programmatically.
Page Visibility API 5 [Link], visibilitychange event — detect if tab is active.
Module 8 Accessibility (a11y) & ARIA 10 Hours
Topic Details & Key Concepts
Why Accessibility Matters Legal requirements (ADA, WCAG), reaching all users, screen reader
users, keyboard-only.
WCAG Guidelines POUR principles: Perceivable, Operable, Understandable, Robust.
Levels A, AA, AAA.
Semantic HTML for a11y Using correct elements (<button> not <div onclick>), heading
hierarchy, landmark regions.
Alt Text for Images Descriptive alt, empty alt='' for decorative images, complex image
descriptions.
Keyboard Navigation tabindex (0, -1, positive), focus management, visible focus styles,
skip links.
ARIA Roles 5 role='button', 'navigation', 'dialog', 'alert', 'tab', 'tabpanel' — when to
use ARIA.
ARIA States & Properties 5 aria-hidden, aria-expanded, aria-label, aria-labelledby, aria-
describedby, aria-live.
aria-live Regions 5 aria-live='polite'/'assertive' — announcing dynamic content to screen
readers.
Form Accessibility Label association, error messages linked with aria-describedby,
required fields.
Color & Contrast WCAG contrast ratios (4.5:1 for normal text), not relying on color
alone.
Screen Reader Testing NVDA, VoiceOver, JAWS basics — testing your pages with assistive
technology.
Module 9 Meta Tags, SEO & Head Elements 8 Hours
Topic Details & Key Concepts
Meta Tags Overview <meta name='' content=''> — description, keywords (legacy), author,
viewport.
Viewport Meta Tag 5 <meta name='viewport' content='width=device-width, initial-scale=1'>
— mobile essential.
SEO Meta Tags title, description, robots, canonical — what search engines read.
H5 = HTML5 Feature | Page 6
HTML & HTML5 Complete Syllabus Web Development Foundation
Open Graph Tags og:title, og:description, og:image, og:url — social media link
previews.
Twitter Card Tags twitter:card, twitter:title, twitter:description, twitter:image.
Favicon <link rel='icon'>, Apple touch icon, web manifest icon — all favicon
sizes.
Web App Manifest 5 <link rel='manifest'> for PWA — name, icons, theme_color, display.
Canonical URL <link rel='canonical'> — preventing duplicate content issues.
Preload & Prefetch 5 <link rel='preload'>, <link rel='prefetch'>, <link rel='preconnect'> —
performance.
Structured Data (Schema) JSON-LD in <script type='application/ld+json'> — rich results in
5 Google.
http-equiv Meta refresh, X-UA-Compatible — pragma directives via meta tags.
Module 10 Best Practices & Modern HTML Workflows 8 Hours
Topic Details & Key Concepts
HTML Validation W3C Markup Validator, Nu Html Checker, fixing validation errors, lint
tools.
File & Folder Structure Project organization, [Link], assets/, naming conventions,
relative paths.
Performance Best Practices Minimize HTML, defer/async scripts, critical CSS inline, resource
hints.
Progressive Enhancement Start with HTML, add CSS, add JS — building resilient experiences.
Responsive HTML Patterns Viewport meta, fluid images, picture element, accessible tables on
5 mobile.
HTML Email Basics Table-based layouts for email clients, inline styles, mso conditionals.
Template Literals in HTML Generating HTML strings in JS with template literals — dynamic
content.
Web Components 5 <template>, <slot>, custom elements, Shadow DOM — future of
reusable HTML.
HTML in Frameworks JSX (React), Vue templates, Angular — how HTML evolves in
modern stacks.
Browser DevTools for HTML Inspect element, live editing HTML, computed accessibility tree,
lighthouse.
H5 = HTML5 Feature | Page 7
HTML & HTML5 Complete Syllabus Web Development Foundation
HTML5 QUICK REFERENCE GUIDE
H5 marks throughout this syllabus indicate HTML5 features. Below is a consolidated reference
of all HTML5 elements and APIs introduced in this course, grouped by category.
HTML5 Semantic Elements
Element Syntax / Usage Purpose
<header> <header>...</header> Page/section header
<nav> <nav>...</nav> Navigation links
<main> <main>...</main> Primary page content
<article> <article>...</article> Self-contained content
<section> <section>...</section> Thematic grouping
<aside> <aside>...</aside> Sidebar / related content
<footer> <footer>...</footer> Page/section footer
<figure> <figure><figcaption> Media with caption
<details> <details><summary> Expandable content
<dialog> <dialog open> Modal / dialog box
<mark> <mark>text</mark> Highlighted text
<time> <time datetime=''> Date/time
<progress> <progress value max> Progress indicator
<meter> <meter low high value> Scalar measurement
HTML5 Input Types
Input Type Syntax Use Case
email <input type='email'> Email validation
url <input type='url'> URL validation
number <input type='number' min Numeric input
max step>
range <input type='range'> Slider control
date <input type='date'> Date picker
time <input type='time'> Time picker
datetime-local <input type='datetime- Date + time
local'>
month <input type='month'> Month picker
week <input type='week'> Week picker
color <input type='color'> Color picker
H5 = HTML5 Feature | Page 8
HTML & HTML5 Complete Syllabus Web Development Foundation
search <input type='search'> Search field
tel <input type='tel'> Phone number
HTML5 APIs Summary
Topic Details & Key Concepts
Canvas API 5 2D and WebGL drawing context via <canvas> — shapes, images,
animation.
Geolocation API 5 [Link] — GPS coordinates, watch position, accuracy.
Web Storage 5 localStorage (persistent) and sessionStorage (tab-scoped) key-value
stores.
History API 5 pushState, replaceState, popstate — client-side URL routing.
Drag & Drop API 5 draggable, dragstart, dragover, drop events and DataTransfer object.
Web Workers 5 Background scripts: new Worker(), postMessage, onmessage.
Service Workers 5 Proxy network requests, cache-first strategies, push notifications.
WebSockets 5 new WebSocket(url), full-duplex communication, onmessage.
Fullscreen API 5 requestFullscreen(), exitFullscreen(), fullscreenchange event.
Notifications API 5 Permission request, new Notification(), notification click handling.
Page Visibility API 5 [Link], visibilitychange — pause on hidden tab.
Clipboard API 5 [Link] read/write — modern async clipboard access.
LEGEND & STUDY GUIDE
H5 = HTML5 Feature Recommended Study Order
Highlighted orange rows are HTML5 features. Follow modules 1 through 10. Pair with the
These are supported in all modern browsers and HTML5 Quick Reference at the end after each
are the standard for modern web development. module for reinforcement.
Happy Coding! Build beautiful web pages with HTML & HTML5.
H5 = HTML5 Feature | Page 9