Navigate by Range

HTML Interview Questions 11-15 (DOM, Storage, Debugging, Scripts)

Welcome to the browser mechanics module. Writing HTML tags is just the beginning. To be a Full Stack or Frontend engineer, you need to understand how the browser takes that text and turns it into an interactive experience.

In this lesson, we bridge the gap between HTML and JavaScript. We will explore the DOM (the environment your JS lives in), local storage (how to remember users), and performance-critical concepts like script loading. These questions test your depth of knowledge beyond simple syntax.

11. What is the DOM (Document Object Model)?

The DOM is an interface (API) that treats an HTML document as a tree structure. When a browser loads a page, it doesn't just display pixels; it creates a memory model of every element on the page.

Why does it matter?
HTML is just text. JavaScript cannot understand "text". JavaScript understands Objects. The DOM converts HTML tags into Objects that JavaScript can interact with, modify, or delete.

Document: The root object (the entry point).
Nodes: Every tag, text snippet, or attribute is a node in the tree.

// The HTML: <h1 id="title">Hello</h1>

// JavaScript accessing the DOM node
const heading = document.getElementById("title");

// Modifying the DOM (which updates what the user sees)
heading.style.color = "red";
heading.innerText = "Hello World!";

12. What are HTML5 storage APIs (localStorage and sessionStorage)?

Before HTML5, we only had Cookies (which are small and sent to the server with every request). HTML5 introduced Web Storage, which allows you to store key-value pairs in the browser locally.

Feature	localStorage	sessionStorage
Lifespan	Persistent. Stays until explicitly deleted by code or user.	Temporary. Cleared when the browser tab/window is closed.
Scope	Shared across all tabs/windows of the same origin.	Restricted to the specific tab where it was set.
Use Case	Dark mode preference, Auth tokens, Shopping cart.	One-time form data, specific transaction details.

// 1. Save Data (Must be strings)
localStorage.setItem("theme", "dark");
localStorage.setItem("user", JSON.stringify({ id: 1, name: "Alice" }));

// 2. Retrieve Data
const theme = localStorage.getItem("theme");
const user = JSON.parse(localStorage.getItem("user"));

console.log(theme); // Output: "dark"

// 3. Remove Data
localStorage.removeItem("theme");
localStorage.clear(); // Removes everything

13. Scenario: Debug broken HTML structure (unclosed tags or nesting issues).

This scenario tests your attention to detail. Browsers are very forgiving; they try to fix your mistakes, but often do it incorrectly, leading to layout bugs that CSS cannot fix.

Common Issue 1: Unclosed Tags
If you forget to close a <div>, the browser might think the entire footer is inside that div, breaking your grid layout.

Common Issue 2: Illegal Nesting
You cannot put a Block element (like <div> or <p>) inside an Inline element (like <span> or <p>).

<p>
  This is a paragraph with a
  <div>big block inside it.</div> </p>

<p>This is a paragraph with a</p>
<div>big block inside it.</div>
<p></p>

How to debug:
Always check the "Elements" panel in Chrome DevTools. It shows the DOM(how the browser interpreted your code), not just your source code. If the DOM looks different from your code, you have a syntax error.

14. What is the purpose of the <!DOCTYPE html> declaration?

It looks like a tag, but it isn't. It is an instruction to the browser. It must be the very first line of your file.

The Purpose: Switching Modes
Browsers have two main rendering modes:

Standards Mode: The browser renders the page using modern HTML5 and CSS3 specifications. This is what you want.
Quirks Mode: If the DOCTYPE is missing, the browser assumes the page is from the late 90s. It emulates old bugs (like incorrect Box Model handling) to prevent breaking ancient websites.

Summary: <!DOCTYPE html> tells the browser, "This is modern HTML5, please don't use Quirks Mode."

15. What is the difference between <script>, <script async>, and <script defer>?

This is one of the most important performance questions. It determines how fast your page loads. HTML parsing stops when it hits a normal script tag, which blocks rendering.

Type	Download Behavior	Execution Behavior	Best For
`<script>`	Stops HTML parsing immediately to download.	Runs immediately after download.	Critical scripts required before the page shows (rare).
`async`	Downloads in parallel (does not stop HTML).	Pauses HTML parsing to run as soon as it finishes downloading.	Independent scripts like Ads or Analytics (Google Analytics).
`defer`	Downloads in parallel (does not stop HTML).	Runs only after HTML parsing is fully complete.	Your main application code (React, logic) that needs the DOM.

Key Takeaway: For 99% of your own code, use defer. It guarantees the DOM is ready before your script runs and respects the order of scripts.

<head>
  <script async src="https://analytics.google.com/analytics.js"></script>
  
  <script defer src="app.js"></script>
</head>

Previous Next

🚀 Deep Dive With AI Scholar