HTML Interview Questions

Semantic HTML uses elements that describe their meaning — <header>, <nav>, <main>, <article>, <button> — rather than generic <div>s. It improves accessibility (screen readers expose landmarks and roles), SEO (search engines understand the main content) and maintainability.

It tells the browser to render the page in standards mode. Without it, browsers fall back to “quirks mode”, which emulates old, inconsistent behaviour.

Block elements (div, p, h1) start on a new line and take the full available width. Inline elements (span, a, strong) flow within text and only take the width of their content. CSS display can change either.

Screen readers read alt text aloud, it is shown if the image fails to load, and search engines use it to understand the image. Decorative images should use alt="".

<strong> marks text as important (semantic) and may be announced with emphasis by assistive technology. <b> only draws attention stylistically without implying importance.

HTML (HyperText Markup Language) describes the structure and meaning of content: this is a heading, this is a list, this is a link. It is a markup language, not a programming language — it has no variables, conditions or loops. CSS handles presentation and JavaScript handles behaviour.

Elements that cannot have content or a closing tag, such as <img>, <br>, <hr>, <input>, <meta> and <link>. In HTML you write <br>; the trailing slash in <br /> is allowed but optional.

An id must be unique in the page and identifies one element — useful for fragment links (#contact), label for= and JavaScript lookups. A class can be shared by many elements and an element can have many classes, which makes classes the right tool for styling.

An absolute URL includes the scheme and host (https://example.com/about) and is needed for links to other sites. A relative URL (about.html, ../img/logo.png, /contact) is resolved against the current page and keeps internal links working when the domain changes.

Use <ul> when order does not matter (features, navigation), <ol> when it does (steps, rankings) and <dl> for name–value pairs (glossaries, metadata) with <dt> and <dd>. Screen readers announce the list type and item count.

Only for tabular data — rows and columns that relate — never for page layout. Add a <caption>, put headings in <th> with scope="col" or scope="row", and group rows with <thead> and <tbody> so assistive technology can announce headers for each cell.

No. Client-side validation improves user experience but can be bypassed with developer tools or by sending requests directly. The server must always validate input.

<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to use the device width as the layout width, which is essential for responsive design.

Associate every input with a <label for>, use the correct input types, group related fields with <fieldset> and <legend>, provide clear error messages linked with aria-describedby, and make sure everything works with the keyboard.

They store custom data on elements without non-standard attributes. JavaScript reads them through element.dataset, e.g. data-user-id becomes dataset.userId.

GET puts the fields in the query string; it is bookmarkable and cacheable, so it suits searches and filters. POST sends the fields in the request body and is used for anything that changes data or contains sensitive values. Neither is encrypted without HTTPS.

A label gives the input an accessible name that screen readers announce, and clicking the label focuses the input — a bigger tap target. Connect them with <label for="email"> and <input id="email">, or wrap the input inside the label. A placeholder is not a replacement.

email, url, tel, number, date, time, color, range and search. They bring built-in validation (email, url), the right on-screen keyboard on mobile (tel, email, number) and native pickers (date, color) without JavaScript.

Use srcset with width descriptors and sizes so the browser picks the smallest file that looks sharp, and <picture> with <source> when you need different crops or formats (AVIF, WebP) with a fallback <img>. Always set width and height to prevent layout shift.

1<img src="hero-800.jpg"
2     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
3     sizes="(max-width: 600px) 100vw, 50vw"
4     width="800" height="450" alt="Students coding together">

ARIA attributes (role, aria-label, aria-expanded, aria-live…) add accessibility information that HTML cannot express. The first rule of ARIA is not to use it when a native element exists: a <button> already has the role, focus and keyboard support that a div with role="button" lacks.

<article> is self-contained content that makes sense on its own (a post, a product card). <section> is a thematic group of content that normally has a heading. <div> has no meaning and is only a styling or scripting hook.

Use <video controls> with several <source> elements in different formats, a <track kind="captions" srclang="en"> pointing to a WebVTT file, and fallback text or a download link inside the element. Avoid autoplay with sound.

Both download the script without blocking HTML parsing. async executes as soon as it downloads, in any order. defer executes after parsing finishes, in document order. Module scripts are deferred by default.

An iframe can run third-party code and can be used for clickjacking. The sandbox attribute removes capabilities (scripts, forms, same-origin access, top navigation) unless explicitly re-enabled, and X-Frame-Options/frame-ancestors prevent your pages being framed.

A unique <title> and meta description, <link rel="canonical"> to avoid duplicates, the viewport meta tag for mobile, Open Graph and Twitter tags (og:title, og:image) for link previews, hreflang for translated pages and robots meta when a page should not be indexed.

The parser builds the DOM top to bottom. Stylesheets in the head block rendering until they load, and classic <script> tags block parsing while they download and run. Use defer or type="module" for scripts, preload critical assets and inline only small critical CSS.

A div is not focusable, is not announced as a button and does not respond to Enter or Space. Rebuilding that needs tabindex, role and key handlers — and is still easy to get wrong. A <button type="button"> gives all of it for free. Use <a href> for navigation and <button> for actions.

A native modal or non-modal dialog. showModal() makes the rest of the page inert, traps focus inside, closes on Escape and renders in the top layer above all z-index stacking. A form with method="dialog" closes it and sets returnValue.

Add loading="lazy" to <img> and <iframe>. The browser defers below-the-fold resources until the user scrolls near them. Do not lazy-load the hero or LCP image — give that one fetchpriority="high" instead.