REVIEWED STARTER COLLECTION

HTML Interview Questions

Short answer se start karo, phir interview-level explanation, small HTML example aur common follow-up revise karo. Ye collection canonical HTML tutorial ko duplicate ya replace nahi karta.

1. What is semantic HTML and why is it important?

Short Answer

Semantic HTML uses elements whose names describe their purpose, such as <main>, <nav>, <article> and <footer>.

Detailed Explanation

Semantic elements make document structure easier for developers, browsers and assistive technologies to understand. They can improve accessibility and maintainability, and they give search engines clearer structural signals.

<main>
  <article>
    <h1>CSS Basics</h1>
    <p>Learn the fundamentals.</p>
  </article>
</main>
Learn this concept →

2. What does <!doctype html> do?

Short Answer

It tells the browser to render the document using modern HTML standards mode.

Detailed Explanation

The doctype is a declaration placed before the <html> element. In modern HTML it is intentionally simple. Omitting it can cause browsers to enter quirks mode, where some legacy layout behavior is used.

<!doctype html>
<html lang="en">
  <head>...</head>
  <body>...</body>
</html>
Learn this concept →

3. What is the difference between id, name and label for in a form?

Short Answer

id uniquely identifies an element in the document, name identifies the submitted form field, and a label's for value connects the label to the matching input id.

Detailed Explanation

The id is useful for DOM references, fragment links and label association. The name becomes the key used when successful form controls are submitted. Proper label association improves usability and accessibility.

<label for="email">Email</label>
<input id="email" name="email" type="email">
Learn this concept →

4. What is the purpose of the alt attribute on an image?

Short Answer

alt provides a text alternative that communicates the image's purpose or content when the image cannot be perceived visually.

Detailed Explanation

Useful alt text depends on context. Informative images need concise meaningful text, while purely decorative images commonly use alt="" so assistive technology can ignore them.

<img
  src="sales-chart.png"
  alt="Quarterly sales increased from Q1 to Q4"
>
Learn this concept →

5. Why should you use a native <button> instead of a clickable <div> for actions?

Short Answer

A native <button> already has button semantics and built-in keyboard interaction, while a plain <div> does not.

Detailed Explanation

Using the correct native element reduces custom accessibility work. A clickable div typically needs extra keyboard handling, focus behavior and semantic roles just to imitate what a button already provides.

<button type="button">Open menu</button>

<!-- Avoid using a plain div as a button -->
<div onclick="openMenu()">Open menu</div>
Learn semantics →Learn form controls →