Interview Q&A · 44 questions · 9 answered publicly
HTML & CSS Interview Questions
Ordered by how often they're asked. Sign in free to see every answer, rate your confidence and run timed mock interviews.
-
Most asked What is HTML?
Summary
HTML (HyperText Markup Language) is the standard language for the structure and meaning of web pages. It uses elements written as tags to say what each piece of content is: headings, paragraphs, links, images, forms. Browsers read it and draw the page.
Longer Answer
HTML is a markup language, not a programming language: it describes content rather than computing anything. It works with CSS (presentation) and JavaScript (behaviour). HyperText refers to links between documents, the core idea of the World Wide Web, which Tim Berners-Lee created at CERN between 1989 and 1991.
Key Points
- Markup language for structure and meaning.
- Elements and tags.
- CSS styles it, JavaScript adds behaviour.
- Invented by Tim Berners-Lee at CERN.
Deep dive: HTML5 for Beginners: What Is the Web, and What Is HTML?
-
Most asked What is HTML5, and how is it different from HTML 4?
Summary
HTML5 (a W3C Recommendation in 2014, now the WHATWG's HTML Living Standard) modernised HTML for web applications: semantic structure elements, native video and audio, canvas, new form input types with built-in validation, web storage and other APIs, a short <!DOCTYPE html>, and precisely specified, error-tolerant parsing.
Longer Answer
HTML 4.01 (1999) relied on plug-ins such as Flash for video and graphics and on generic divs for page structure. HTML5 added header, nav, main, article, section, aside and footer; video and audio; canvas and inline SVG; input types such as email, date and range with constraint validation; localStorage and sessionStorage; and defined exactly how browsers must parse even broken markup. Since 2019 there are no numbered versions: HTML is a Living Standard, so "HTML5" now simply means modern HTML.
Key Points
- Semantic structure elements.
- Native video, audio and canvas.
- New input types and validation.
- Web storage and APIs.
- Living Standard since 2019.
Deep dive: HTML5 for Beginners: A Short History of HTML
-
Most asked What is semantic HTML, and why does it matter?
Summary
Semantic HTML means choosing elements for the meaning of their content (header, nav, main, article, button, ul, table) instead of generic divs and spans. It gives browsers, search engines and assistive technology the page's structure for free.
Longer Answer
Screen-reader users navigate by landmarks (header, nav, main, aside, footer) and headings; search engines use the structure to understand content; native elements such as button and a bring keyboard support and correct roles without extra code. Semantic markup is also easier to read and maintain.
Key Points
- Elements chosen by meaning.
- Landmarks and headings for screen readers.
- Helps search engines.
- Built-in keyboard behaviour.
Deep dive: HTML5 for Beginners: Semantic HTML5: Header, Nav, Main and Footer
-
Most asked What is the alt attribute for, and what makes good alt text?
Summary
alt provides a text alternative for an image, read by screen readers and shown when the image fails to load; search engines use it too. Good alt text briefly conveys what the image means in context. Decorative images get an empty alt="" so screen readers skip them.
Longer Answer
Don't start with "image of" (screen readers already say it's an image), don't repeat nearby text, and describe the purpose for functional images: a linked logo's alt is the destination ("ReadyCamel home"), not "logo". Missing alt entirely is the worst case: some screen readers read the file name.
Key Points
- Text alternative for images.
- Describe meaning in context.
- alt="" for decoration.
- Never omit alt.
Deep dive: HTML5 for Beginners: Images
-
Most asked What input types and validation attributes did HTML5 add?
Summary
Types such as email, url, tel, number, range, date, time, color and search, which bring suitable mobile keyboards and pickers and check formats. Validation attributes: required, min, max, step, minlength, maxlength and pattern. The browser blocks submission and shows messages until the constraints pass.
Longer Answer
Styling hooks include :invalid, :valid and :user-invalid. The Constraint Validation API (checkValidity, reportValidity, setCustomValidity) lets JavaScript customise the behaviour. Client-side validation is a convenience only; the server must validate everything again.
Key Points
- New input types.
- required, min/max, minlength/maxlength, pattern.
- Constraint Validation API.
- Server validation still required.
Deep dive: HTML5 for Beginners: More Form Controls and Built-in Validation
-
Most asked What is the difference between script, script async and script defer?
Summary
A plain script blocks HTML parsing while it downloads and runs. async downloads in parallel and runs as soon as it arrives, in no guaranteed order. defer downloads in parallel and runs after parsing finishes, in document order, before DOMContentLoaded.
Longer Answer
Use defer for your application scripts that depend on the DOM or on each other; use async for independent third-party scripts such as analytics. type="module" scripts are deferred by default. Placing scripts at the end of body was the old workaround.
Key Points
- Plain: blocks parsing.
- async: runs when ready, any order.
- defer: after parsing, in order.
- Modules are deferred by default.
Deep dive: Modern HTML5 in Production: Render-Blocking Scripts
-
Most asked Compare localStorage, sessionStorage and cookies.
Summary
localStorage persists per origin until cleared; sessionStorage lasts for one tab's session; both hold a few megabytes of strings, are read only by JavaScript and aren't sent to the server. Cookies are small (about 4 KB), sent with every matching HTTP request, and can be HttpOnly, Secure and SameSite.
Longer Answer
Web storage is synchronous and string-only (serialise with JSON). Never store tokens or secrets in localStorage: any XSS can read it, while HttpOnly cookies are out of JavaScript's reach. For large or structured data use IndexedDB.
Key Points
- Web storage: client only, per origin.
- sessionStorage: per tab.
- Cookies: sent with requests.
- HttpOnly cookies for session tokens.
- IndexedDB for large data.
Deep dive: HTML Tutorial: HTML Web Storage
-
Most asked What is ARIA, and what is the first rule of ARIA?
Summary
ARIA (Accessible Rich Internet Applications) attributes add roles, states and properties for assistive technology when HTML can't express something, such as aria-expanded on a custom disclosure or aria-live for announcements. The first rule: don't use ARIA if a native HTML element or attribute already does the job.
Longer Answer
ARIA changes only what assistive technology is told; it adds no behaviour or keyboard support. Wrong ARIA is worse than none (role="button" on a div that can't be focused). Common legitimate uses: aria-label for icon-only buttons, aria-describedby for error messages, aria-current for the active navigation link, aria-live regions.
Key Points
- Roles, states and properties.
- Prefer native HTML.
- ARIA adds no behaviour.
- Bad ARIA is worse than none.
Deep dive: Modern HTML5 in Production: ARIA Done Right (and Wrong)
-
Most asked What does <!DOCTYPE html> do?
Summary
It tells the browser to render the page in standards mode using modern HTML rules. Without a doctype (or with certain old ones), browsers use quirks mode, which emulates old browser bugs and changes layout behaviour.
Longer Answer
The doctype must be the first thing in the document. HTML 4 doctypes referenced a DTD and were long; HTML5's is deliberately short because browsers never used the DTD, only the presence of the doctype to choose the rendering mode.
Key Points
- First line of every page.
- Triggers standards mode.
- Missing doctype means quirks mode.
- HTML5's doctype is deliberately short.
Deep dive: HTML Tutorial: HTML Document Structure
- Why must every form field have a label, and how do you associate one?
- Why isn't client-side validation enough?
- Which head tags matter for SEO and social sharing?
- How do responsive images work with srcset, sizes and picture?
- Why set width and height on images, and when should you use loading="lazy"?
- Why use button and a instead of a clickable div?
- How do you safely display user-generated content in HTML?
- What is the difference between a tag, an element and an attribute?
- What goes in the head of an HTML document, and what goes in the body?
- What is the difference between block and inline elements?
- When should you use id and when class?
- What is the difference between article, section and div?
- How should headings be structured on a page?
- What is the difference between absolute and relative URLs?
- How do you make an HTML table accessible, and when shouldn't you use a table?
- What is the difference between GET and POST in an HTML form?
- What do the autocomplete and inputmode attributes do?
- What does the viewport meta tag do?
- What is structured data (JSON-LD), and why add it?
- What is the DOM, and how does the browser build it from HTML?
- What are data-* attributes for?
- What is the difference between canvas and SVG?
- How do you add video with captions in HTML5?
- What do the dialog element and the popover attribute provide?
- What does the sandbox attribute on an iframe do?
- What are resource hints such as preload and preconnect?
- What is the difference between strong and b, and between em and i?
- When do you use ul, ol and dl?
- Why should you declare the character encoding, and how?
- What are HTML entities and when do you need them?
- What is the details element used for?
- What is the template element?
- Is target="_blank" on links a security risk?
- Who maintains HTML today, and what is the Living Standard?
- What are web components?