HTML Interview Questions
HTML is the foundation of every front-end and full-stack interview. These are the questions interviewers actually ask, with concise answers you can speak confidently.
17 questions with concise, interview-ready answers.
1. What is HTML?
HTML (HyperText Markup Language) is the standard markup language used to structure content on the web. It uses elements written as tags to describe headings, paragraphs, links, images, forms, and other content, which the browser then renders. HTML defines structure and meaning, while CSS handles presentation and JavaScript handles behavior.
2. What are the new features introduced in HTML5?
HTML5 added semantic elements (header, nav, section, article, footer), native audio and video tags, the canvas and SVG for graphics, and new form input types such as email, date, and number. It also introduced Web Storage (localStorage and sessionStorage), geolocation, web workers, and a simplified doctype. These features reduced the need for plugins like Flash.
3. What are semantic elements and why do they matter?
Semantic elements clearly describe their meaning to both the browser and the developer — examples include header, nav, main, article, section, aside, and footer. They make the document structure self-explanatory, improve accessibility for screen readers, and help search engines understand the content. Non-semantic elements like div and span carry no meaning about their content.
4. What is the difference between block-level and inline elements?
Block-level elements (such as div, p, h1, and ul) start on a new line and take up the full available width by default. Inline elements (such as span, a, strong, and img) flow within the text and only take up as much width as their content needs. You cannot reliably set width or top/bottom margins on inline elements the way you can with block elements.
5. What is the difference between id and class?
An id is a unique identifier that should appear only once per page, while a class can be reused on many elements. Use id for a single, specific element (and for fragment links or JavaScript references), and use class for styling groups of elements. In CSS, id selectors also have higher specificity than class selectors.
6. What is the difference between div and span?
Both are non-semantic containers with no inherent meaning, used mainly as hooks for styling and scripting. The key difference is display: div is block-level and is used to group larger sections of content, while span is inline and is used to wrap small pieces of text or content within a line.
7. What are meta tags and what are they used for?
Meta tags are placed inside the head and provide metadata about the page rather than visible content. Common ones include charset (character encoding), viewport (responsive scaling on mobile), description (used by search engines), and robots (indexing instructions). They also power social-sharing previews through Open Graph and Twitter Card tags.
8. What is the doctype and why is it required?
The doctype declaration (<!DOCTYPE html>) tells the browser which version of HTML the document uses and must be the very first line of the page. In HTML5 it is short and simple. Its main job is to make the browser render in standards mode rather than quirks mode, which ensures consistent, predictable layout behavior.
9. What is the difference between an attribute and a property?
An attribute is what you write in the HTML markup (for example value="hello"), and it sets the initial state of an element. A property is the corresponding value on the DOM object in JavaScript, which can change at runtime. For instance, typing in an input updates the value property, but the value attribute in the HTML stays the same as the original.
10. What is the alt attribute and why is it important?
The alt attribute provides alternative text for an image, describing its content or purpose. It is displayed if the image fails to load, read aloud by screen readers for accessibility, and used by search engines to understand the image. Decorative images should use an empty alt (alt="") so screen readers skip them.
11. What are some common HTML5 input types?
Beyond text and password, HTML5 added input types such as email, url, tel, number, range, date, time, color, and search. These give users better on-screen keyboards and native pickers on mobile, and they provide basic built-in validation. They improve user experience while reducing the amount of custom JavaScript needed.
12. What is the difference between GET and POST in HTML forms?
GET appends the form data to the URL as query parameters, so it is visible, bookmarkable, and limited in length — best for safe, idempotent requests like searches. POST sends the data in the request body, so it is not shown in the URL and has no practical size limit — best for submitting sensitive data or changing server state. You set this with the method attribute on the form.
13. What is the difference between localStorage, sessionStorage, and cookies?
localStorage stores data with no expiration and persists across browser sessions, while sessionStorage clears when the tab is closed. Both hold around 5–10 MB and stay on the client only. Cookies are smaller (about 4 KB) and are sent to the server with every HTTP request, which makes them suited to authentication and server-side session tracking.
14. What is an iframe?
An iframe (inline frame) embeds another HTML document inside the current page, commonly used for maps, videos, ads, or third-party widgets. It creates a separate browsing context with its own scope. Iframes carry security and performance considerations, so attributes like sandbox, loading="lazy", and proper cross-origin handling are often used.
15. What are data- attributes?
Data attributes (for example data-user-id="42") are custom attributes prefixed with data- that let you store extra information on an element without affecting its appearance. They are valid HTML and are read in JavaScript through the dataset property (element.dataset.userId). They are useful for passing small bits of state from markup to scripts.
16. What are void (self-closing) elements?
Void elements are tags that cannot have any child content and therefore have no closing tag — examples include img, br, hr, input, meta, and link. In HTML5 you can write them with or without a trailing slash (<br> or <br />); both are valid. They contrast with normal elements that wrap content and require a closing tag.
17. What is ARIA and when should you use it?
ARIA (Accessible Rich Internet Applications) is a set of attributes — such as role, aria-label, and aria-hidden — that improve accessibility for assistive technologies when native HTML is not enough. The first rule of ARIA is to use a native semantic element (like button or nav) whenever possible, and only reach for ARIA on custom widgets. Misused ARIA can make accessibility worse, so it should be applied carefully.
Get these answered live in your real interview
NostrobeAI is a real-time AI interview copilot — it hears the question and drafts a strong answer on your screen, invisible on Zoom, Meet, and Teams. One-time pricing, no subscription.
Try NostrobeAI free