View post (The Practical Way – Concepts, APIs, and Projects)
View thread
Training Head
HTML (HyperText Markup Language) is the foundational markup language used to create and structure content on the web. It defines the structure of web pages using a system of tags and elements, which browsers interpret to display text, images, links, forms, and other multimedia. HTML is not a programming language but a declarative language that tells the browser how to render content. It works in tandem with CSS (for styling) and JavaScript (for interactivity) to build modern websites.
1. History of HTML
Origins: Developed by Tim Berners-Lee in 1991 at CERN as a way to share documents over the internet. The first version was HTML 1.0, which was simple and focused on hypertext links.
Evolution:
HTML 2.0 (1995): Standardized by IETF, added forms and images.
HTML 3.2 (1997): Introduced tables, applets, and text flow around images.
HTML 4.01 (1999): Emphasized separation of structure (HTML) from presentation (CSS), added framesets and better accessibility.
XHTML (2000): A stricter, XML-based version for better parsing and compatibility.
HTML5 (2014): Current standard by W3C and WHATWG. Added semantic elements, multimedia support (audio/video), canvas for graphics, offline storage, and APIs for geolocation, drag-and-drop, etc.
HTML5.1 (2016) and HTML5.2 (2017): Minor updates with new elements like <main>, <picture>.
Living Standard: HTML is now a "living standard" maintained by WHATWG, meaning it's continuously updated without version numbers (e.g., additions like lazy loading with loading="lazy" in 2020).
2. Basic Structure of an HTML Document
Every HTML page follows this skeleton:
<!DOCTYPE html> <!-- Declares the document type (HTML5) -->
<html lang="en"> <!-- Root element, specifies language -->
<head>
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design -->
<title>Page Title</title> <!-- Browser tab title -->
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS -->
</head>
<body>
<!-- Main content goes here -->
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<script src="script.js"></script> <!-- Link to JavaScript -->
</body>
</html>
DOCTYPE: Tells the browser to render in standards mode.
<html>: Wraps the entire document.
<head>: Contains metadata, not visible on the page.
<body>: Visible content area.
3. HTML Elements and Tags
Tags: HTML uses opening <tag> and closing </tag> tags. Some are self-closing, e.g., <img />.
Elements: A tag pair with content, e.g., <p>Text</p>.
Types of Elements:
Block-level: Take full width, start on new line (e.g., <div>, <h1>-<h6>, <p>, <ul>, <ol>, <table>).
Inline: Flow within text (e.g., <span>, <a>, <img>, <strong>, <em>).
Void/Self-closing: No content (e.g., <br>, <hr>, <input>, <meta>).
Common Categories:
Headings: <h1> to <h6> for titles and subtitles.
Text Formatting: <p> for paragraphs, <strong> for bold, <em> for italics, <u> for underline, <del> for strikethrough.
Lists:
Unordered: <ul><li>Item</li></ul>
Ordered: <ol><li>Item</li></ol>
Definition: <dl><dt>Term</dt><dd>Definition</dd></dl>
Links: <a href="url">Link Text</a> (absolute/relative URLs, anchors like #section).
Images: <img src="image.jpg" alt="Description" width="100" height="100"> (alt for accessibility).
Tables:
<table>
<thead><tr><th>Header1</th><th>Header2</th></tr></thead>
<tbody><tr><td>Data1</td><td>Data2</td></tr></tbody>
</table>
Forms:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>
*Input types: text, password, email, number, checkbox, radio, file, etc.
Multimedia:
<audio src="file.mp3" controls></audio>
<video src="file.mp4" controls width="320" height="240"></video>
<iframe src="url" width="600" height="400"></iframe> for embedding external content.
Semantic Elements (HTML5): Improve SEO and accessibility.
<header>: Top of page/section.
<nav>: Navigation links.
<main>: Primary content.
<article>: Self-contained content.
<section>: Thematic grouping.
<aside>: Sidebar content.
<footer>: Bottom of page/section.
<figure> and <figcaption>: For images with captions.
4. Attributes
Added to opening tags, e.g., <tag attribute="value">.
Global: id (unique identifier), class (for CSS/JS), style (inline CSS), title (tooltip), data-* (custom data).
Specific: href for <a>, src for <img>, alt for images, type for inputs.
Boolean: e.g., disabled, required, checked (present means true).
5. HTML5 Features
Canvas: <canvas id="myCanvas" width="200" height="100"></canvas> for drawing graphics via JS.
SVG: Scalable Vector Graphics for shapes and icons.
Storage: LocalStorage and SessionStorage for client-side data.
APIs: Geolocation, Web Workers, Drag-and-Drop, WebSockets.
Accessibility (ARIA): Attributes like role="button", aria-label="Description".
Responsive Design: Use <meta name="viewport"> and media queries in CSS.
SEO Best Practices: Use semantic tags, alt text, proper headings, meta tags like <meta name="description" content="Page summary">.
6. Best Practices
Validate code using W3C validator.
Use lowercase tags.
Close all tags properly.
Indent for readability.
Separate concerns: HTML for structure, CSS for style, JS for behavior.
Ensure accessibility: Use alt text, semantic elements, keyboard navigation.
Security: Sanitize user inputs to prevent XSS; use HTTPS.
7. Tools and Ecosystems
Editors: VS Code, Sublime, Notepad++.
Frameworks: Bootstrap for responsive layouts, Tailwind CSS for utility classes.
Integration: With CSS (selectors target HTML elements) and JS (DOM manipulation).
Interview Questions on HTML
Here are common HTML interview questions, categorized by level. I've included answers for reference.
Beginner Level
What does HTML stand for? HyperText Markup Language.
What is the difference between HTML and XHTML? XHTML is stricter (XML-based), requires lowercase tags, closing all elements, and proper nesting. HTML is more forgiving.
What is the purpose of the DOCTYPE declaration? It specifies the HTML version and ensures the browser renders in standards mode, avoiding quirks mode.
Explain the difference between block-level and inline elements. Block-level elements start on a new line and take full width (e.g.,
). Inline elements flow within text without breaking lines (e.g., ).
What are void elements in HTML? Elements that don't have closing tags or content, like , [image], .
Intermediate Level
What are semantic elements in HTML5? Give examples. They provide meaning to content for better SEO and accessibility, e.g., , , , , .
How do you create a hyperlink in HTML? Using Link Text. Target="_blank" opens in a new tab.
What is the difference between
and ?
is block-level for grouping content; is inline for styling small parts of text.
Explain HTML forms and common input types. Forms collect user data with <form>. Input types: text, password, checkbox, radio, submit, etc.
What is the role of the alt attribute in [image]? Provides alternative text for screen readers and when images fail to load, improving accessibility.
Advanced Level
What are data attributes in HTML? Custom attributes starting with data-, e.g.,
, used to store extra info accessible via JS.
How does HTML5 canvas work? It's a drawable region for graphics using JS (e.g., getContext('2d') for 2D drawing).
What is the difference between localStorage and sessionStorage? localStorage persists across sessions; sessionStorage clears when the tab closes.
Explain ARIA roles and why they are used. Accessible Rich Internet Applications attributes enhance accessibility, e.g., role="navigation" for screen readers.
How can you make an HTML page responsive? Use <meta name="viewport">, media queries in CSS, and flexible units like % or rem.
Case Studies
Building a Responsive E-commerce Website (Amazon-like): A team used HTML5 semantic elements (, , ) for structure, forms for search/login, and <picture> for responsive images. Challenges: Ensuring mobile compatibility—solved with viewport meta and CSS flexbox. Outcome: Improved load times and SEO, leading to 20% higher user engagement.
Accessibility Overhaul for a Government Portal: An outdated site was migrated to HTML5 with ARIA attributes, alt text, and semantic tags. Case involved auditing with tools like WAVE. Result: Compliance with WCAG 2.1, making it usable for visually impaired users via screen readers, reducing legal risks.
Interactive Dashboard for Data Visualization: Used <canvas> and SVG in HTML integrated with JS libraries like Chart.js. Challenge: Cross-browser compatibility—addressed by feature detection. Outcome: Real-time updates without page reloads, used in analytics tools like Google Analytics embeds.
Migrating from HTML4 to HTML5 for a Blog Platform (WordPress-like): Replaced deprecated elements (e.g., <font>, <center>) with CSS. Added video embeds and offline caching. Benefits: Better mobile support and faster rendering, increasing page views by 15%.
Assignments
Beginner: Create a Personal Portfolio Page
Build an HTML page with your name as
, a paragraph bio, an image of yourself, and links to social media.
Add an unordered list of skills.
Validate the code using validator.w3.org.
Intermediate: Build a Simple Form
Create a registration form with fields for name, email, password, gender (radio buttons), and hobbies (checkboxes).
Include a submit button and use labels for accessibility.
Style it basically with inline CSS (e.g., colors and borders).
Advanced: Interactive To-Do List
Use HTML for structure: input for new tasks,
for list.
Add buttons for add/delete (no JS required yet—just placeholders).
Incorporate semantic elements and data attributes for task IDs.
Bonus: Embed a video tutorial on productivity.
Project: Responsive Landing Page
Design a one-page site for a fictional product using sections for hero, features, testimonials, and footer.
Include a table for pricing, images with alt text, and a contact form.
Ensure it's mobile-friendly (test on different screen sizes).
Submit as a .html file with comments explaining your choices.
HTML5 Web APIs Examples
HTML5 introduced a powerful set of Web APIs (Application Programming Interfaces) that extend browser capabilities, allowing developers to build rich, interactive web applications without plugins. These APIs are accessed via JavaScript and include features for graphics, multimedia, storage, device access, and more. Note that "HTML5 APIs" often refers to the suite of modern browser APIs standardized around the HTML5 era, many of which are now part of the evolving HTML Living Standard.
Here are some of the most common and useful HTML5-era Web APIs, with brief descriptions and practical code examples.
1. Canvas API
Used for drawing 2D graphics and animations directly on the <canvas> element.
Example: Drawing a simple rectangle and circle
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Fill a rectangle
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, 20, 150, 100);
// Draw a circle
ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI);
ctx.strokeStyle = '#00FF00';
ctx.stroke();
</script>
</body>
</html>
This creates a red rectangle and a green outlined circle.
2. Geolocation API
Retrieves the user's geographical position (latitude/longitude) with permission.
Example: Get and display current location
<p id="location"></p>
<button onclick="getLocation()">Get My Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("location").innerHTML = "Geolocation not supported.";
}
}
function showPosition(position) {
document.getElementById("location").innerHTML =
"Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
document.getElementById("location").innerHTML = "Error: " + error.message;
}
</script>
Prompts for permission and displays coordinates.
3. Web Storage API (localStorage & sessionStorage)
Stores key-value data client-side. localStorage persists across sessions; sessionStorage clears on tab close.
Example: Save and retrieve a username
<input type="text" id="name" placeholder="Enter name">
<button onclick="saveName()">Save</button>
<button onclick="loadName()">Load</button>
<p id="output"></p>
<script>
function saveName() {
const name = document.getElementById('name').value;
localStorage.setItem('username', name);
}
function loadName() {
const saved = localStorage.getItem('username');
document.getElementById('output').innerHTML = saved ? "Hello, " + saved : "No name saved.";
}
</script>
Data survives page reloads (for localStorage).
4. Drag and Drop API
Enables native drag-and-drop functionality.
Example: Simple draggable div into a drop zone
<div id="draggable" draggable="true" style="width:100px; height:100px; background:red;">Drag me</div>
<div id="dropzone" style="width:200px; height:200px; border:2px dashed #000; margin-top:20px;">Drop here</div>
<script>
const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'Dragged item');
});
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.innerHTML = 'Item dropped!';
dropzone.appendChild(draggable);
});
</script>
5. Web Workers API
Runs scripts in background threads to avoid blocking the UI.
Example: Worker for heavy computation (factorial)
Create worker.js:
self.onmessage = function(e) {
const num = e.data;
let result = 1;
for (let i = 1; i <= num; i++) result *= i;
self.postMessage(result);
};
Main page:
<p id="result"></p>
<script>
const worker = new Worker('worker.js');
worker.postMessage(10); // Calculate 10!
worker.onmessage = function(e) {
document.getElementById('result').innerHTML = 'Factorial: ' + e.data;
};
</script>
Performs calculation without freezing the page.
6. History API
Manipulates browser history for single-page apps (e.g., update URL without reload).
Example: Push a new state
<button onclick="changeState()">Change URL</button>
<script>
function changeState() {
history.pushState({page: 2}, "Page 2", "/page2");
document.title = "Page 2";
}
window.onpopstate = function(event) {
alert("Back/forward: " + location.pathname);
};
</script>
Updates URL and handles back button.
7. Fetch API
Modern replacement for XMLHttpRequest to make network requests.
Example: Fetch JSON data
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Simpler and promise-based.
Other Notable APIs
Media Elements API → Control <audio> and <video> (play(), pause(), volume).
Fullscreen API → element.requestFullscreen() for immersive views.
Vibration API (mobile) → navigator.vibrate(200); for haptic feedback.
Battery Status API (limited support) → Access device battery level.
These APIs form the backbone of modern web apps. For full references, check MDN Web Docs (developer.mozilla.org/en-US/docs/Web/API). Test in browsers and handle feature detection (e.g., if ('geolocation' in navigator)). Many require user permissions or HTTPS in production
1. History of HTML
Origins: Developed by Tim Berners-Lee in 1991 at CERN as a way to share documents over the internet. The first version was HTML 1.0, which was simple and focused on hypertext links.
Evolution:
HTML 2.0 (1995): Standardized by IETF, added forms and images.
HTML 3.2 (1997): Introduced tables, applets, and text flow around images.
HTML 4.01 (1999): Emphasized separation of structure (HTML) from presentation (CSS), added framesets and better accessibility.
XHTML (2000): A stricter, XML-based version for better parsing and compatibility.
HTML5 (2014): Current standard by W3C and WHATWG. Added semantic elements, multimedia support (audio/video), canvas for graphics, offline storage, and APIs for geolocation, drag-and-drop, etc.
HTML5.1 (2016) and HTML5.2 (2017): Minor updates with new elements like <main>, <picture>.
Living Standard: HTML is now a "living standard" maintained by WHATWG, meaning it's continuously updated without version numbers (e.g., additions like lazy loading with loading="lazy" in 2020).
2. Basic Structure of an HTML Document
Every HTML page follows this skeleton:
<!DOCTYPE html> <!-- Declares the document type (HTML5) -->
<html lang="en"> <!-- Root element, specifies language -->
<head>
<meta charset="UTF-8"> <!-- Character encoding -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design -->
<title>Page Title</title> <!-- Browser tab title -->
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS -->
</head>
<body>
<!-- Main content goes here -->
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<script src="script.js"></script> <!-- Link to JavaScript -->
</body>
</html>
DOCTYPE: Tells the browser to render in standards mode.
<html>: Wraps the entire document.
<head>: Contains metadata, not visible on the page.
<body>: Visible content area.
3. HTML Elements and Tags
Tags: HTML uses opening <tag> and closing </tag> tags. Some are self-closing, e.g., <img />.
Elements: A tag pair with content, e.g., <p>Text</p>.
Types of Elements:
Block-level: Take full width, start on new line (e.g., <div>, <h1>-<h6>, <p>, <ul>, <ol>, <table>).
Inline: Flow within text (e.g., <span>, <a>, <img>, <strong>, <em>).
Void/Self-closing: No content (e.g., <br>, <hr>, <input>, <meta>).
Common Categories:
Headings: <h1> to <h6> for titles and subtitles.
Text Formatting: <p> for paragraphs, <strong> for bold, <em> for italics, <u> for underline, <del> for strikethrough.
Lists:
Unordered: <ul><li>Item</li></ul>
Ordered: <ol><li>Item</li></ol>
Definition: <dl><dt>Term</dt><dd>Definition</dd></dl>
Links: <a href="url">Link Text</a> (absolute/relative URLs, anchors like #section).
Images: <img src="image.jpg" alt="Description" width="100" height="100"> (alt for accessibility).
Tables:
<table>
<thead><tr><th>Header1</th><th>Header2</th></tr></thead>
<tbody><tr><td>Data1</td><td>Data2</td></tr></tbody>
</table>
Forms:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="submit" value="Submit">
</form>
*Input types: text, password, email, number, checkbox, radio, file, etc.
Multimedia:
<audio src="file.mp3" controls></audio>
<video src="file.mp4" controls width="320" height="240"></video>
<iframe src="url" width="600" height="400"></iframe> for embedding external content.
Semantic Elements (HTML5): Improve SEO and accessibility.
<header>: Top of page/section.
<nav>: Navigation links.
<main>: Primary content.
<article>: Self-contained content.
<section>: Thematic grouping.
<aside>: Sidebar content.
<footer>: Bottom of page/section.
<figure> and <figcaption>: For images with captions.
4. Attributes
Added to opening tags, e.g., <tag attribute="value">.
Global: id (unique identifier), class (for CSS/JS), style (inline CSS), title (tooltip), data-* (custom data).
Specific: href for <a>, src for <img>, alt for images, type for inputs.
Boolean: e.g., disabled, required, checked (present means true).
5. HTML5 Features
Canvas: <canvas id="myCanvas" width="200" height="100"></canvas> for drawing graphics via JS.
SVG: Scalable Vector Graphics for shapes and icons.
Storage: LocalStorage and SessionStorage for client-side data.
APIs: Geolocation, Web Workers, Drag-and-Drop, WebSockets.
Accessibility (ARIA): Attributes like role="button", aria-label="Description".
Responsive Design: Use <meta name="viewport"> and media queries in CSS.
SEO Best Practices: Use semantic tags, alt text, proper headings, meta tags like <meta name="description" content="Page summary">.
6. Best Practices
Validate code using W3C validator.
Use lowercase tags.
Close all tags properly.
Indent for readability.
Separate concerns: HTML for structure, CSS for style, JS for behavior.
Ensure accessibility: Use alt text, semantic elements, keyboard navigation.
Security: Sanitize user inputs to prevent XSS; use HTTPS.
7. Tools and Ecosystems
Editors: VS Code, Sublime, Notepad++.
Frameworks: Bootstrap for responsive layouts, Tailwind CSS for utility classes.
Integration: With CSS (selectors target HTML elements) and JS (DOM manipulation).
Interview Questions on HTML
Here are common HTML interview questions, categorized by level. I've included answers for reference.
Beginner Level
What does HTML stand for? HyperText Markup Language.
What is the difference between HTML and XHTML? XHTML is stricter (XML-based), requires lowercase tags, closing all elements, and proper nesting. HTML is more forgiving.
What is the purpose of the DOCTYPE declaration? It specifies the HTML version and ensures the browser renders in standards mode, avoiding quirks mode.
Explain the difference between block-level and inline elements. Block-level elements start on a new line and take full width (e.g.,
). Inline elements flow within text without breaking lines (e.g., ).
What are void elements in HTML? Elements that don't have closing tags or content, like , [image], .
Intermediate Level
What are semantic elements in HTML5? Give examples. They provide meaning to content for better SEO and accessibility, e.g., , , , , .
How do you create a hyperlink in HTML? Using Link Text. Target="_blank" opens in a new tab.
What is the difference between
and ?
is block-level for grouping content; is inline for styling small parts of text.
Explain HTML forms and common input types. Forms collect user data with <form>. Input types: text, password, checkbox, radio, submit, etc.
What is the role of the alt attribute in [image]? Provides alternative text for screen readers and when images fail to load, improving accessibility.
Advanced Level
What are data attributes in HTML? Custom attributes starting with data-, e.g.,
, used to store extra info accessible via JS.
How does HTML5 canvas work? It's a drawable region for graphics using JS (e.g., getContext('2d') for 2D drawing).
What is the difference between localStorage and sessionStorage? localStorage persists across sessions; sessionStorage clears when the tab closes.
Explain ARIA roles and why they are used. Accessible Rich Internet Applications attributes enhance accessibility, e.g., role="navigation" for screen readers.
How can you make an HTML page responsive? Use <meta name="viewport">, media queries in CSS, and flexible units like % or rem.
Case Studies
Building a Responsive E-commerce Website (Amazon-like): A team used HTML5 semantic elements (, , ) for structure, forms for search/login, and <picture> for responsive images. Challenges: Ensuring mobile compatibility—solved with viewport meta and CSS flexbox. Outcome: Improved load times and SEO, leading to 20% higher user engagement.
Accessibility Overhaul for a Government Portal: An outdated site was migrated to HTML5 with ARIA attributes, alt text, and semantic tags. Case involved auditing with tools like WAVE. Result: Compliance with WCAG 2.1, making it usable for visually impaired users via screen readers, reducing legal risks.
Interactive Dashboard for Data Visualization: Used <canvas> and SVG in HTML integrated with JS libraries like Chart.js. Challenge: Cross-browser compatibility—addressed by feature detection. Outcome: Real-time updates without page reloads, used in analytics tools like Google Analytics embeds.
Migrating from HTML4 to HTML5 for a Blog Platform (WordPress-like): Replaced deprecated elements (e.g., <font>, <center>) with CSS. Added video embeds and offline caching. Benefits: Better mobile support and faster rendering, increasing page views by 15%.
Assignments
Beginner: Create a Personal Portfolio Page
Build an HTML page with your name as
, a paragraph bio, an image of yourself, and links to social media.
Add an unordered list of skills.
Validate the code using validator.w3.org.
Intermediate: Build a Simple Form
Create a registration form with fields for name, email, password, gender (radio buttons), and hobbies (checkboxes).
Include a submit button and use labels for accessibility.
Style it basically with inline CSS (e.g., colors and borders).
Advanced: Interactive To-Do List
Use HTML for structure: input for new tasks,
for list.
Add buttons for add/delete (no JS required yet—just placeholders).
Incorporate semantic elements and data attributes for task IDs.
Bonus: Embed a video tutorial on productivity.
Project: Responsive Landing Page
Design a one-page site for a fictional product using sections for hero, features, testimonials, and footer.
Include a table for pricing, images with alt text, and a contact form.
Ensure it's mobile-friendly (test on different screen sizes).
Submit as a .html file with comments explaining your choices.
HTML5 Web APIs Examples
HTML5 introduced a powerful set of Web APIs (Application Programming Interfaces) that extend browser capabilities, allowing developers to build rich, interactive web applications without plugins. These APIs are accessed via JavaScript and include features for graphics, multimedia, storage, device access, and more. Note that "HTML5 APIs" often refers to the suite of modern browser APIs standardized around the HTML5 era, many of which are now part of the evolving HTML Living Standard.
Here are some of the most common and useful HTML5-era Web APIs, with brief descriptions and practical code examples.
1. Canvas API
Used for drawing 2D graphics and animations directly on the <canvas> element.
Example: Drawing a simple rectangle and circle
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Fill a rectangle
ctx.fillStyle = '#FF0000';
ctx.fillRect(20, 20, 150, 100);
// Draw a circle
ctx.beginPath();
ctx.arc(200, 100, 50, 0, 2 * Math.PI);
ctx.strokeStyle = '#00FF00';
ctx.stroke();
</script>
</body>
</html>
This creates a red rectangle and a green outlined circle.
2. Geolocation API
Retrieves the user's geographical position (latitude/longitude) with permission.
Example: Get and display current location
<p id="location"></p>
<button onclick="getLocation()">Get My Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
document.getElementById("location").innerHTML = "Geolocation not supported.";
}
}
function showPosition(position) {
document.getElementById("location").innerHTML =
"Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
document.getElementById("location").innerHTML = "Error: " + error.message;
}
</script>
Prompts for permission and displays coordinates.
3. Web Storage API (localStorage & sessionStorage)
Stores key-value data client-side. localStorage persists across sessions; sessionStorage clears on tab close.
Example: Save and retrieve a username
<input type="text" id="name" placeholder="Enter name">
<button onclick="saveName()">Save</button>
<button onclick="loadName()">Load</button>
<p id="output"></p>
<script>
function saveName() {
const name = document.getElementById('name').value;
localStorage.setItem('username', name);
}
function loadName() {
const saved = localStorage.getItem('username');
document.getElementById('output').innerHTML = saved ? "Hello, " + saved : "No name saved.";
}
</script>
Data survives page reloads (for localStorage).
4. Drag and Drop API
Enables native drag-and-drop functionality.
Example: Simple draggable div into a drop zone
<div id="draggable" draggable="true" style="width:100px; height:100px; background:red;">Drag me</div>
<div id="dropzone" style="width:200px; height:200px; border:2px dashed #000; margin-top:20px;">Drop here</div>
<script>
const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', 'Dragged item');
});
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.innerHTML = 'Item dropped!';
dropzone.appendChild(draggable);
});
</script>
5. Web Workers API
Runs scripts in background threads to avoid blocking the UI.
Example: Worker for heavy computation (factorial)
Create worker.js:
self.onmessage = function(e) {
const num = e.data;
let result = 1;
for (let i = 1; i <= num; i++) result *= i;
self.postMessage(result);
};
Main page:
<p id="result"></p>
<script>
const worker = new Worker('worker.js');
worker.postMessage(10); // Calculate 10!
worker.onmessage = function(e) {
document.getElementById('result').innerHTML = 'Factorial: ' + e.data;
};
</script>
Performs calculation without freezing the page.
6. History API
Manipulates browser history for single-page apps (e.g., update URL without reload).
Example: Push a new state
<button onclick="changeState()">Change URL</button>
<script>
function changeState() {
history.pushState({page: 2}, "Page 2", "/page2");
document.title = "Page 2";
}
window.onpopstate = function(event) {
alert("Back/forward: " + location.pathname);
};
</script>
Updates URL and handles back button.
7. Fetch API
Modern replacement for XMLHttpRequest to make network requests.
Example: Fetch JSON data
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
Simpler and promise-based.
Other Notable APIs
Media Elements API → Control <audio> and <video> (play(), pause(), volume).
Fullscreen API → element.requestFullscreen() for immersive views.
Vibration API (mobile) → navigator.vibrate(200); for haptic feedback.
Battery Status API (limited support) → Access device battery level.
These APIs form the backbone of modern web apps. For full references, check MDN Web Docs (developer.mozilla.org/en-US/docs/Web/API). Test in browsers and handle feature detection (e.g., if ('geolocation' in navigator)). Many require user permissions or HTTPS in production