Intermediate HTML Interview Questions and Answers

With GET (the default), form data is appended to the URL as a query string (/search?q=html), so it can be bookmarked and shared and appears in history and logs. Use it for searches and filters that only read data. With POST, data is sent in the request body. Use it for anything that changes data or contains personal information. Neither is encrypted by itself; HTTPS protects the data in transit.

Either give the label a for attribute matching the input's id (<label for="email"> + <input id="email">), or wrap the input inside the <label>. Screen readers then announce the label when the field is focused, and clicking the label focuses the field or toggles the checkbox, giving a larger click target.

Attributes such as required, minlength, maxlength, min, max, step and pattern, plus input types that check formats (email, url, number, date). The browser blocks submission and shows a message on the first invalid field. novalidate on the form turns it off. Client-side validation is for user convenience only; the server must validate again.

<article> is self-contained content that would make sense on its own (a blog post, a product card, a comment). <section> is a thematic part of a page or article, usually with a heading ("Pricing", "Chapter 2"). <div> has no meaning and is used only for styling or scripting when no semantic element fits.

A plain <script src> blocks HTML parsing while it downloads and runs. With defer, the script downloads in parallel and runs after the document is parsed, in the order the scripts appear. With async, it downloads in parallel and runs as soon as it arrives, in any order, which suits independent scripts such as analytics. type="module" scripts are deferred by default.

<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to lay the page out at the device's actual width instead of a virtual desktop width (often about 980 pixels) that is then zoomed out. It is required for responsive design. Avoid user-scalable=no, which prevents users from zooming.

srcset lists several versions of an image (with widths like 600w or densities like 2x), and sizes tells the browser how wide the image will be displayed, so it can download the smallest file that looks sharp. This is resolution switching. <picture> with <source media> serves a different image at different screen sizes (art direction), and <source type> offers modern formats such as AVIF or WebP with a fallback.

Custom attributes whose names start with data-, used to store extra information on elements for scripts and styles: <li data-product-id="42">. JavaScript reads them through element.dataset.productId; CSS can select them with [data-product-id="42"]. They are visible in the page source, so never store secrets in them.

<main> marks the page's primary content and creates the main landmark. Screen reader users can jump straight to it, skipping repeated headers and navigation. Only one <main> should be visible at a time, and it must not be inside <header>, <footer>, <nav>, <article> or <aside>.

sandbox applies strict restrictions to the embedded content: no scripts, no form submission, no pop-ups, no top-level navigation, and a unique (opaque) origin. You re-enable specific capabilities with tokens such as allow-scripts, allow-forms and allow-popups. Combining allow-scripts with allow-same-origin for same-origin content defeats the sandbox, because the page can remove the attribute.

The site sends an X-Frame-Options header (DENY or SAMEORIGIN) or a Content-Security-Policy frame-ancestors directive that forbids framing. This protects against clickjacking, where an attacker overlays an invisible real site under fake buttons. Only the framed site can allow embedding.

All three store data in the browser for a site. Cookies are small (about 4 KB each), sent to the server with every request, and can have expiry dates and security flags such as HttpOnly and Secure; they are used for sessions. localStorage holds more data (typically around 5 MB per origin), is never sent automatically, and persists until cleared. sessionStorage is like localStorage but lasts only for the browser tab's session. JavaScript can read localStorage and sessionStorage, so never store sensitive tokens there if you can avoid it.

Use native interactive elements (<a href>, <button>, form controls, <details>), which are focusable and keyboard-operable automatically. Keep a logical source order so Tab moves sensibly, never remove focus outlines without a visible replacement, add a "skip to main content" link, and avoid positive tabindex values, which break the natural order.

alt is the text alternative for an image and replaces it for screen readers. aria-label gives any element an accessible name when there is no visible text, such as an icon-only button. title is advisory text usually shown as a hover tooltip; it is unreliable for touch, keyboard and many screen reader users, so it should not carry essential information.