HTML questions open most frontend and web developer interviews. These HTML interview questions cover elements, attributes and document structure for freshers, then semantic HTML, forms, accessibility, SEO, performance and modern HTML5 APIs for experienced developers.
30 questions · Updated
Fundamentals, definitions and simple scenarios. Good for freshers and warm-ups.
HTML (HyperText Markup Language) describes the structure and meaning of content on a web page. A document starts with <!DOCTYPE html>, then an <html lang="en"> element containing <head>, with metadata such as <meta charset="utf-8">, the viewport meta tag, <title> and links to CSS, and <body>, which holds the visible content.
Block elements such as div, p, h1 and section start on a new line and take the full available width.
Inline elements such as span, a, strong and img sit within a line of text and only take the width of their content; width and height do not apply to non-replaced inline elements.
CSS display can change this, and inline-block combines both behaviours.
Semantic elements describe their meaning, such as header, nav, main, article, section, aside, footer, figure, time and button.
They help screen readers navigate, help search engines understand content, and make code easier to read.
Using a div for everything loses this meaning.
It tells the browser that the page uses modern HTML, so it renders in standards mode.
Without it, browsers switch to quirks mode, which imitates old browser bugs, for example in how the box model and some CSS behave, which causes layout problems.
It must be the very first line of the document.
<meta charset="utf-8"> so characters display correctly, <meta name="viewport" content="width=device-width, initial-scale=1"> so the page works on phones, a unique <title> and <meta name="description"> for search results, and Open Graph tags such as og:title and og:image for link previews on social media and messaging apps.
An id must be unique on the page and identifies one element, used for links to a section (#contact), label for attributes and JavaScript lookups.
A class can be used on many elements and an element can have many classes, so classes are used for styling.
Styling with ids is avoided because their high specificity makes CSS harder to override.
Use tables only for tabular data, not layout.
Add a <caption> describing the table, group rows with <thead>, <tbody> and <tfoot>, and use <th> for headers with scope="col" or scope="row" so screen readers announce the right header for each cell.
For complex tables, headers and id attributes link cells to headers.
Use <img> with a src, an alt attribute that describes the image's purpose (or alt="" for purely decorative images so screen readers skip them), and width and height attributes so space is reserved and the layout does not jump.
Wrap images with captions in <figure> and <figcaption>.
Use loading="lazy" for images further down the page.
target="_blank" opens the link in a new tab.
In older browsers the new page could access the original page through window.opener and redirect it, a phishing risk called tabnabbing; rel="noopener" (and noreferrer) prevents that, and modern browsers now apply noopener by default.
Opening new tabs should be used sparingly and ideally signalled to users.
email, tel, url, number, range, date, time, datetime-local, month, week, color, search, file, password, checkbox and radio. The right type brings the right keyboard on phones, built-in validation (for example email format), and native pickers for dates and colours, with less JavaScript.
<strong> means the text is important and <em> means it is stressed, which changes the meaning; screen readers can convey them. <b> and <i> only change the look (bold and italic) without extra meaning, used for things like keywords, product names or terms in another language. Choose by meaning, and use CSS when you only want styling.
Applied problems, trade-offs and questions about your own projects.
A normal script blocks HTML parsing while it downloads and runs. async downloads in parallel and runs as soon as it is ready, in any order, which suits independent scripts like analytics. defer downloads in parallel and runs in order after the HTML is parsed, before DOMContentLoaded, which suits most application scripts. Module scripts are deferred by default.
Every input has a visible label linked with for and id, related fields are grouped with fieldset and legend, and the right input types (email, tel, number, date) bring the correct mobile keyboards and validation. I use autocomplete attributes, required and pattern for native validation, clear error messages linked with aria-describedby, and a real button with type="submit".
data-* attributes store custom data on an element, such as <button data-product-id="42">.
JavaScript reads them through element.dataset.productId, and CSS can select them with attribute selectors.
They are useful for passing small amounts of data to scripts without non-standard attributes or hidden elements.
localStorage stores data in the browser with no expiry, per origin, about 5 to 10 MB. sessionStorage is the same but cleared when the tab closes. Cookies are small (about 4 KB), are sent to the server with every request, can expire, and can be HttpOnly so JavaScript cannot read them, which makes them the right place for session tokens.
An <iframe> embeds another web page, such as a YouTube video or a map, inside the current page.
Use the sandbox attribute to restrict what the embedded page can do, the allow attribute to grant only needed features such as fullscreen, a title for screen readers and loading="lazy".
To stop your own site being embedded by others (clickjacking), send a frame-ancestors Content Security Policy.
SVG describes graphics as shapes in the DOM, so they scale without losing quality, can be styled with CSS, are accessible and respond to events per shape; they suit icons, logos, charts and diagrams. Canvas is a pixel bitmap drawn with JavaScript, which is faster for thousands of objects, games, image editing and real-time visualisation, but needs extra work for accessibility.
Use the <video> and <audio> elements with controls, several <source> elements in different formats, and <track kind="captions"> for subtitles, which are essential for accessibility. preload controls how much is downloaded, poster shows an image before playback, and autoplaying video must be muted and should be avoided for users who prefer reduced motion.
<dialog> is a native modal or non-modal dialog. showModal() opens it as a modal with a backdrop, makes the rest of the page inert, traps focus inside and closes on Escape; close() closes it.
A form with method="dialog" closes it when submitted.
It replaces much custom modal JavaScript and gets accessibility right by default.
They create a native disclosure widget: the <summary> is always visible and clicking it shows or hides the rest of the <details> content, with no JavaScript.
They are keyboard accessible by default and suit FAQs and expandable sections.
The open attribute controls the state, and the name attribute groups several details so only one is open at a time.
Web components are a set of browser standards for building reusable custom elements that work in any framework: custom elements (defining your own tags like <user-card> with a class), Shadow DOM (encapsulated markup and styles), and HTML templates and slots. They suit design systems shared across apps built with different frameworks.
Open Graph meta tags control how a link looks when shared on WhatsApp, LinkedIn, Facebook, Slack and similar apps: og:title, og:description, og:image (ideally 1200 by 630 pixels), og:url and og:type.
Twitter/X uses twitter:card tags but falls back to Open Graph.
A good preview image and title noticeably increase clicks on shared links.
System design, deep internals, leadership and tough follow-ups.
A unique, descriptive title and meta description on every page, one h1 and a logical heading order, semantic elements, descriptive link text, alt text on meaningful images, canonical links to avoid duplicates, the lang attribute, structured data with JSON-LD, and server-rendered content so crawlers see it without running JavaScript. Fast loading and mobile-friendly pages also help.
Use responsive images with srcset and sizes, modern formats with picture, width and height attributes to prevent layout shift, loading="lazy" for below-the-fold images and iframes, and fetchpriority="high" for the main hero image. Preload critical fonts and resources, preconnect to important origins, defer non-critical scripts, and inline critical CSS.
ARIA (Accessible Rich Internet Applications) attributes add roles, states and properties for assistive technologies, such as role="dialog", aria-expanded and aria-live.
The first rule of ARIA is not to use it when a native element does the job: a real button is better than a div with role="button".
ARIA is for custom widgets such as tabs, comboboxes and live updates, and incorrect ARIA makes accessibility worse.
They are resource hints in <link> tags. preload fetches a resource needed for the current page early and at high priority, such as the main font or hero image. prefetch downloads a resource likely needed for the next navigation at low priority. preconnect opens a connection (DNS, TCP and TLS) to an important third-party origin in advance. Overusing them wastes bandwidth and can slow the page.
The Shadow DOM attaches a hidden, separate DOM tree to an element, with its own scoped styles that do not leak in or out.
Browsers use it for built-in elements such as <video> controls, and web components use it for encapsulation.
Content from outside is shown inside through slots, and the component can expose styling hooks through CSS custom properties and ::part.
Structured data describes the page's content to search engines using schema.org vocabulary, most commonly as JSON-LD in a <script type="application/ld+json"> tag, for types such as Article, Product, BreadcrumbList, Organization and Event.
It can enable rich results such as star ratings and breadcrumbs.
It must match the visible content, and can be checked with Google's Rich Results Test.
A Content Security Policy is an HTTP header (or meta tag) that tells the browser which sources of scripts, styles, images, frames and connections are allowed.
It is a strong defence against cross-site scripting, because injected inline scripts will not run unless allowed by a nonce or hash.
A strict policy uses nonces with strict-dynamic, and Report-Only mode helps roll it out safely.
The parser reads bytes, decodes them into characters, turns them into tokens and builds the DOM tree.
It is very forgiving and fixes invalid markup in standard ways, which can move elements unexpectedly, for example a <div> inside a <p> closes the paragraph.
A preload scanner looks ahead for resources to fetch early.
Synchronous scripts pause parsing, which is why defer and async exist.
See all Frontend Developer interview questions, covering HTML, CSS, JavaScript, TypeScript, React and more.