All questions
of 84What is the difference between HTML and HTML5?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
HTML5 is the latest version of HTML with several key improvements:
- New semantic elements: <header>, <footer>, <article>, <section>, <nav>
- Multimedia support: Native <video> and <audio> elements without plugins
- Graphics: <canvas> for drawing and <svg> support
- Better forms: New input types like email, date, range, color
- APIs: Geolocation, Web Storage, Web Workers, Drag and Drop
- Removed deprecated tags: <font>, <center>, <big>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Explain the basic structure of an HTML document.
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
An HTML document has a standard structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>-
<!DOCTYPE html>: Declares the document type and HTML version-
<html>: Root element containing all other elements-
<head>: Contains metadata, title, links to stylesheets-
<body>: Contains the visible page contentThis answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are void elements in HTML?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Void elements (also called self-closing or empty elements) are HTML elements that cannot have any content or child elements. They don't have a closing tag. Common examples include:
- <br> - Line break
- <hr> - Horizontal rule
- <img> - Image
- <input> - Form input
- <meta> - Metadata
- <link> - External resource link
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What is the difference between block-level and inline elements?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Block-level elements:
- Start on a new line
- Take up full width available
- Can contain other block and inline elements
- Examples: <div>, <p>, <h1>, <section>, <article>
Inline elements:
- Don't start on a new line
- Only take up necessary width
- Cannot contain block-level elements
- Examples: <span>, <a>, <strong>, <img>, <input>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Explain the difference between `<div>` and `<span>`.
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
<div> is a block-level container element used for grouping and structuring larger sections of content. It starts on a new line and takes full width. <span> is an inline container used for styling or grouping small portions of text or inline elements within a line. Neither has semantic meaning; they're purely for layout and styling purposes.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you create a hyperlink that opens in a new tab?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Use the target="_blank" attribute. It's also recommended to add rel="noopener noreferrer" for security:
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Link</a>-
noopener: Prevents the new page from accessing the window.opener property-
noreferrer: Prevents passing referrer informationThis answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are the different list types in HTML?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
HTML provides three main list types:
- Ordered List (<ol>): Numbered list for sequential items
- Unordered List (<ul>): Bulleted list for non-sequential items
- Description List (<dl>): List of terms (<dt>) and descriptions (<dd>)
Each serves different semantic purposes for organizing content.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you embed a video in HTML5?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Use the <video> element with various attributes:
<video controls width="320" height="240" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser doesn't support video.
</video>Key attributes:
controls (playback controls), autoplay, loop, muted, poster (thumbnail).This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What is the difference between GET and POST form methods?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
GET:
- Appends data to URL as query parameters
- Limited data size (~2048 characters)
- Data visible in URL
- Can be bookmarked
- Used for retrieving data
POST:
- Sends data in request body
- No size limitations
- Data not visible in URL
- Cannot be bookmarked
- Used for submitting/modifying data
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What is the purpose of the `<fieldset>` and `<legend>` elements?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
<fieldset> groups related form controls and creates a visual box around them. <legend> provides a caption for the fieldset:
<fieldset>
<legend>Personal Information</legend>
<input type="text" name="name">
<input type="email" name="email">
</fieldset>They improve form organization, accessibility, and visual structure.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you associate a label with a form control?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Two methods:
1. Using for attribute matching the input's id:
<label for="username">Username:</label>
<input type="text" id="username">2. Nesting input inside label:
<label>Username: <input type="text"></label>Proper association improves accessibility and allows clicking the label to focus the input.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
When should you use `<header>` and `<footer>` elements?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
<header>: Introductory content or navigational aids. Can be used for:
- Page header with logo and main navigation
- Article or section headers with headings and metadata
<footer>: Closing content. Typically contains:
- Copyright information
- Contact details
- Sitemap links
- Related links
Both can appear multiple times per page (page-level and within articles/sections).
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
When should you use `<nav>` element?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
<nav> represents a section with navigation links. Use for:
- Main site navigation
- Table of contents
- Breadcrumbs
- Pagination
Not every group of links needs <nav> - only major navigation blocks. Footer links might not need <nav> unless they're primary navigation.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you make images accessible?
How do you indicate the language of content?
What is the DOCTYPE declaration and why is it important?
What are HTML entities and when should you use them?
What is the difference between `<strong>` and `<b>` tags?
What are data attributes in HTML?
Explain the difference between `<script>`, `<script async>`, and `<script defer>`.
What is the purpose of the `<picture>` element?
Explain the Canvas API in HTML5.
What is the Geolocation API?
What is localStorage and sessionStorage?
Explain the drag and drop API in HTML5.
What is the purpose of the `contenteditable` attribute?
What are the new input types introduced in HTML5?
Explain form validation attributes in HTML5.
What is the `autocomplete` attribute?
Explain the `<datalist>` element.
What is the purpose of the `formaction` attribute?
What is semantic HTML and why is it important?
Explain the purpose of `<article>` vs `<section>` elements.
What is the purpose of the `<main>` element?
What is the `<aside>` element used for?
Explain the `<figure>` and `<figcaption>` elements.
What is the `<time>` element?
What are the supported video formats in HTML5?
How do you make images responsive?
What is the `loading` attribute for images?
Explain SVG and its advantages.
What is the `preload` attribute for media elements?
How do you add subtitles to a video?
What are Open Graph meta tags?
Explain the viewport meta tag.
What is the purpose of canonical URLs?
What meta tags are important for SEO?
What is the `robots` meta tag?
What are ARIA attributes and when should you use them?
What is the importance of heading hierarchy?
What is keyboard navigation and why is it important?
Explain the importance of semantic HTML for accessibility.
What are skip links?
How can you optimize HTML for performance?
What is the importance of minification?
What is above-the-fold content optimization?
What are Web Workers in HTML5?
What are Web Components?
Explain structured data and schema markup.
What is focus management in web applications?
What is the Critical Rendering Path?
What are resource hints in HTML?
How do you handle browser caching with HTML?
What are Web Components' lifecycle callbacks?
Explain Content Security Policy (CSP).
What is Shadow DOM?
How do Service Workers relate to HTML?
What is the Intersection Observer API?
Explain Progressive Web App (PWA) manifest.
What is CORS and how does it affect HTML?
What are HTML Imports and why were they deprecated?
Explain the `sandbox` attribute for iframes.
What is the `integrity` attribute?
How do you implement infinite scrolling with HTML attributes?
What is the `is` attribute in custom elements?
Explain the `slot` element in Web Components.
What are portal elements (proposed)?
How do you optimize HTML for Core Web Vitals?
What is declarative Shadow DOM?
Explain the `blocking` attribute for rendering.
What are HTML modules (proposed)?
How do you implement A/B testing with HTML?
What is the Layer Model in CSS and how does HTML interact with it?
Explain microfrontends and HTML's role.
This answer is part of Pro.
The full written answer, with the trade-offs and follow-ups an interviewer will probe.
No matches
Try a different filter or search term.
HTML5 cheatsheet
HTML Technical Interview Cheat Sheet
- Summary01
- HTML Basics02
- Document Structure03
- Common Elements04
- Semantic HTML505
- Forms and Inputs06
- Media Elements07
- Tables08
- Metadata and SEO09
- Accessibility (a11y)10
- HTML5 APIs11
- Best Practices12
- + 3 more inside
71 of 84 HTML5 answers are gated.
Full answers, code samples, AI explanations - simpler, deeper, or as an interactive diagram. Cancel anytime.
- Full answers + code
- AI explain - simpler, deeper, or visualized
- 1,000 AI credits / month
- Cancel anytime
Change topic
Pick a different technology or stack. Your current topic stays put until you choose a new one.
MEAN
MongoDB, Express, Angular, Node.jsMERN
MongoDB, Express, React, Node.jsLAMP
Linux, Apache, MySQL, PHPRuby on Rails
Convention over ConfigurationJAM
JavaScript, APIs, and MarkupServerless on AWS
Serverless Architecture on AWSInterviewers also test these - they're common to every stack, whichever one you picked above.
Flutter Mobile
Flutter Cross-Platform Mobile DevelopmentInterviewers also test these - they're common to every stack, whichever one you picked above.
Spring Boot
Enterprise Java Development.NET
Microsoft EcosystemVue
Vue.js, Vite, TypeScript, Tailwind, Node.jsGo Backend
Golang, gRPC, PostgreSQL, Redis, RabbitMQFastAPI
Python, FastAPI, SQLAlchemy, PostgreSQLReact Native
React, TypeScript, Redux, FirebaseiOS Native
Swift, SwiftUI, UIKit, FirebaseAndroid Native
Java, Jetpack Compose, FirebaseWeb3 / Ethereum
Solidity, Ethereum, Hardhat, FoundryDevOps / Platform
Docker, Kubernetes, Terraform, CI/CDCore SWE Interview Prep
Data structures, algorithms, OS, concurrency, networking, gitInterviewers also test these - they're common to every stack, whichever one you picked above.
Interviewers also test these - they're common to every stack, whichever one you picked above.