Mockpreps
🧑💼
🪴
Login now and master your exams with Mockpreps’ mock tests!
Top Interview Questions
HTML, which stands for HyperText Markup Language, is the standard markup language used to create and design webpages. It is the backbone of the World Wide Web, providing the basic structure and content of websites. Every website, from simple personal blogs to complex web applications, relies on HTML as its foundation. While HTML alone cannot create dynamic or interactive websites, it works together with CSS (Cascading Style Sheets) and JavaScript to build modern web experiences. Understanding HTML is the first step for anyone interested in web development.
HTML was first introduced in 1991 by Tim Berners-Lee, a scientist at CERN, who invented the World Wide Web. Its original purpose was simple: to allow scientists to share documents and information over the internet. HTML provided a way to structure text, create links between documents, and include basic formatting. Over the years, HTML has evolved significantly, with new versions adding support for multimedia, forms, and advanced web features. The latest version, HTML5, introduced powerful elements and APIs that enable modern web applications to function without relying heavily on external plugins.
At its core, HTML is a markup language, which means it uses tags to define elements on a webpage. These tags are enclosed in angle brackets, such as <h1> for headings or <p> for paragraphs. Most HTML elements have an opening tag and a closing tag, with the content placed in between. For example, <p>This is a paragraph.</p> creates a paragraph of text on a webpage. Some elements, called self-closing tags, do not require a closing tag, such as <img> for images or <br> for line breaks.
One of the most important concepts in HTML is the Document Object Model (DOM). The DOM represents the structure of a webpage as a tree of elements. Each element, such as headings, paragraphs, images, or links, becomes a node in this tree. Browsers read the HTML code and build the DOM, which can then be manipulated using JavaScript. This structure allows developers to dynamically update content, change styles, and interact with users in real time.
HTML elements are classified into several types based on their functionality. Structural elements define the layout and hierarchy of content. Examples include <header> for page headers, <footer> for page footers, <section> for sections of content, and <article> for independent content pieces. Text formatting elements are used to style and organize text, such as <b> for bold text, <i> for italics, <strong> for important text, and <em> for emphasized text. Linking elements like <a> create hyperlinks, allowing users to navigate between pages or to external websites.
Images, audio, and video elements are also part of HTML. The <img> tag allows developers to include images, while <audio> and <video> tags enable multimedia content without relying on third-party plugins. HTML5 introduced native support for multimedia, making it easier to create rich, interactive experiences. Additionally, form elements such as <input>, <textarea>, <select>, and <button> allow users to interact with webpages by submitting data, which is crucial for login forms, surveys, and online shopping.
HTML also supports attributes, which provide additional information about elements. For example, the src attribute in the <img> tag specifies the image source, while the href attribute in the <a> tag defines the link destination. Attributes can also control behavior, styling, accessibility, and metadata. Common attributes include id, class, alt, title, and style. By combining elements and attributes, developers can create well-structured and meaningful webpages.
One of the most significant advancements in HTML5 is the addition of semantic elements. Semantic elements convey the meaning of the content to both browsers and developers, improving accessibility, SEO (Search Engine Optimization), and code readability. Examples include <nav> for navigation menus, <aside> for sidebars, <main> for main content, and <figure> for images with captions. Using semantic elements helps search engines and assistive technologies, such as screen readers, better understand the content of a page.
Another key aspect of HTML is accessibility. Accessible web design ensures that all users, including those with disabilities, can access and interact with a website. HTML provides features such as alt text for images, label elements for forms, and ARIA (Accessible Rich Internet Applications) attributes to improve usability. Accessibility is not only a legal requirement in many countries but also a best practice that makes websites inclusive for everyone.
HTML works closely with CSS and JavaScript. While HTML provides the structure and content of a webpage, CSS is used to control its appearance, such as colors, fonts, spacing, and layout. JavaScript adds interactivity, allowing developers to respond to user actions, manipulate the DOM, and create dynamic content. Together, HTML, CSS, and JavaScript form the core trio of web development, enabling developers to build modern, interactive, and visually appealing websites.
Despite being simple to learn, HTML has rules and best practices that ensure well-structured code. For example, elements should be properly nested, headings should follow a logical order, and pages should be mobile-friendly and responsive. Validation tools, such as the W3C HTML validator, help developers check for errors and maintain standards compliance. Clean, semantic HTML not only improves user experience but also simplifies maintenance and collaboration.
HTML also continues to evolve with new technologies. Features like the Canvas API and Web Storage API allow developers to create advanced graphics, animations, and offline-capable applications. HTML integrates with modern frameworks and libraries such as React, Angular, and Vue.js, providing the foundation upon which these tools build dynamic and interactive applications. As web technologies advance, HTML remains a critical skill for any web developer.
In conclusion, HTML is the cornerstone of web development. It provides the structure, meaning, and content for all web pages and works hand-in-hand with CSS and JavaScript to create modern, interactive, and accessible websites. Understanding HTML is essential for anyone entering the world of web development, as it forms the foundation for learning more advanced technologies. From basic text formatting to multimedia integration, forms, and semantic structures, HTML continues to evolve to meet the needs of a rapidly changing digital landscape. For developers, mastering HTML is not just a starting point—it is a lifelong skill that underpins all successful web projects.
Answer:
HTML stands for HyperText Markup Language.
It is used to create web pages and structure content on the web.
HTML is not a programming language, it is a markup language that tells the browser how to display content.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Answer:
HTML tags are special keywords surrounded by angle brackets (< >) used to define elements in HTML.
Tags usually come in pairs: an opening tag <p> and a closing tag </p>.
Example:
<p>This is a paragraph.</p>
| Feature | HTML | CSS | JavaScript |
|---|---|---|---|
| Full Form | HyperText Markup Language | Cascading Style Sheets | JavaScript |
| Purpose | Structure of web page | Styling of web page | Behavior & interactivity |
| Example | <h1>Hello</h1> |
h1 {color:red;} |
alert("Hello World") |
Ordered List (<ol>) – numbered items
Unordered List (<ul>) – bulleted items
Definition List (<dl>) – terms and definitions
Example:
<ol>
<li>Apple</li>
<li>Banana</li>
</ol>
<ul>
<li>Red</li>
<li>Blue</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
Answer:
Attributes provide additional information about HTML elements.
They are written inside the opening tag.
Common Attributes:
id – unique identifier
class – group of elements
src – image source
href – link URL
alt – alternative text for images
Example:
<img src="image.jpg" alt="My Image" width="200">
<a href="https://www.google.com">Google</a>
<div> and <span>| Element | Description | Example |
|---|---|---|
<div> |
Block-level element | <div>This is a block</div> |
<span> |
Inline element | <span>This is inline</span> |
Explanation:
<div> starts on a new line and can hold large sections.
<span> does not start on a new line, used for styling small text.
Semantic Elements: Have a meaning (describe content). Examples: <header>, <footer>, <article>, <section>
Non-Semantic Elements: No meaning; used for layout only. Examples: <div>, <span>
Example:
<header>My Website Header</header>
<section>Main Content</section>
<footer>Contact Info</footer>
<strong> and <b>?| Tag | Meaning | Example |
|---|---|---|
<b> |
Bold text (no semantic meaning) | <b>Bold</b> |
<strong> |
Strong importance (semantic meaning) | <strong>Important</strong> |
<i> and <em>?| Tag | Meaning | Example |
|---|---|---|
<i> |
Italic text (no semantic meaning) | <i>Italic</i> |
<em> |
Emphasized text (semantic meaning) | <em>Emphasized</em> |
<head> and <body>?| Tag | Purpose |
|---|---|
<head> |
Contains meta-information, title, CSS, scripts |
<body> |
Contains content displayed to users |
Example:
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
<ul> and <ol>?<ul> → Unordered list, uses bullets
<ol> → Ordered list, uses numbers
<a> and <link>| Tag | Purpose |
|---|---|
<a> |
Creates a hyperlink for navigation |
<link> |
Links external resources like CSS or favicon |
Example:
<a href="https://www.google.com">Google</a>
<link rel="stylesheet" href="style.css">
| Type | Description | Example |
|---|---|---|
| Inline | Does not start a new line, only occupies needed width | <span> |
| Block | Starts on new line, occupies full width | <div>, <p> |
| Inline-Block | Behaves like inline but allows block properties | <img> |
id and class?| Attribute | Description |
|---|---|
id |
Unique for single element, used in CSS/JS |
class |
Can be shared among multiple elements |
Example:
<div id="header">Header</div>
<div class="menu">Menu1</div>
<div class="menu">Menu2</div>
| Feature | HTML4 | HTML5 |
|---|---|---|
| Doctype | Complex | Simple: <!DOCTYPE html> |
| Multimedia | Requires plugins (Flash) | <audio> and <video> tags |
| Semantics | Few semantic elements | <header>, <footer>, <section> |
| Forms | Limited input types | New types: email, date, number |
<section> and <article>?<section> → Thematic grouping of content, like a chapter or part of page
<article> → Independent content that can be syndicated (blog, news post)
Example:
<section>
<h2>About Us</h2>
<p>Company info...</p>
</section>
<article>
<h2>Blog Post Title</h2>
<p>Content of blog post...</p>
</article>
Answer:
Forms are used to collect user input.
Common Form Elements:
<input> → Text, password, radio, checkbox
<textarea> → Multi-line input
<select> → Drop-down list
<button> → Submit or reset
Example:
<form>
Name: <input type="text" name="username"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Login">
</form>
GET and POST methods in forms| Method | Purpose |
|---|---|
| GET | Sends data in URL, limited size, less secure |
| POST | Sends data in body, no size limit, more secure |
<iframe> and <frame>?| Tag | Description |
|---|---|
<frame> |
Used in old HTML4 for framesets (deprecated) |
<iframe> |
Inline frame to embed another HTML page |
<meta> and <title>?| Tag | Purpose |
|---|---|
<meta> |
Metadata: charset, description, keywords |
<title> |
Sets the page title displayed in browser tab |
Example:
<meta charset="UTF-8">
<title>My Web Page</title>
Answer:
HTML5 introduced several new features for modern web development:
New Semantic Elements – <header>, <footer>, <article>, <section>, <nav>
Multimedia Support – <audio> and <video> tags without plugins
Form Enhancements – New input types like email, number, date, range
Canvas & SVG – <canvas> for drawing graphics
Local Storage – Store data in browser using localStorage and sessionStorage
Geolocation API – Access user location
Offline Support – Application Cache
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<b> and <strong>?Answer:
<b> → Bold text, no semantic meaning
<strong> → Indicates importance or emphasis, semantic meaning
Example:
<p><b>Bold Text</b> vs <strong>Important Text</strong></p>
<i> and <em><i> → Italic text, no meaning
<em> → Emphasized text with semantic meaning
Example:
<p><i>Italic</i> vs <em>Emphasis</em></p>
<canvas> tag in HTML5?<canvas> allows drawing graphics on the fly using JavaScript.
Useful for charts, games, animations.
Example:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 50);
</script>
<section> and <div>?| Element | Purpose |
|---|---|
<section> |
Semantic section of page content |
<div> |
Non-semantic container for layout/styling |
Example:
<section>
<h2>About Us</h2>
<p>Company info</p>
</section>
<div class="sidebar">Sidebar content</div>
New input types in HTML5:
| Type | Purpose |
|---|---|
email |
Validate email format |
url |
Validate URL |
number |
Numeric input |
range |
Slider input |
date |
Calendar date picker |
tel |
Phone number |
color |
Color picker |
Example:
<form>
Email: <input type="email" name="email">
Age: <input type="number" name="age" min="1" max="100">
</form>
<header> and <nav>| Tag | Purpose |
|---|---|
<header> |
Defines header section (logo, title) |
<nav> |
Defines navigation links |
Example:
<header><h1>Website Title</h1></header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
<figure> and <figcaption> tag?<figure> → Groups media (images, videos)
<figcaption> → Caption for media
Example:
<figure>
<img src="flower.jpg" alt="Flower">
<figcaption>Beautiful Flower</figcaption>
</figure>
<audio> → Embed audio files
<video> → Embed video files
Example:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support video
</video>
<iframe> and <embed>?| Tag | Purpose |
|---|---|
<iframe> |
Embed another HTML page within a page |
<embed> |
Embed multimedia (audio, video, PDF, flash) |
Example:
<iframe src="page.html" width="300" height="200"></iframe>
<embed src="file.pdf" width="300" height="200">
| Feature | localStorage | sessionStorage |
|---|---|---|
| Lifetime | Data persists until manually cleared | Data cleared when tab is closed |
| Scope | Across all tabs of same origin | Single tab/session only |
| Storage Limit | 5-10 MB | 5 MB |
Example:
localStorage.setItem("username", "John");
sessionStorage.setItem("sessionID", "12345");
<strong> and <b> in HTML5?<strong> → Important/semantic emphasis
<b> → Visual bold only
<mark> tag in HTML5?Highlights text (like a highlighter)
Semantic meaning: marked/highlighted text
Example:
<p>This is a <mark>highlighted</mark> text.</p>
<progress> and <meter> tag?<progress> → Shows progress of a task
<meter> → Represents a measured value within a range
Example:
<progress value="70" max="100"></progress>
<meter value="0.6">60%</meter>
<ol type="1">, <ol type="A">, and <ol type="a">?| Type | Description |
|---|---|
1 |
Numbers (1,2,3) |
A |
Uppercase letters (A,B,C) |
a |
Lowercase letters (a,b,c) |
<bdo> and <dir>?<bdo> → Bidirectional override (change text direction)
<dir> → Directory list (deprecated, replaced by <ul>)
Example:
<bdo dir="rtl">This text goes right-to-left</bdo>
Can be applied to any HTML element
Examples: id, class, title, style, hidden, contenteditable
Example:
<p id="para1" class="text" title="Hover text">Hello</p>
<details> and <summary>?<details> → Collapsible content
<summary> → Title/heading for the collapsible content
Example:
<details>
<summary>Click to expand</summary>
<p>Hidden content here</p>
</details>
Provide metadata about the web page
Used for SEO, charset, viewport, and description
Example:
<meta charset="UTF-8">
<meta name="description" content="Learn HTML for beginners">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script> and <noscript>?| Tag | Purpose |
|---|---|
<script> |
Includes JavaScript code |
<noscript> |
Content displayed if JavaScript is disabled |
Example:
<script>alert("Hello World");</script>
<noscript>Your browser does not support JavaScript!</noscript>
Answer:
HTML events are actions that occur in the browser, usually triggered by the user. Examples include clicks, mouse movements, key presses, and page load.
Common Events:
onclick → Triggered when an element is clicked
onmouseover → Triggered when mouse hovers
onload → Triggered when page or image loads
onchange → Triggered when input value changes
Example:
<button onclick="alert('Button clicked!')">Click Me</button>
<input type="text" onchange="alert('Value changed!')">
id and name attributes?| Attribute | Purpose |
|---|---|
id |
Unique identifier, used in CSS/JS |
name |
Used to group form data, submitted to server |
Example:
<input type="text" id="username" name="user">
Answer:
HTML tables are used to display data in rows and columns using <table>, <tr>, <td>, and <th>.
Example:
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Mary</td>
<td>22</td>
</tr>
</table>
<th> and <td>?| Tag | Purpose |
|---|---|
<th> |
Table header cell, bold and centered by default |
<td> |
Table data cell, normal alignment |
colspan → Merge cells horizontally
rowspan → Merge cells vertically
Example:
<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
</table>
<ul>, <ol>, and <dl>?| Element | Purpose |
|---|---|
<ul> |
Unordered list (bullets) |
<ol> |
Ordered list (numbers) |
<dl> |
Definition list (terms & descriptions) |
<abbr> tag in HTML?<abbr> → Represents an abbreviation or acronym, can have a title attribute for full form.
Example:
<p><abbr title="HyperText Markup Language">HTML</abbr> is a markup language.</p>
<q> and <blockquote>?| Tag | Purpose |
|---|---|
<q> |
Short inline quotation |
<blockquote> |
Long block quotation, usually on new line |
Example:
<p>He said, <q>Hello World!</q></p>
<blockquote>
This is a long quote from someone famous.
</blockquote>
Answer:
Accessibility ensures users with disabilities can use the web.
Tips:
Use <label> for form inputs
Use aria-label and aria-describedby attributes
Ensure color contrast and readable fonts
Use semantic HTML
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" aria-describedby="emailHelp">
<small id="emailHelp">We'll never share your email.</small>
<input type="text"> and <textarea>?| Element | Purpose |
|---|---|
<input type="text"> |
Single-line input |
<textarea> |
Multi-line input |
Example:
<input type="text" name="username">
<textarea name="message" rows="5" cols="30"></textarea>
Use <img> tag with width as 100% or max-width in CSS
Use srcset for multiple image resolutions
Example:
<img src="image.jpg" alt="Sample Image" style="max-width:100%; height:auto;">
<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" alt="Responsive">
<strong> and <em>?| Tag | Purpose |
|---|---|
<strong> |
Important text (bold) |
<em> |
Emphasized text (italic) |
<link> and <style>?| Tag | Purpose |
|---|---|
<link> |
External CSS file |
<style> |
Internal CSS in HTML document |
Example:
<link rel="stylesheet" href="style.css">
<style>
p { color: red; }
</style>
Answer: Use <iframe> to embed videos.
Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>
<iframe> and <object>?| Tag | Purpose |
|---|---|
<iframe> |
Embed another HTML page |
<object> |
Embed multimedia (video, PDF) or HTML content |
Use <select> and <option>
Example:
<select name="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
Use type="email"
Browser automatically checks the format
Example:
<input type="email" name="userEmail" required>
<audio> and <video> tags?| Tag | Purpose |
|---|---|
<audio> |
Embed audio files |
<video> |
Embed video files |
Both support attributes: controls, autoplay, loop, muted.
Semantic elements describe their meaning
Examples: <header>, <footer>, <section>, <article>, <aside>, <nav>
Benefit: Improves SEO and accessibility
Example:
<header>Website Header</header>
<nav>Navigation Menu</nav>
<article>Blog Content</article>
<footer>Contact Info</footer>
id and class in HTML?| Attribute | Purpose |
|---|---|
id |
Unique identifier, only one per page |
class |
Can be shared among multiple elements |
Example:
<div id="header">Header</div>
<div class="menu">Menu1</div>
<div class="menu">Menu2</div>
Answer:
HTML5 provides several APIs to enhance web applications. Some common ones:
Canvas API – Draw graphics, charts, games
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 150, 50);
</script>
Geolocation API – Get user location
Web Storage API – Store data on client (localStorage and sessionStorage)
Drag and Drop API – Make elements draggable
Offline & Application Cache – Access app offline
Web Workers – Background processing
Real-Time Use Case:
LocalStorage: Storing user preferences or cart items in an e-commerce site
Canvas: Drawing charts for analytics dashboards
localStorage, sessionStorage, and cookies| Feature | localStorage | sessionStorage | Cookies |
|---|---|---|---|
| Storage size | 5–10 MB | 5 MB | ~4 KB |
| Lifetime | Permanent (manual clear) | Until browser/tab closes | Set expiry, default session |
| Server interaction | No | No | Sent with HTTP requests |
| Scope | Across tabs and sessions | Current tab only | Across sessions |
Example:
localStorage.setItem("username", "John");
sessionStorage.setItem("sessionID", "123");
document.cookie = "user=John; expires=Fri, 31 Dec 2025 12:00:00 GMT";
<section>, <article>, and <div>| Tag | Purpose |
|---|---|
<section> |
Group related content (thematic section) |
<article> |
Independent content (blog post, news article) |
<div> |
Non-semantic container for styling/layout |
Real-Time Example:
<section>
<h2>About Us</h2>
<p>Company overview...</p>
</section>
<article>
<h2>Blog Post</h2>
<p>Content of blog post...</p>
</article>
<div class="container">Page layout</div>
Best Practices:
Use semantic HTML tags (<header>, <footer>, <article>, <nav>)
Proper <title> and <meta> tags
Use descriptive alt for images
Structure content with headings (<h1> to <h6>)
Use canonical URLs for duplicate content
Minimize inline styles, use clean, accessible markup
Example:
<title>HTML Advanced Guide for Developers</title>
<meta name="description" content="Learn advanced HTML techniques for real-time projects.">
<img src="chart.png" alt="Analytics Chart">
canvas and SVG. When to use which?| Feature | Canvas | SVG |
|---|---|---|
| Type | Pixel-based | Vector-based |
| Scalability | Not scalable without distortion | Scalable without quality loss |
| Use Case | Games, real-time graphics, charts | Logos, icons, diagrams |
| DOM Access | Minimal (draw API) | Full DOM manipulation |
Example:
Canvas: Drawing charts in a dashboard
SVG: Responsive icons and logos
<meta charset> and <meta name="viewport">?| Tag | Purpose |
|---|---|
<meta charset="UTF-8"> |
Sets character encoding for page |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Makes page responsive on different devices |
Best Practices:
Use semantic HTML (<header>, <main>, <footer>)
Use alt text for images
Use aria-* attributes for dynamic content
Ensure keyboard navigation is possible
Provide sufficient color contrast
Example:
<button aria-label="Close modal">X</button>
<iframe> and <object>| Tag | Purpose | Real-Time Use Case |
|---|---|---|
<iframe> |
Embed another HTML page | Embedding YouTube video |
<object> |
Embed multimedia (PDF, SWF) or HTML | Displaying PDF in a browser |
Use srcset for multiple resolutions
Use CSS max-width and height auto
Example:
<img src="small.jpg" srcset="medium.jpg 600w, large.jpg 1200w" alt="Responsive Image" style="max-width:100%; height:auto;">
Example:
<div id="drag1" draggable="true" ondragstart="drag(event)">Drag me</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:200px;height:100px;border:1px solid #000;"></div>
<script>
function allowDrop(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
Use Case: Drag-and-drop file upload or interactive dashboards.
Advanced Practices:
Use HTML5 input types (email, number, date, range)
Use required and pattern attributes for validation
Integrate with JavaScript for dynamic forms
Use ARIA roles for accessibility
Example:
<form>
<input type="email" name="email" required>
<input type="password" pattern="[A-Za-z0-9]{8,}" title="8+ characters">
<input type="submit" value="Register">
</form>
defer and async in <script>| Attribute | Description | Use Case |
|---|---|---|
defer |
Script executed after HTML parsing | Scripts that depend on DOM structure |
async |
Script executed immediately after download | Independent scripts like analytics |
Minify HTML, CSS, JS
Use lazy loading for images and videos
Combine CSS/JS files to reduce HTTP requests
Use semantic HTML for faster rendering
Enable browser caching
Example:
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support video.
</video>
Real-Time Use Case:
Provide multiple formats for cross-browser support
data-*) in HTML5?Store extra info on elements without affecting HTML validity
Access in JS via dataset
Example:
<div id="product" data-id="101" data-category="books">Book</div>
<script>
var product = document.getElementById("product");
console.log(product.dataset.id); // 101
console.log(product.dataset.category); // books
</script>
Use feature detection (Modernizr)
Provide fallbacks for older browsers
Test on multiple browsers and devices
Avoid deprecated tags like <font> or <center>
Example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
Use Case:
Responsive design, grid layout, prebuilt components
Add ARIA roles to interactive elements
Example:
<button role="switch" aria-checked="false" aria-label="Toggle Dark Mode">Toggle</button>
Real-Time Use Case:
Custom dropdowns, sliders, modals
Use semantic HTML tags (<header>, <nav>, <main>, <article>)
Proper heading hierarchy <h1> → <h6>
Use <meta> description, keywords
Descriptive alt for images
Canonical URLs for duplicates
Use browser developer tools (Inspect, Console)
Check DOM structure, CSS, and JS conflicts
Validate HTML via W3C validator
Test on multiple browsers/devices
Example:
Missing closing tags, misaligned elements, incorrect attributes
Answer:
A Progressive Web App (PWA) is a web application that behaves like a native app on mobile or desktop.
HTML’s role:
Structure content using semantic elements
Use <link> to manifest file (manifest.json)
Work with service workers for offline support
Real-Time Use Case:
Offline reading, push notifications, fast load times
Example:
<link rel="manifest" href="/manifest.json">
Service Workers are JavaScript files that run in the background to handle:
Offline caching
Push notifications
Background sync
HTML is used to register service workers.
Example:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(() => console.log('Service Worker Registered'));
}
Options:
localStorage – persistent key-value storage
sessionStorage – session-based storage
IndexedDB – larger structured storage for complex data
Example:
localStorage.setItem("cartItems", JSON.stringify(["item1", "item2"]));
var cart = JSON.parse(localStorage.getItem("cartItems"));
<canvas> in HTML5?Use JavaScript drawing methods with requestAnimationFrame for smooth animation.
Example:
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = 0;
function animate() {
ctx.clearRect(0,0,200,200);
ctx.fillRect(x, 50, 50, 50);
x += 2;
if(x > 200) x = 0;
requestAnimationFrame(animate);
}
animate();
</script>
You can drag multiple elements and drop into multiple targets
Handle events: dragstart, dragover, drop, dragend
Example:
<div id="drag1" draggable="true">Drag me</div>
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(ev){ ev.preventDefault(); }
function drop(ev){
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
Real-Time Use Case: File uploads, task boards (like Trello)
Use CSS overflow-x:auto or frameworks like Bootstrap
Break columns into scrollable containers for mobile
Example:
<div style="overflow-x:auto;">
<table border="1">
<tr><th>Name</th><th>Email</th><th>Age</th></tr>
<tr><td>John</td><td>john@example.com</td><td>25</td></tr>
<tr><td>Mary</td><td>mary@example.com</td><td>22</td></tr>
</table>
</div>
Important meta tags:
<meta name="description" content="Page description">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Advanced HTML techniques for developers">
<meta name="keywords" content="HTML5, SEO, PWA, Canvas">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Combine HTML5 attributes (required, pattern, min, max) with JavaScript
Example:
<form id="signupForm">
<input type="email" id="email" required>
<input type="password" id="pwd" pattern=".{8,}" title="8+ characters" required>
<input type="submit">
</form>
<script>
document.getElementById("signupForm").onsubmit = function(e){
if(!this.checkValidity()){ e.preventDefault(); alert("Form invalid!"); }
};
</script>
Use Case: Real-time form validation before submission
Best Practices:
Use HTTPS
Escape user input to prevent XSS
Use autocomplete="off" for sensitive fields
Avoid storing passwords in plain HTML/JS
Validate both client-side and server-side
Example:
<form method="POST" action="/login" autocomplete="off">
<input type="password" name="pwd" required>
<input type="submit">
</form>
Custom HTML elements for reusable components
Use <my-component> with JavaScript
Example:
<my-card></my-card>
<script>
class MyCard extends HTMLElement {
connectedCallback(){
this.innerHTML = `<div style="border:1px solid #000; padding:10px;">Hello Custom Element</div>`;
}
}
customElements.define('my-card', MyCard);
</script>
Use Case: Modular design in large-scale apps
ARIA roles provide semantic info for assistive tech
Example:
<nav role="navigation" aria-label="Main Menu">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<button aria-pressed="false">Toggle</button>
<figure> and <aside>| Tag | Purpose | Use Case |
|---|---|---|
<figure> |
Encapsulates media with captions | Image with <figcaption> |
<aside> |
Sidebar content or tangential info | Related articles, ads, widgets |
HTML5 supports native lazy loading:
<img src="large-image.jpg" loading="lazy" alt="Lazy Image">
<iframe src="video.html" loading="lazy"></iframe>
Benefit: Improves page load performance
<script> in <head> and <body>| Placement | Behavior |
|---|---|
<head> with defer |
Script executes after DOM loads |
<head> with async |
Script executes immediately after download |
<body> |
Script executes as browser reaches it |
Use feature detection (Modernizr)
Provide fallbacks for older browsers
Avoid deprecated tags like <font> or <center>
Test on Chrome, Firefox, Edge, Safari
<output> and <progress>| Tag | Purpose | Example |
|---|---|---|
<output> |
Shows calculation results | <output name="result">0</output> |
<progress> |
Shows task completion | <progress value="70" max="100"></progress> |
hidden and display:none in HTML/CSS| Property | Behavior |
|---|---|
hidden |
HTML attribute, hides element but DOM exists |
display:none |
CSS property, hides element and removes from layout flow |
Use semantic input types: email, tel, url, date, number
Use label for each input
Example:
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
Use <iframe> or Google Maps API
Example:
<iframe src="https://www.google.com/maps/embed?pb=!1m18..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
Example:
<div data-id="101" data-category="books"></div>
<script>
const div = document.querySelector('div');
console.log(div.dataset.id); // 101
console.log(div.dataset.category); // books
</script>
Use Case: Passing data from HTML to Vue.js, React, or Angular components
Answer:
Always provide multiple formats for cross-browser support.
Use controls, autoplay, loop, muted attributes.
Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
Real-Time Use Case:
E-learning platforms, online courses, media streaming apps
<audio> and <video> in HTML5?| Tag | Purpose | Attributes |
|---|---|---|
<audio> |
Embed audio files | controls, autoplay, loop, muted |
<video> |
Embed video files | controls, autoplay, loop, muted, width, height |
Use CSS max-width and height:auto
Use srcset for images over video thumbnails
Example:
<video controls style="max-width:100%; height:auto;">
<source src="video.mp4" type="video/mp4">
</video>
<canvas> in real projects?Use <canvas> with JavaScript libraries like Chart.js for faster implementation
Example:
<canvas id="myChart" width="400" height="200"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: { labels: ['Jan', 'Feb'], datasets: [{label:'Sales', data:[10,20]}] },
options: {}
});
</script>
Use Case: Dashboard analytics, real-time sales charts
<progress> and <meter>?Answer:
<progress> → Shows task completion
<meter> → Shows measurement in known range
Example:
<progress value="70" max="100"></progress>
<meter value="0.6">60%</meter>
Use Case: File upload progress, quiz scores
Features:
Conditional fields
Real-time validation
Interactive input types
Example:
<form id="regForm">
<input type="text" name="name" required>
<input type="email" name="email" required>
<select id="role" name="role">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
</select>
<input type="text" id="subject" placeholder="Subject" style="display:none;">
<input type="submit">
</form>
<script>
document.getElementById('role').addEventListener('change', function() {
document.getElementById('subject').style.display = (this.value==='teacher') ? 'block' : 'none';
});
</script>
Real-Time Use Case: Registration forms in education or job portals
Techniques:
Minify HTML, CSS, JS
Use lazy loading for images & iframes
Combine HTTP requests
Use semantic HTML
Enable browser caching
Avoid inline CSS & JS
Example:
<img src="hero.jpg" loading="lazy" alt="Hero Image">
Example:
<div id="dropZone" style="width:300px;height:100px;border:1px dashed #000;">Drop files here</div>
<script>
const dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', e => e.preventDefault());
dropZone.addEventListener('drop', e => {
e.preventDefault();
const files = e.dataTransfer.files;
console.log(files);
});
</script>
Use Case: E-commerce image upload, CMS content management
Best Practices:
Semantic HTML (<header>, <article>, <section>)
Proper heading hierarchy (<h1> → <h6>)
Descriptive alt for images
Meta tags for description, keywords, canonical URLs
Structured data (JSON-LD)
Example:
<meta name="description" content="Advanced HTML5 techniques for developers">
<article>
<h1>HTML5 Advanced Guide</h1>
<p>Learn about HTML5 APIs and best practices.</p>
</article>
Escape user inputs to prevent XSS
Use HTTPS for all forms
Validate forms on both client and server
Avoid inline scripts and eval()
Use Content-Security-Policy headers
<iframe> sandbox and normal <iframe>| Attribute | Purpose |
|---|---|
sandbox |
Restricts iframe actions for security |
Normal <iframe> |
Full access, no restrictions |
Example:
<iframe src="page.html" sandbox="allow-scripts allow-same-origin"></iframe>
<iframe> content?Wrap iframe in a container with CSS position:relative and padding-bottom
Example:
<div style="position:relative;padding-bottom:56.25%;height:0;">
<iframe src="video.html" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0"></iframe>
</div>
Use Cases:
Store user preferences
Cache temporary data
Example:
localStorage.setItem('theme','dark');
console.log(localStorage.getItem('theme')); // dark
sessionStorage.setItem('sessionId','12345');
Shadow DOM encapsulates styles & HTML
Example:
<my-card></my-card>
<script>
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML = `<div style="border:1px solid #000;padding:10px;">Shadow DOM Card</div>`;
}
}
customElements.define('my-card', MyCard);
</script>
<template> and <slot> in HTML5 Web Components| Tag | Purpose |
|---|---|
<template> |
Defines reusable HTML that is not rendered immediately |
<slot> |
Placeholder in Shadow DOM for content injection |
Example:
<template id="cardTemplate">
<div class="card">Hello</div>
</template>
Live regions announce changes to screen readers
Example:
<div aria-live="polite" id="status"></div>
<script>
document.getElementById('status').innerText = "Form submitted successfully!";
</script>
Use CSS Flexbox/Grid with semantic HTML
Add @media queries for mobile devices
Example:
<form style="display:flex;flex-wrap:wrap;">
<input type="text" style="flex:1;min-width:150px;">
<input type="email" style="flex:1;min-width:150px;">
<button type="submit">Submit</button>
</form>
Use JSON-LD inside <script type="application/ld+json">
Example:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Advanced HTML5 Techniques",
"author": "John Doe"
}
</script>
defer and async in <script> for performance| Attribute | Behavior | Use Case |
|---|---|---|
defer |
Executes after DOM is fully parsed | Scripts that rely on DOM structure |
async |
Executes as soon as downloaded | Independent scripts like analytics |
Best Practices:
Use <track> for video captions
Provide text transcripts
Use aria-label for interactive controls
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions_en.vtt" srclang="en" label="English">
</video>
