HTML Interview Questions

Think about the two rendering modes browsers have.

<!DOCTYPE html> tells the browser to render the page in standards mode. Without it, browsers fall back to quirks mode, which imitates bugs of very old browsers, so layout and sizing can behave differently. It is an instruction, not an element, and must be the first line.

Which ones start on a new line?

Block elements (<div>, <p>, <h1>, <section>) start on a new line and take the full available width. Inline elements (<span>, <a>, <strong>) flow within a line of text and are only as wide as their content; width, height and vertical margins do not apply to them. CSS display can change either.

Who reads your HTML besides the browser's renderer?

Choosing elements for their meaning (<nav>, <main>, <article>, <button>, headings) instead of generic <div>s. It helps screen reader users navigate by landmarks and headings, helps search engines understand the page, gives built-in keyboard behaviour to interactive elements, and makes code easier to maintain.

Would the content make sense on its own?

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

What should a screen reader user hear instead of the image?

Alt text should briefly describe what the image shows or means in context, without "image of". For a linked image, describe the destination. For purely decorative images use alt="" so screen readers skip them; never omit the attribute, or some screen readers read the file name.

There are two ways.

Use <label for="email"> with <input id="email">, or wrap the input inside the label. Screen readers then announce the label with the field, and clicking the label focuses the field or toggles the checkbox, giving a larger target. Placeholders are not a substitute for labels.

Where does the data go?

GET (the default) adds the data to the URL (?q=html): bookmarkable, saved in history and logs, so only for searches and filters. POST sends data in the request body; use it for anything that changes data or is personal. Only HTTPS encrypts the data in either case.

Who can bypass browser checks?

Attributes such as required, minlength, maxlength, min, max, step and pattern, plus input types like email and url, make the browser check fields before submitting. It is a convenience for users only: anyone can bypass it, so the server must validate again.

When does each run, and is order kept?

Both download the script without blocking HTML parsing. defer runs scripts after the document is parsed, in order: use it for your own scripts. async runs each script as soon as it downloads, in any order: use it for independent scripts such as analytics. type="module" scripts are deferred by default.

What do phones do without it?

<meta name="viewport" content="width=device-width, initial-scale=1"> makes mobile browsers lay the page out at the device's real width instead of a virtual desktop width that is then zoomed out. It is required for responsive design. Do not disable user zooming.

Resolution switching versus art direction.

srcset lists image files with their widths and sizes says how wide the image is displayed, so the browser downloads the smallest sharp-enough file. <picture> with <source media> serves different crops for different screens, and <source type> offers modern formats like AVIF or WebP with fallbacks.

ARIA changes what is announced, not what happens.

If a native HTML element already provides the meaning and behaviour you need, use it instead of ARIA. A <button> gets focus, keyboard activation and the button role for free; <div role="button"> needs all of that added manually. Wrong ARIA is worse than none.

Look at nesting, ids, alt text and interactive elements.

<p>Our products:
  <ul><li>Pens</li></ul>
</p>
<img src="shop.jpg">
<div id="box"></div><div id="box"></div>
<div onclick="buy()">Buy</div>

• A <ul> cannot be inside a <p>; the browser closes the paragraph early.
• The image has no alt text.
• The id "box" is used twice; ids must be unique.
• The clickable <div> should be a <button>, so it works with the keyboard and is announced correctly.

Think about sandbox and why some sites refuse to be framed.

Give the iframe a descriptive title, loading="lazy", and a sandbox attribute with only the permissions it needs (such as allow-scripts). Never combine allow-scripts with allow-same-origin for same-origin content. Sites protect themselves from being framed (clickjacking) with X-Frame-Options or CSP frame-ancestors.