Part I — HTML (Fundamentals → Advanced)
Chapter 1 — Introduction to HTML
Definition:
HTML (HyperText Markup Language) is the standard markup language used to structure web
pages. It uses elements (tags) to tell the browser how to display content.
Key Points:
HyperText = text that contains links to other texts.
Markup = special tags that describe structure & meaning.
Language = has its own syntax and rule
HTML Lifecycle:
HTML file is loaded in the browser
Browser parses HTML → Creates DOM (Document Object Model).
CSS styles and JavaScript scripts are applied.
Example: Basic HTML page
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title></head><body>
<h1>Welcome to HTML</h1>
<p>This is my first web page.</p></body></html>
Explanation:
<!DOCTYPE html> → Declares HTML5.
<html> → Root element.
<head> → Metadata (title, styles, SEO tags)
<body> → Visible content.
Interview Tip:
You might be asked —
❓ What’s the difference between HTML and HTML5?
✅ HTML5 introduced semantic tags, audio/video support without plugins, new form controls, and
APIs like geolocation.
Chapter 2 — HTML Document Structure & Tags
2.1 Document Structure
An HTML page has a specific layout that browsers expect:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title></head><body>
<h1>Hello World</h1></body></html>
Explanation of Each Part:
<!DOCTYPE html>
Tells the browser this is an HTML5 document.
Helps browsers render pages in standards mode instead of quirks mode.
<html lang="en">
Root element that wraps all HTML content.
lang attribute improves accessibility & SEO.
<head>
Contains metadata about the page:
<meta charset="UTF-8"> → character encoding (supports all languages &
emojis)
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> → makes site responsive
<title> → title shown in browser tab
Stylesheets, scripts, favicons, SEO tags
<body>
Contains all visible content: text, images, links, forms, etc.
2.2 HTML Elements
Definition:
An HTML element consists of:
Opening tag: <p>
Content: Hello
Closing tag: </p>
Example:
<p>This is a paragraph.</p>
2.3 Types of Tags
Paired Tags (with closing tag)
Example: <p>Paragraph</p>
Self-closing Tags (void elements)
Example:
<img src="logo.png" alt="Logo"><br><hr>
2.4 Block vs Inline Elements:
Block Elements:
Start on a new line
Take full width
Examples: <div>, <p>, <h1>–<h6>, <section>
Inline Elements:
Do NOT start on a new line
Take only necessary width
Examples: <span>, <a>, <img>, <strong>
Example:
<p>This is a <strong>bold</strong> word in a paragraph.</p>
2.5 Global Attributes
These attributes can be used on any HTML element:
id — Unique identifier
class — CSS/JS targeting
title — Tooltip text
style — Inline CSS
hidden — Hides element
data-* — Custom data attributes
Example:
<p id="intro" class="highlight" title="Introduction">Hello</p>
Interview Tip:
❓ What is the difference between id and class?
✅ id is unique per page (used for one element), class can be reused across multiple elements.
-----------------------------------------------------
----
Chapter 3 — Text Formatting & Semantic HTML
3.1 Text Formatting Tags
HTML provides various tags to style and emphasize text (semantically or visually).
Tag Purpose Example Output
<b> Bold (no extra meaning) <b>Bold</b> Bold
Strong importance
<strong> <strong>Important</strong> Important
(semantic)
Italics (no extra
<i> <i>Italic</i> Italic
meaning)
<em> Emphasis (semantic) <em>Emphasized</em> Emphasized
<u> Underline <u>Underlined</u> <u>Underlined</u>
Tag Purpose Example Output
<mark> Highlight text <mark>Highlight</mark> <mark>Highlight</mark>
<small> Smaller text <small>Small</small> <small>Small</small>
<sup> Superscript x<sup>2</sup> x²
<sub> Subscript H<sub>2</sub>O H₂O
<del> Strikethrough (deleted) <del>Old</del> Deleted[Unknown]: Old
Inserted text
<ins> <ins>New</ins> <ins>New</ins>
(underline)
Example:
<p>This is <strong>important</strong> and <em>emphasized</em> text.</p><p>Water
formula: H<sub>2</sub>O</p><p>Area formula: a<sup>2</sup></p>
3.2 Semantic HTML
Semantic HTML means using HTML tags according to their meaning, not just appearance.
This helps with SEO, accessibility, and code readability.
Common Semantic Tags:
<header> — Intro section, logo, navigation
<nav> — Navigation links
<main> — Main page content
<section> — Thematic grouping of content
<article> — Independent content (blog post, news article)
<aside> — Side content (ads, sidebars)
<footer> — Page footer (contact info, copyright)
<figure> — Contains an image or diagram
<figcaption> — Caption for the figure
<time> — Date/time values
Example of Semantic Layout:
<header>
<h1>My Blog</h1>
<nav>
<a href="#">Home</a>
<a href="#">Articles</a>
</nav></header>
<main>
<article>
<h2>First Post</h2>
<p>This is the article content.</p>
</article></main>
<footer>
<p>© 2025 My Blog</p></footer>
Interview Tip:
❓ Why should you use semantic HTML instead of <div> for everything?
✅ Semantic HTML improves SEO rankings, screen reader accessibility, and maintainability of
code.
Chapter 4 — Links, Lists & Images
4.1 Hyperlinks (<a> tag)
The <a> tag is used to create hyperlinks.
Syntax:
<a href="URL">Link Text</a>
Attributes:
href — The destination URL
target="_blank" — Opens link in a new tab
title — Tooltip when hovering
download — Triggers file download instead of navigation
Examples:
<a href="https://example.com">Visit Example</a><a href="https://google.com"
target="_blank" title="Go to Google">Google</a><a href="file.pdf"
download>Download PDF</a>
Tip: Always provide descriptive link text instead of “Click here” for SEO and accessibility.
4.2 Lists
HTML supports three main list types:
1. Ordered List (<ol>)
Numbered items.
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li></ol>
Output:
HTML
CSS
JavaScript
2. Unordered List (<ul>)
Bulleted items.
<ul>
<li>Frontend</li>
<li>Backend</li>
<li>Database</li></ul>
Output:
Frontend
Backend
Database
3. Description List (<dl>)
Term + description.
<dl>
<dt>HTML</dt>
<dd>Markup language for web pages</dd>
<dt>CSS</dt>
<dd>Styles the web page</dd></dl>
4.3 Images (<img> tag)
The <img> tag embeds images in a web page.
Syntax:
<img src="image.jpg" alt="Description" width="300" height="200">
Attributes:
src — Path to the image
alt — Text shown if the image fails to load (important for accessibility)
width / height — Controls dimensions
loading="lazy" — Defers loading until the image is visible (improves performance)
Example:
<img src="cat.jpg" alt="A cute cat" loading="lazy">
Best Practice: Always use alt text for screen readers and SEO.
4.4 Image as a Link
<a href="https://example.com">
<img src="logo.png" alt="Website Logo"></a>
4.5 Interview Tip
❓ What’s the difference between alt and title attributes for images?
✅ alt is for accessibility and shown when the image fails to load, while title shows a tooltip on
hover.
Chapter 5 — Tables in HTML
5.1 Introduction
HTML tables are used to display tabular data (rows & columns).
They are made up of <table>, <tr>, <th>, <td>, and optional <caption>, <thead>, <tbody>,
<tfoot>.
5.2 Basic Table Structure
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Role</th>
</tr>
<tr>
<td>Swapnil</td>
<td>25</td>
<td>Developer</td>
</tr>
<tr>
<td>Priya</td>
<td>24</td>
<td>Designer</td>
</tr></table>
Explanation:
<table> → Creates the table.
<tr> (table row) → A row in the table.
<th> (table header) → Bold & centered by default.
<td> (table data) → Regular data cell.
5.3 Table with Caption
<table border="1">
<caption>Employee Details</caption>
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Raj</td>
<td>IT</td>
<td>₹50,000</td>
</tr></table>
Tip: <caption> provides a table title (good for accessibility).
5.4 Table Head, Body, and Footer
Used to group table sections for styling and structure.
<table border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>₹60,000</td>
</tr>
<tr>
<td>Phone</td>
<td>₹20,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>₹80,000</td>
</tr>
</tfoot></table>
5.5 Merging Cells
Column Span (colspan)
<td colspan="2">Merged Cell</td>
Row Span (rowspan)
<td rowspan="2">Merged Vertically</td>
5.6 Styling Tables with CSS
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}</style>
5.7 Accessibility Tips
Use <th> for headers and scope="col" or scope="row".
Use <caption> to describe table purpose.
Avoid using tables for layout (use CSS instead).
5.8 Interview Tip
❓ Why use thead, tbody, and tfoot?
✅ They help with semantic structure, accessibility, and styling separately for header, body, and
footer rows.
Chapter 6 — Forms in HTML
6.1 Introduction
HTML forms are used to collect user input and send it to a server for processing.
Forms are created with the <form> element and various input controls like text fields, checkboxes,
radio buttons, dropdowns, and more.
6.2 Basic Form Structure
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br><br>
<input type="submit" value="Login"></form>
Explanation:
<form> → Defines the form container.
action → URL to send data.
method → GET (query string) or POST (secure in body).
<label> → Describes an input.
<input> → Creates form fields.
type="submit" → Sends the form.
6.3 Common Input Types
<input type="text" placeholder="Enter text"><input type="password"
placeholder="Enter password"><input type="email" placeholder="Enter email"><input
type="number" min="1" max="10"><input type="date"><input type="file"><input
type="checkbox"> I agree<input type="radio" name="gender" value="male">
Male<input type="radio" name="gender" value="female"> Female
6.4 Textarea
For multi-line text input.
<textarea name="message" rows="4" cols="30"></textarea>
6.5 Dropdown (Select)
<select name="country">
<option value="in">India</option>
<option value="us">USA</option>
<option value="uk">UK</option></select>
6.6 Grouping Fields
<fieldset>
<legend>Personal Info</legend>
Name: <input type="text"><br>
Age: <input type="number"></fieldset>
Tip: fieldset groups related inputs; legend is the title.
6.7 Buttons
<button type="submit">Submit</button><button type="reset">Reset</button><button
type="button" onclick="alert('Clicked!')">Click Me</button>
6.8 Form Attributes
Attribute Description
action URL to submit data
method GET or POST
enctype Encoding type (e.g., multipart/form-data for file uploads)
target Where to display result (_blank, _self)
novalidate Disables HTML5 validation
6.9 HTML5 Form Validation
<input type="email" required><input type="text" pattern="[A-Za-z]{3,}"><input
type="number" min="1" max="5">
required → Cannot leave empty.
pattern → Regex validation.
min, max → Limit numbers or dates.
6.10 JavaScript Form Handling
<script>document.querySelector("form").addEventListener("submit", function(e) {
e.preventDefault();
alert("Form submitted!");
});</script>
6.11 Accessibility Best Practices
Always use <label> for inputs.
Use aria-label when no visible label.
Group related inputs with <fieldset>.
6.12 Interview Tip
❓ Difference between GET and POST?
✅ GET → Data in URL, less secure, limited length.
✅ POST → Data in body, more secure, can send files.
Chapter 7 — HTML5 Semantic Elements
7.1 Introduction
Semantic HTML means using HTML elements that clearly describe their meaning in both the
browser and developer’s eyes.
HTML5 introduced new semantic tags to improve accessibility, SEO, and code readability.
7.2 Why Semantic HTML Matters
Accessibility → Screen readers understand content better.
SEO → Search engines prioritize properly structured pages.
Maintainability → Easier for developers to read and modify.
Example:
<!-- Non-semantic --><div id="header"></div>
<!-- Semantic --><header></header>
7.3 Common HTML5 Semantic Elements
Tag Purpose
<header> Represents the top section of a page or section
<nav> Contains navigation links
<main> The main content of the page (unique per page)
<section> Groups related content
<article> Self-contained content (blog post, news article)
<aside> Side content (ads, sidebars)
<footer> Bottom section of a page or section
<figure> Used for images, diagrams
<figcaption> Caption for <figure>
<mark> Highlights text
<time> Represents a date/time
7.4 Example: Semantic Page Layout
<header>
<h1>My Blog</h1></header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a></nav>
<main>
<article>
<h2>First Post</h2>
<p>This is my first blog post.</p>
</article>
<aside>
<h3>About Me</h3>
<p>Short bio here.</p>
</aside></main>
<footer>
<p>Copyright 2025</p></footer>
7.5 <section> vs <div>
<div> → Generic container, no meaning.
<section> → Groups related content with a common heading.
✅ Example:
<section>
<h2>Services</h2>
<p>We offer web development and SEO services.</p></section>
7.6 <article> vs <section>
<article> → Self-contained, reusable in isolation.
<section> → A thematic grouping within a page
Rule of thumb: If it can be syndicated or shared standalone → <article>.
7.7 Accessibility with Semantic HTML
Use proper headings <h1>–<h6> in order.
Use <nav> for menus so assistive tech knows it’s navigation.
Use <main> only once per page.
7.8 Interview Tip
❓ Why should we use <main> instead of a <div id="main">?
✅ Because <main> is natively recognized by browsers, screen readers, and SEO crawlers without
extra hints.
Chapter 8 — HTML Multimedia (Audio, Video, and
Canvas)
8.1 Introduction
HTML5 introduced built-in support for multimedia without needing third-party plugins like Flash.
Three main features:
<audio> → Play sound/music.
<video> → Play videos.
<canvas> → Draw graphics dynamically with JavaScript.
8.2 <audio> Element
The <audio> element allows embedding sound.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.</audio>
Attributes:
controls → Displays play, pause, volume buttons.
autoplay → Starts playing automatically ( often blocked by browsers).
loop → Repeats automatically.
muted → Starts muted
Best Practice: Provide multiple formats (.mp3, .ogg) for browser compatibility.
8.3 <video> Element
The <video> element allows embedding video.
<video controls width="500">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.</video>
Attributes:
controls → Play, pause, seek.
autoplay, loop, muted → Similar to audio.
poster="image.jpg" → Displayed before video starts.
8.4 Adding Subtitles with <track>
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en"
label="English"></video>
kind → "subtitles", "captions", "descriptions".
Subtitles use WebVTT format.
8.5 <canvas> Element
<canvas> is a drawing surface controlled by JavaScript for shapes, images, and animations.
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
black;"></canvas>
<script>let canvas = document.getElementById("myCanvas");let ctx =
canvas.getContext("2d");
// Draw rectangle
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);</script>
Canvas Methods:
Shapes
fillRect(x, y, w, h) → Filled rectangle.
strokeRect(x, y, w, h) → Outline rectangle.
Paths
beginPath(), moveTo(), lineTo(), stroke()
Text
fillText(text, x, y), strokeText(text, x, y)
Images:
drawImage(image, x, y)
8.6 Difference Between <canvas> and <svg>
Feature Canvas SVG
Type Pixel-based Vector-based
Scalability Loses quality when scaled Scales perfectly
Use case Games, dynamic effects Icons, charts, maps
8.7 Interview Tip
❓ When should you use <canvas> instead of an image?
✅ When the content needs to be drawn dynamically or updated frequently (e.g., games, live charts).
Chapter 9 — HTML Forms (Advanced)
9.1 Introduction
HTML forms are the primary way to collect user input.
A form sends data to a server (via GET or POST) for processing.
9.2 Form Structure
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="username" required>
<button type="submit">Submit</button></form>
action → Where the data goes.
method → HTTP method (GET, POST).
name → Identifier for form data
9.3 Input Types
<input type="text"><input type="password"><input type="email"><input
type="number" min="1" max="10"><input type="date"><input type="file"><input
type="color">
9.4 Attributes
required → Must be filled before submission.
placeholder → Hint text.
readonly → Cannot be modified.
disabled → Disabled field.
pattern="[A-Za-z]{3}" → Regex validation.
9.5 <textarea>
<textarea rows="5" cols="30" placeholder="Enter your message"></textarea>
9.6 <select> Dropdown
<select name="country">
<option value="IN">India</option>
<option value="US">USA</option></select>
multiple → Allows multiple selection.
9.7 <fieldset> and <legend>
<fieldset>
<legend>Personal Info</legend>
<input type="text" placeholder="Name"></fieldset>
9.8 Form Validation
HTML5 Validation: required, pattern, type.
JavaScript Validation: Custom checks before submission.
9.9 File Upload
<form enctype="multipart/form-data" method="POST">
<input type="file" name="upload">
<button>Upload</button></form>
9.10 Interview Tip
❓ Difference between GET and POST in forms?
✅ GET → Data in URL, limited size, caching possible.
✅ POST → Data in request body, secure for sensitive data.
Chapter 10 — HTML APIs
10.1 Introduction
HTML5 introduced built-in APIs for common tasks — no extra libraries needed.
10.2 Geolocation API
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position.coords.latitude, position.coords.longitude);
},
(error) => {
console.error(error);
}
);
Used to get user location.
Requires user permission.
10.3 Web Storage API
Stores data in the browser.
Local Storage (Persistent)
localStorage.setItem("name", "Swapnil");console.log(localStorage.getItem("name"));
Session Storage (Temporary)
sessionStorage.setItem("token", "12345");
10.4 Web Workers
Run scripts in background threads.
let worker = new Worker("worker.js");
worker.postMessage("Hello")
Prevents UI blocking.
10.5 Drag and Drop API
<div id="drag" draggable="true">Drag Me</div><div id="drop">Drop Here</div>
drag.ondragstart = (e) => e.dataTransfer.setData("text", "Dragged!");
drop.ondrop = (e) => alert(e.dataTransfer.getData("text"));
10.6 Canvas API
(Already explained in Chapter 8 — but here it’s an API for drawing graphics with JS.)
10.7 Interview Tip
❓ Why use localStorage over cookies?
✅ localStorage → Larger storage (5MB+), no automatic HTTP sending.
✅ Cookies → Smaller (4KB), sent with each request.
