All questions
Showing of 87What 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 was the major revision that followed HTML 4.01. Today HTML has no version number. It is the HTML Living Standard maintained by the WHATWG, and "HTML5" now refers to a set of modern web technologies.
The main changes HTML5 brought over HTML 4.01:
- Semantic elements for page structure, such as
<header>,<footer>and<nav> <article>and<section>for marking up content- Native
<video>and<audio>elements, so media plays without plugins <canvas>for drawing, and<svg>support- New input types such as
email,dateandcolor - A
rangeinput for sliders - JavaScript APIs such as Geolocation, Web Storage and Web Workers
- A native Drag and Drop API
- Removal of deprecated tags like
<font>,<center>and<big>
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 is a doctype followed by one <html> root element, which holds a <head> for metadata and a <body> for content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
<!DOCTYPE html>tells the browser to render in standards mode. It no longer names an HTML version.<html>is the root element that contains every other element. Itslangattribute lets screen readers pronounce the content correctly.<head>holds metadata that the page does not display, such as the title and links to stylesheets.<meta charset="UTF-8">declares the character encoding. It must appear within the first 1024 bytes of the document.<title>names the page in the browser tab.<body>contains the visible page content.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 are HTML elements that can never have content or child elements, so they have only a start tag and no closing tag. They are also called empty elements. Common examples:
<br>for a line break<hr>for a horizontal rule<img>for an image<input>for a form input<meta>for metadata<link>for an external resource link
HTML has no self-closing tags. A trailing slash, as in <br />, changes nothing because the parser ignores it. On a normal element, <div /> does not close the <div>.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 and fill their container's width, while inline elements flow within a line at their content's width.
| Block-level | Inline | |
|---|---|---|
| Starts on a new line | Yes | No |
| Width | Full width available | Only what the content needs |
| Can contain | Block and inline elements, though <p> and headings hold only inline content |
Text and other inline elements |
| Examples | <div>, <p>, <h1>, <section>, <article> |
<span>, <a>, <strong>, <img>, <input> |
One exception to the inline rule is <a>. Its transparent content model lets a link wrap block content when the link's parent allows it.
The distinction now belongs to CSS. HTML groups elements into content categories such as flow and phrasing content. The display property decides how each element renders. Setting display: inline on a <div> or display: block on a <span> swaps how they render, not what they may contain.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 for grouping sections of content, while <span> is an inline container for text or inline elements within a line.
A <div> starts on a new line and takes the full width available. A <span> stays within the surrounding text and takes only the width of its content. That makes <div> the tool for layout wrappers and <span> the tool for styling or grouping part of a sentence.
Neither element has semantic meaning. Both exist for layout and styling. Use them only when no meaningful element fits, such as <nav> for navigation or <strong> for important text.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 -
Add target="_blank" to the link, which tells the browser to open it in a new tab or window.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Link</a>
The rel values protect security and privacy:
noopeneropens the page without giving it access to the original page throughwindow.opener. In older browsers without it, an untrusted page could use that property to tamper with the page that opened it.noreferrerstops the browser from sending theRefererheader, so the target site doesn't learn which page linked to it. It also impliesnoopener.
Modern browsers apply noopener to target="_blank" links automatically, so writing it out now matters mainly for older browsers. noreferrer remains a deliberate choice about privacy.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 has three main list types: ordered, unordered and description lists.
- An ordered list,
<ol>, numbers its items because their sequence matters, as in recipe steps. - An unordered list,
<ul>, shows bullets for items whose order doesn't matter. - A description list,
<dl>, pairs terms in<dt>with descriptions in<dd>, for glossaries or key-value metadata.
Items in <ol> and <ul> go in <li> elements. To choose between them, reorder the items in your head. If the meaning changes, use <ol>. Its start and reversed attributes control the numbering.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 one or more <source> children, and the browser plays the first format it supports.
<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>
Listing an .mp4 and a .webm source covers browsers with different codec support. The text inside the element shows only in browsers that can't play HTML video.
Key attributes:
controlsshows the browser's playback controls.autoplaystarts playback on load, but browsers block autoplay with sound, so pair it withmuted.looprestarts the video when it ends.mutedstarts the video silenced.postersets a thumbnail image to show before playback starts.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 sends form data in the URL as query parameters, while POST sends it in the request body.
| GET | POST | |
|---|---|---|
| Where the data goes | URL query string | Request body |
| Size | Limited by URL length | Not limited by the URL |
| Visibility | Visible in the URL | Not visible in the URL |
| Bookmarkable | Yes | No |
| Use for | Retrieving data, such as a search | Submitting or modifying data |
HTTP sets no fixed URL length. The spec recommends supporting at least 8000 octets, and the real cap comes from browsers and servers.
GET should only read data, so repeating it is safe. Repeating a POST can repeat its effect, such as placing the same order twice.
Neither method encrypts anything. POST keeps data out of the URL, but only HTTPS protects it in transit, so send passwords with POST over HTTPS.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 <legend> gives that group a caption.
<fieldset>
<legend>Personal Information</legend>
<input type="text" name="name">
<input type="email" name="email">
</fieldset>
The browser draws a border around the group with the legend set into it. Screen readers use the legend as the group's label, which matters most for radio buttons that share one question.
The disabled attribute on a fieldset disables the controls inside it at once, and the form does not submit them. Controls inside the <legend> itself stay enabled.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 -
Associate a <label> with its control explicitly, through a for attribute that matches the control's id. Or do it implicitly, by nesting the control inside the label.
- Using the
forattribute matching the input'sid:
<label for="username">Username:</label>
<input type="text" id="username">
- Nesting the input inside the label:
<label>Username: <input type="text"></label>
Explicit association is the safer default, because it works with more assistive technologies and external tools. Either way, a screen reader reads the label when the input gets focus. Clicking the label focuses the input, which gives a bigger hit area on touch screens. Don't put links or buttons inside a label, since they make the input harder to activate.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
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 -
Use <header> for introductory content or navigational aids, and <footer> for closing information about its section or the whole page.
A <header> typically holds the page logo and main navigation, or the heading and metadata of an article or section. A <footer> typically holds:
- Copyright information
- Contact details
- Sitemap links
- Related links
Both can appear many times on one page, once for the page itself and again inside articles or sections. At page level they become the banner and contentinfo landmarks that screen readers jump to. Nested inside an <article> or <section>, they lose that landmark role.
A <header> is not a heading itself. It usually wraps the section's heading element, from <h1> to <h6>.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
When should you use the 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 -
Use <nav> for a page's major navigation blocks, the sections whose job is linking around the site or the page:
- Main site navigation
- A table of contents
- Breadcrumbs
- Pagination
Not every group of links needs it. Footer links usually don't, unless they are primary navigation.
The element maps to the navigation landmark, so screen readers can jump straight to it or skip past it. A page can have several <nav> elements, and labelling each one with aria-labelledby lets screen reader users tell them apart.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
How do you make images accessible?
How do you indicate the language of content?
What is the difference between the id and class attributes?
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 id identifies exactly one element and must be unique in the document, while a class labels any number of elements and can be reused.
id |
class |
|
|---|---|---|
| Elements per value | One | Any number |
| Values per element | One | Several, separated by spaces |
| CSS selector | #header |
.card |
| JavaScript lookup | getElementById() |
getElementsByClassName() |
| Specificity | Higher | Lower |
An id is also a link target, so href="#header" jumps to that element, and a label's for attribute points at a control's id. Use ids for those jobs and for unique scripting hooks.
Use classes for styling. An ID selector outweighs any number of class selectors, which makes rules written on ids hard to override later. Name classes after what an element is, such as card, rather than how it looks.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
What are HTML entities and when should you use them?
What is the difference between <strong> and <b> tags?
What are the new input types introduced in HTML5?
What is semantic HTML and why is it important?
What is the purpose of the <main> element?
What is the <aside> element used for?
What is the importance of minification?
What is the DOCTYPE declaration and why is it important?
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 the difference between localStorage and sessionStorage?
Explain the drag and drop API in HTML5.
What is the purpose of the contenteditable attribute?
Explain form validation attributes in HTML5.
What is the autocomplete attribute?
Explain the <datalist> element.
What is the purpose of the formaction attribute?
Explain the purpose of <article> vs <section> elements.
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 above-the-fold content optimization?
How do you structure an HTML table so it is accessible?
What is the difference between canvas and SVG?
Why should CSS links go in the head and scripts just before the closing body tag?
What are Web Workers in HTML5?
What are Web Components?
Explain structured data and schema markup.
What is the Critical Rendering Path?
What is the Intersection Observer API?
Explain the Progressive Web App (PWA) manifest.
How do you implement infinite scrolling with accessible HTML?
How do you optimize HTML for Core Web Vitals?
What is focus management in web applications?
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 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?
What is the is attribute in custom elements?
Explain the slot element in Web Components.
What is declarative Shadow DOM?
Explain the blocking attribute for rendering.
How do you implement A/B testing with HTML?
What is a stacking context, and how does HTML structure affect it?
Explain microfrontends and HTML's role.
When would you use the Popover API instead of the dialog element?
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 in pictures.
A quick recap of HTML5 in 38 short animated pictures, one idea at a time. About 9 min to get the whole topic back in your head before you walk in. Pause any picture, slow it down, or step through it.
Pro The first chapter is free to play. The other 33 pictures come with Pro.
This picture is part of Pro. The first chapter is free to play; the other 33 pictures come with Pro.
Get Pro · $10/mo Already Pro? Sign in73 of 87 HTML5 answers are in Pro.
Full answers, code samples, and AI explanations that go simpler or deeper. Cancel anytime.
- Full answers + code
- AI explanations, simpler or deeper
- 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.jsDjango
Python Full-Stack DevelopmentRuby on Rails
Convention over ConfigurationServerless 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, RabbitMQInterviewers also test these - they're common to every stack, whichever one you picked above.
FastAPI
Python, FastAPI, SQLAlchemy, PostgreSQLReact Native
React, TypeScript, Redux, FirebaseiOS Native
Swift, SwiftUI, UIKit, FirebaseAndroid Native
Java, Jetpack Compose, FirebaseDevOps / Platform
Docker, Kubernetes, Terraform, CI/CDInterviewers also test these - they're common to every stack, whichever one you picked above.
AI Engineer
LLMs, RAG, Agents, EvalsAI-Powered Developer
Claude Code, Copilot, Agentic WorkflowsCore 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.