🌐 Learn HTML — Complete HTML5 & Web Fundamentals
Welcome to the HTML Learning Path! HTML (HyperText Markup Language) is the standard markup language used to structure web pages and display content on the internet.
🟢 Beginner-friendly: No prior coding experience required. Follow the lessons sequentially, type the code examples in VS Code, and preview them in your browser.
🌍 Multilingual Summary
English
HTML provides the structure and semantic meaning of a web page (headings, text, links, images, forms, tables, and modern media).
Hindi
HTML webpage ka structure aur foundation tayar karta hai, jaise headings, paragraphs, links, images, forms, aur tables display karna.
Marathi
HTML webpage cha paya ani structure tayar karte, jase ki headings, text, links, images, forms, ani tables display karne.
📖 What You Will Learn
- Setting up VS Code and browser Developer Tools
- HTML document boilerplate (
<!DOCTYPE html>,<html>,<head>,<body>) - Headings hierarchy (
<h1>to<h6>), paragraphs, and semantic text formatting - Navigation links (
<a>), images (<img>,<figure>,<picture>), lists (<ul>,<ol>,<dl>), and tables (<table>) - Interactive forms (
<form>,<label>,<input>,<textarea>,<select>,<button>,<fieldset>,<datalist>) - Input types (
text,email,password,number,date,tel,checkbox,radio) and client-side validation - Structuring web layouts with semantic elements (
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>) - Metadata, favicon, viewport settings, SEO basics, and Open Graph social cards
- Incorporating media (
<audio>,<video>,<iframe>), HTML entities, colors, and comments - Modern interactive elements (
<details>,<summary>,<dialog>,<progress>,<meter>,<template>) - Global attributes (
id,class,title,lang,dir,hidden,tabindex,contenteditable) and customdata-*attributes - Web accessibility fundamentals (a11y), keyboard focus, ARIA guidance, and HTML validation
- Building real-world HTML mini projects (portfolio, recipe card, registration form)
📚 Complete Lesson Index
| # | Topic | Level | Link |
|---|---|---|---|
| 01 | Set Up VS Code for HTML | 🟢 Beginner | Open lesson |
| 02 | Introduction to HTML | 🟢 Beginner | Open lesson |
| 03 | HTML Document Structure & Metadata | 🟢 Beginner | Open lesson |
| 04 | Headings (<h1> to <h6>) |
🟢 Beginner | Open lesson |
| 05 | Paragraphs (<p>) |
🟢 Beginner | Open lesson |
| 06 | Text Formatting (<strong>, <em>, <b>, <i>, etc.) |
🟢 Beginner | Open lesson |
| 07 | Links & Anchors (<a>, href, relative & absolute) |
🟢 Beginner | Open lesson |
| 08 | Images, <figure>, & <picture> |
🟢 Beginner | Open lesson |
| 09 | Lists (<ul>, <ol>, <dl>) |
🟢 Beginner | Open lesson |
| 10 | Tables (<table>, <thead>, <tbody>, <caption>) |
🟢 Beginner | Open lesson |
| 11 | Forms & Labels (<form>, <label>, action, method) |
🟢 Beginner | Open lesson |
| 12 | Input Types (text, email, password, date, etc.) |
🟢 Beginner | Open lesson |
| 13 | Buttons (<button type="submit">, <button type="button">) |
🟢 Beginner | Open lesson |
| 14 | Generic Containers (<div> and <span>) |
🟡 Intermediate | Open lesson |
| 15 | HTML Attributes (id, class, title, global attributes) |
🟢 Beginner | Open lesson |
| 16 | HTML Comments (<!-- -->) |
🟢 Beginner | Open lesson |
| 17 | HTML & CSS Colors (HEX, RGB, HSL, Contrast) | 🟢 Beginner | Open lesson |
| 18 | HTML Entities (<, >, &, ©) |
🟢 Beginner | Open lesson |
| 19 | Audio (<audio>, <source>, transcripts) |
🟡 Intermediate | Open lesson |
| 20 | Video (<video>, <source>, <track>) |
🟡 Intermediate | Open lesson |
| 21 | Inline Frames (<iframe>, title, security) |
🟡 Intermediate | Open lesson |
| 22 | Semantic HTML (<header>, <nav>, <main>, <article>, etc.) |
🟡 Intermediate | Open lesson |
| 23 | Modern HTML5 Features & Built-in Validation | 🟡 Intermediate | Open lesson |
| 24 | Web Accessibility (a11y) & HTML Validation | 🟡 Intermediate | Open lesson |
| 25 | HTML Mini Projects | 🟡 Intermediate | Open lesson |
| 26 | History & Standards of HTML | 🟡 Intermediate | Open lesson |
| 27 | Meta Tags & Head Metadata | 🟡 Intermediate | Open lesson |
| 28 | Advanced Form Controls & HTML Validation | 🟡 Intermediate | Open lesson |
| 29 | Responsive Images & Art Direction (<picture>, srcset, sizes, loading="lazy") |
🟡 Intermediate | Open lesson |
| 30 | Interactive HTML5 Elements (<details>, <summary>, <dialog>, <progress>, <meter>, <template>) |
🟡 Intermediate | Open lesson |
| 31 | Global Attributes & Custom Data Attributes (data-*, tabindex, contenteditable) |
🟡 Intermediate | Open lesson |
| 32 | HTML SEO & Open Graph Metadata | 🟡 Intermediate | Open lesson |
🎯 Recommended Learning Path
01–03 Setup & Structure → 04–10 Core Elements & Content → 11–13 Forms & User Input → 14–18 Attributes & Tools → 19–24 Semantic HTML, Media & Accessibility → 25–26 Mini Projects & History → 27–32 Metadata, Validation, Responsive Media, Interactive Tags & SEO
✅ Progress Checklist
- I set up VS Code and created my first
index.htmlfile. - I understand the HTML boilerplate structure (
<!DOCTYPE html>,<html>,<head>,<body>). - I can structure content with logical headings (
<h1>–<h6>), paragraphs, formatted text, links, and images. - I can create bulleted, numbered, and description lists, as well as accessible tables.
- I can build labelled, validated HTML forms with appropriate input types, dropdowns, and buttons.
- I understand when to use semantic tags (
<header>,<main>,<article>,<nav>) over generic<div>containers. - I know how to embed audio, video, and iframes accessibly with captions and transcripts.
- I can configure meta tags, favicons, viewport settings, and Open Graph metadata for social sharing.
- I know how to build responsive images with
<picture>andsrcset. - I understand interactive HTML5 tags (
<details>,<dialog>,<progress>,<meter>) and customdata-*attributes. - I built complete HTML mini projects and validated my HTML code.
🧭 Navigation
| ← Repository Home | Start with Lesson 01 → |