Top 50 HTML Interview Questions

📚 50 Questions • 🕑 ~25 min read • Beginner–Advanced

These are the most commonly asked HTML interview questions at companies recruiting from Anna University — TCS, Infosys, Wipro, Cognizant, and web startups. Questions are arranged from Easy to Medium to Hard.

Basic (Q1–Q20) Intermediate (Q21–Q35) Advanced (Q36–Q50)

Basic HTML Questions

Q1–Q20

Q1What is HTML?Easy▼

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a web page using a series of elements (tags). HTML is not a programming language — it is a markup language.

Every web page you see in a browser starts with HTML. Browsers read the HTML and render it as visual content.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Q2What is DOCTYPE and why is it important?Easy▼

<!DOCTYPE html> is a declaration placed at the very top of an HTML file. It tells the browser which version of HTML the page is written in.

Without DOCTYPE, browsers enter "quirks mode" and try to guess the document type — this causes inconsistent rendering across different browsers.

<!DOCTYPE html> is the correct declaration for HTML5 (the current standard). It is not a tag — it is an instruction to the browser.

HTML

<!-- Always first line of every HTML document -->
<!DOCTYPE html>
<html lang="en">
...

Q3What is the difference between HTML elements and HTML tags?Easy▼

A tag is just the opening or closing marker: <p> and </p>.

An element is the complete unit — opening tag + content + closing tag:

HTML

<!-- This is one ELEMENT -->
<p>This is a paragraph.</p>
<!-- ^^^ opening tag    ^^^ closing tag -->

<!-- Void elements have no closing tag -->
<br>
<img src="photo.jpg" alt="photo">

Q4What is the difference between block-level and inline elements?Easy▼

Block-level elements start on a new line and take up the full available width. Examples: <div>, <p>, <h1>–<h6>, <section>, <ul>, <table>
Inline elements flow within text and only take as much width as their content. Examples: <span>, <a>, <strong>, <em>, <img>, <code>

HTML

<!-- block: takes full row -->
<p>This is a paragraph block.</p>
<p>This starts on the next line.</p>

<!-- inline: flows within text -->
<p>This has <strong>bold</strong> and <em>italic</em> inline.</p>

Q5What are void (self-closing) elements in HTML?Easy▼

Void elements are HTML elements that cannot have any children and do not have a closing tag. They are self-contained.

Common void elements: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed>, <param>, <source>, <track>, <wbr>

HTML

<img src="photo.jpg" alt="A photo">  <!-- no closing tag needed -->
<input type="text" placeholder="Enter name">
<br>   <!-- line break -->
<hr>   <!-- horizontal rule -->

Q6What is the difference between id and class attributes?Easy▼

id must be unique — only one element per page can have a given id. It has higher CSS specificity. Used to target a single specific element.
class can be reused on many elements. Used to group elements that share the same styling or behavior.

HTML

<!-- id: unique per page -->
<header id="main-header">...</header>

<!-- class: reusable -->
<p class="highlight">First paragraph</p>
<p class="highlight">Second paragraph</p>

<!-- Multiple classes (space-separated) -->
<div class="card featured large">...</div>

Q7What is the difference between <b> and <strong>, <i> and <em>?Easy▼

<b> — visually bold, but carries no semantic meaning
<strong> — bold + semantically "important content". Screen readers may stress this word.
<i> — visually italic, but carries no semantic meaning (often used for icons, foreign words, technical terms)
<em> — italic + semantically "emphasis". Screen readers change tone for this.

Prefer <strong> and <em> for meaningful content. Use <b> and <i> only for purely stylistic purposes.

Q8What is the difference between href and src attributes?Easy▼

href (Hypertext Reference) — specifies a link to an external resource. The browser does not embed it, it navigates to it. Used on <a> and <link>.
src (Source) — specifies a resource to embed directly into the page. The browser fetches and displays it. Used on <img>, <script>, <iframe>, <video>.

HTML

<!-- href: links to a resource -->
<a href="https://google.com">Go to Google</a>
<link rel="stylesheet" href="style.css">

<!-- src: embeds a resource -->
<img src="logo.png" alt="Logo">
<script src="app.js"></script>

Q9How do you open a link in a new tab? What security risk exists?Easy▼

Use target="_blank" on the <a> tag. But always add rel="noopener noreferrer":

HTML

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open in new tab
</a>

Security risk (Tabnapping): Without noopener, the new tab can access window.opener and redirect your original page to a phishing site. noopener prevents this. noreferrer also prevents sending the referrer header to the destination.

Q10What is the alt attribute on images and why is it important?Easy▼

The alt attribute provides alternative text for an image. It serves three purposes:

Accessibility: Screen readers read the alt text aloud for visually impaired users
Fallback: Displayed when the image fails to load
SEO: Search engines index alt text to understand the image content

HTML

<!-- Descriptive alt for meaningful images -->
<img src="profile.jpg" alt="Mohan Murugesan, software developer">

<!-- Empty alt for decorative images (tells screen reader to skip) -->
<img src="divider.png" alt="">

Q11What is the difference between absolute and relative URLs?Easy▼

Absolute URL — the complete web address including protocol and domain. Works from anywhere.
Relative URL — a path relative to the current page's location. Changes based on where the page is.

HTML

<!-- Absolute -->
<a href="https://annauniversityplus.com/courses/html/">HTML</a>

<!-- Relative (relative to current page) -->
<a href="about.html">About (same folder)</a>
<a href="../index.html">Up one folder</a>
<a href="/contact.html">Root-relative (from domain root)</a>

Q12How do you add comments in HTML?Easy▼

HTML comments use the  syntax. Comments are not displayed in the browser and are ignored by the rendering engine.

HTML

<!-- This is a comment -->
<p>This paragraph is visible.</p>

<!--
  Multi-line comment.
  Useful for leaving notes or temporarily hiding code.
-->

Note: Although comments are hidden visually, they are visible in the page source (Ctrl+U). Never put passwords or sensitive info in HTML comments.

Q13What are ordered and unordered lists? What is a description list?Easy▼

HTML

<!-- Unordered list — bullet points -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list — numbered -->
<ol>
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

<!-- Description list — term + definition pairs -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
</dl>

Q14How do you create a table in HTML?Easy▼

HTML

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Mark</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arun</td>
      <td>Maths</td>
      <td>95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td colspan="3">Total students: 1</td></tr>
  </tfoot>
</table>

<thead> — table header row(s)
<tbody> — main data rows
<tfoot> — footer row (totals, summaries)
<th> — header cell (bold, centered by default)
<td> — data cell

Q15What is the purpose of the <head> section?Easy▼

The <head> section contains metadata — information about the page that is not displayed directly in the browser. It includes:

HTML

<head>
  <meta charset="UTF-8">                    <!-- character encoding -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>              <!-- shown in browser tab -->
  <meta name="description" content="...">  <!-- SEO description -->
  <link rel="stylesheet" href="style.css">  <!-- CSS file -->
  <script src="app.js" defer></script>      <!-- JavaScript file -->
</head>

Q16What are meta tags? Name the most important ones.Easy▼

Meta tags provide metadata about the HTML document. They are placed in the <head> section and are not visible on the page.

HTML

<!-- Charset: must be first -->
<meta charset="UTF-8">

<!-- Viewport: required for mobile responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Description: shown in Google search results -->
<meta name="description" content="Free HTML tutorials for beginners.">

<!-- Robots: controls indexing -->
<meta name="robots" content="index, follow">

<!-- Open Graph: controls social media preview -->
<meta property="og:title" content="Page Title">

Q17How do you create an HTML form?Easy▼

HTML

<form action="/submit" method="POST">

  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>

</form>

Always link <label> to its input using matching for and id values — this improves accessibility and makes the label clickable.

Q18What is the difference between GET and POST form methods?Easy▼

GET — data is appended to the URL as query string (?name=Arun&age=21). Visible in browser history. Limited to ~2000 characters. Used for search forms, filters (non-sensitive data).
POST — data is sent in the HTTP request body. Not visible in URL. No size limit. Used for login forms, file uploads, sensitive data.

HTML

<!-- GET: URL becomes /search?q=html+tutorial -->
<form action="/search" method="GET">
  <input type="text" name="q">
</form>

<!-- POST: data hidden in request body -->
<form action="/login" method="POST">
  <input type="password" name="password">
</form>

Q19What are boolean attributes in HTML?Easy▼

Boolean attributes don't need a value — their mere presence means true. Absence means false.

HTML

<input type="checkbox" checked>          <!-- checked by default -->
<input type="text" disabled>             <!-- grayed out, uneditable -->
<input type="email" required>            <!-- form won't submit if empty -->
<video src="clip.mp4" autoplay muted loop></video>
<details open>...</details>             <!-- expanded by default -->

Q20What is the <iframe> element?Easy▼

<iframe> (Inline Frame) embeds another HTML page or external content directly within the current page.

HTML

<!-- Embed a YouTube video -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560" height="315"
  title="HTML Tutorial"
  allowfullscreen
></iframe>

<!-- Embed Google Maps -->
<iframe src="https://maps.google.com/..." width="400" height="300"></iframe>

Add the sandbox attribute for security when embedding untrusted content — it restricts what the iframe can do.

Intermediate HTML Questions

Q21–Q35

Q21What are semantic HTML elements? Why do they matter?Medium▼

Semantic elements clearly describe their purpose and meaning — both to the browser and to developers. They replace meaningless <div> containers.

HTML

<!-- Non-semantic (old way) -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="footer">...</div>

<!-- Semantic (correct HTML5 way) -->
<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

Benefits: Better SEO (Google understands page structure), better accessibility (screen readers navigate by landmarks), and more readable code.

Q22What is the difference between <section>, <article>, <aside>, and <div>?Medium▼

<section> — a thematic grouping of content, typically with its own heading. Could be a chapter, tab content, or a page region.
<article> — self-contained content that could stand alone and be redistributed: blog post, news article, forum post, product card.
<aside> — content tangentially related to the main content: sidebar, pull quote, related links.
<div> — a generic container with no semantic meaning. Use it when no semantic element fits.

Rule of thumb: If you can remove it and the content still makes standalone sense, it's an <article>. If it's a themed group needing a heading, it's a <section>.

Q23What new form input types were introduced in HTML5?Medium▼

HTML

<input type="email">          <!-- validates email format -->
<input type="tel">            <!-- phone number (numeric keyboard on mobile) -->
<input type="url">            <!-- validates URL format -->
<input type="number">         <!-- numeric with up/down arrows -->
<input type="range">          <!-- slider control -->
<input type="date">           <!-- date picker -->
<input type="time">           <!-- time picker -->
<input type="datetime-local"> <!-- date + time -->
<input type="color">          <!-- color picker -->
<input type="search">         <!-- search box with clear button -->
<input type="file">           <!-- file upload -->

These types enable native browser validation and mobile-appropriate keyboards without JavaScript.

Q24What are HTML5 form validation attributes?Medium▼

HTML

<input type="text" required>                        <!-- must not be empty -->
<input type="text" minlength="3" maxlength="20">    <!-- length limits -->
<input type="number" min="1" max="100">             <!-- range limits -->
<input type="text" pattern="[0-9]{6}">              <!-- regex pattern -->
<input type="email">                                  <!-- validates email format -->

<!-- Custom error message -->
<input type="text" required
  title="Please enter your full name">

Q25What are data-* (custom data) attributes?Medium▼

Data attributes allow you to store custom data on any HTML element without using non-standard attributes or class hacks.

HTML

<button data-product-id="42" data-category="electronics">
  Add to Cart
</button>

JavaScript

const btn = document.querySelector('button');
const id = btn.dataset.productId;     // "42"
const cat = btn.dataset.category;    // "electronics"

// Or using getAttribute:
btn.getAttribute('data-product-id'); // "42"

Note: data-product-id becomes dataset.productId (camelCase) in JavaScript.

Q26What is the difference between async and defer in script tags?Medium▼

Both attributes make scripts download without blocking HTML parsing. The difference is when they execute:

HTML

<!-- Normal: blocks HTML parsing while downloading and executing -->
<script src="app.js"></script>

<!-- async: downloads in parallel, executes immediately when ready -->
<!-- (may interrupt HTML parsing, order not guaranteed) -->
<script src="analytics.js" async></script>

<!-- defer: downloads in parallel, executes AFTER HTML fully parsed -->
<!-- (order preserved, best for most scripts) -->
<script src="app.js" defer></script>

Use async for independent scripts (analytics, ads) that don't depend on the DOM
Use defer for application scripts that need the DOM ready and need to run in order

Q27What is HTML5 Web Storage? Difference between localStorage and sessionStorage?Medium▼

Web Storage provides a way to store key-value data in the browser — much simpler than cookies.

localStorage — data persists even after closing the browser. Shared across all tabs on the same domain.
sessionStorage — data is cleared when the browser tab is closed. Isolated to each tab.

JavaScript

// localStorage
localStorage.setItem('username', 'Arun');
const user = localStorage.getItem('username'); // 'Arun'
localStorage.removeItem('username');
localStorage.clear();

// sessionStorage (same API, different scope)
sessionStorage.setItem('cart', '[1,2,3]');

Q28What is the <canvas> element?Medium▼

<canvas> provides a drawable area where you can create 2D graphics, animations, games, and data visualizations using JavaScript's Canvas API.

HTML

<canvas id="myCanvas" width="400" height="200"></canvas>

JavaScript

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#6366f1';
ctx.fillRect(10, 10, 150, 100);  // draw a rectangle

ctx.beginPath();
ctx.arc(200, 100, 50, 0, Math.PI * 2); // draw a circle
ctx.fill();

Q29What is the srcset attribute? How does responsive images work?Medium▼

srcset lets you provide multiple image files at different sizes. The browser automatically picks the most appropriate one based on the device's screen resolution and viewport size.

HTML

<img
  src="hero-400.jpg"
  srcset="hero-400.jpg 400w,
          hero-800.jpg 800w,
          hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="Hero image"
>

Mobile users download the smaller 400px file while desktop users get the full 1200px version — saving bandwidth.

Q30What is the <picture> element?Medium▼

<picture> gives more control than srcset. It lets you specify different image files entirely based on media queries — for example, serving a zoomed-in version on mobile:

HTML

<picture>
  <!-- Use WebP on browsers that support it -->
  <source type="image/webp" srcset="hero.webp">
  <!-- Portrait crop on mobile -->
  <source media="(max-width: 600px)" srcset="hero-portrait.jpg">
  <!-- Fallback -->
  <img src="hero.jpg" alt="Hero">
</picture>

Q31What are ARIA attributes and why are they important?Medium▼

ARIA (Accessible Rich Internet Applications) attributes help screen readers understand dynamic content that HTML alone can't describe.

HTML

<!-- role: defines element's purpose -->
<div role="button" tabindex="0">Click me</div>

<!-- aria-label: provides label when visible text isn't enough -->
<button aria-label="Close dialog">✕</button>

<!-- aria-hidden: hide decorative elements from screen readers -->
<span aria-hidden="true">🎉</span>

<!-- aria-expanded: state of collapsible content -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden>...</ul>

Q32What is the <template> element?Medium▼

The <template> element holds HTML that is not rendered when the page loads. It's a reusable blueprint — you clone it via JavaScript and insert it when needed.

HTML

<template id="card-template">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

JavaScript

const tmpl = document.getElementById('card-template');
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.card-title').textContent = 'My Card';
document.body.appendChild(clone);

Q33What is the contenteditable attribute?Medium▼

contenteditable makes any HTML element editable by the user — like a mini text editor. Setting it to "true" enables editing.

HTML

<div contenteditable="true" style="border:1px solid #ccc; padding:8px">
  Click to edit this text directly in the browser.
</div>

<!-- Prevent editing -->
<div contenteditable="false">Read only</div>

Used in rich text editors (like Google Docs, Notion). You can capture the edited content with element.innerHTML or element.textContent.

Q34What is the difference between <link rel="preload">, prefetch, and preconnect?Medium▼

These are resource hints that let the browser fetch resources proactively to improve page load speed.

HTML

<!-- preload: fetch this ASAP, it's critical for THIS page -->
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- prefetch: fetch with low priority, user might need on NEXT page -->
<link rel="prefetch" href="/next-page.html">

<!-- preconnect: establish connection early (no download yet) -->
<link rel="preconnect" href="https://fonts.googleapis.com">

Q35How does the browser render an HTML page? (Critical Rendering Path)Medium▼

The browser processes HTML in 6 steps:

Parse HTML → build the DOM tree
Parse CSS → build the CSSOM (CSS Object Model)
Combine DOM + CSSOM → Render Tree (only visible elements)
Layout (Reflow) → calculate exact position and size of each element
Paint → fill in pixels for text, colors, borders, shadows
Composite → GPU combines layers and displays on screen

Anything that triggers re-layout (changing width, height, position) causes an expensive reflow. Avoid it in animations by using transform and opacity instead.

Advanced HTML Questions

Q36–Q50

Q36What is the difference between innerHTML, innerText, and textContent?Hard▼

innerHTML — gets/sets HTML markup including all tags. Parses HTML. Can be an XSS (cross-site scripting) vulnerability if used with user input.
innerText — gets/sets the text as it's rendered — respects CSS visibility (hidden text is excluded). Slower as it triggers a reflow to compute styles.
textContent — gets/sets raw text content including hidden elements. Does NOT parse HTML. Faster and safer than innerHTML for text.

JavaScript

const el = document.querySelector('#box');
// <div id="box"><strong>Hello</strong> world</div>

el.innerHTML;     // "<strong>Hello</strong> world"
el.innerText;     // "Hello world" (rendered text)
el.textContent;   // "Hello world" (raw text, no tags)

// SAFE way to set text (no XSS risk):
el.textContent = userInput;

// DANGEROUS if userInput contains <script> tags:
el.innerHTML = userInput; // XSS vulnerability!

Q37What is Shadow DOM?Hard▼

Shadow DOM is a web standard that allows you to attach a separate, encapsulated DOM tree to an element. Styles and scripts inside the Shadow DOM do not affect the main document, and vice versa.

This is how native HTML elements like <video>, <input type="range"> are built — their internal structure is a Shadow DOM hidden from the main page.

JavaScript

const host = document.querySelector('#my-card');
const shadow = host.attachShadow({ mode: 'open' });

shadow.innerHTML = `
  <style>
    p { color: red; }  /* only affects Shadow DOM */
  </style>
  <p>Shadow content</p>
`;

Shadow DOM is a key part of Web Components. mode: 'open' means JavaScript outside can access it; 'closed' means it's fully private.

Q38What are Web Components?Hard▼

Web Components are a set of 3 browser APIs that let you create reusable custom HTML elements:

Custom Elements — define your own HTML tags with custom behavior
Shadow DOM — encapsulate styles and markup (covered in Q37)
HTML Templates — reusable markup via <template> (covered in Q32)

JavaScript

// Define a custom element
class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button style="background:purple;color:white">
      ${this.getAttribute('label') || 'Click'}
    </button>`;
  }
}
customElements.define('my-button', MyButton);

HTML

<!-- Now use your custom element -->
<my-button label="Submit"></my-button>

Q39What is structured data / Schema.org markup?Hard▼

Structured data (Schema.org) is a standardized format for providing information about a page that helps Google understand the content and show rich results in search (star ratings, FAQs, breadcrumbs).

HTML

<!-- JSON-LD format (recommended by Google) -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "What is HTML?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "HTML stands for HyperText Markup Language..."
    }
  }]
}
</script>

Q40What is the difference between <link> stylesheet and @import for CSS?Hard▼

<link> — loads the CSS in parallel with the page. Preferred. No blocking.
@import (inside CSS) — the browser must first download the CSS file, then discover the @import and download another file. This is sequential and slower.

HTML

<!-- PREFERRED: loads in parallel -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="theme.css">

CSS

/* SLOWER: must wait for style.css before finding theme.css */
@import url('theme.css');

Always use <link> instead of @import for external stylesheets to avoid sequential loading bottlenecks.

Q41What is the tabindex attribute?Hard▼

tabindex controls keyboard Tab navigation order and focusability of elements.

tabindex="0" — element joins the natural tab order (focusable)
tabindex="-1" — focusable via JavaScript but not via Tab key (used for programmatic focus on modals)
tabindex="1" or higher — overrides natural order (generally avoid this)

HTML

<!-- Make a div keyboard-focusable -->
<div role="button" tabindex="0">Custom button</div>

<!-- Focus trap for modals -->
<div id="modal" tabindex="-1">...</div>

Q42What is the iframe sandbox attribute?Hard▼

The sandbox attribute restricts what an iframe can do — it applies a set of restrictions to the embedded content by default, and you opt-in only to the features you need.

HTML

<!-- Maximum restriction (no JS, no forms, no popups) -->
<iframe src="ad.html" sandbox></iframe>

<!-- Allow specific capabilities -->
<iframe src="app.html"
  sandbox="allow-scripts allow-forms allow-same-origin">
</iframe>

allow-scripts — allow JavaScript
allow-forms — allow form submission
allow-same-origin — allow same-origin access
allow-popups — allow window.open()

Q43What is the <base> element?Hard▼

The <base> element specifies the base URL for all relative URLs in the document. Only one per page, placed in <head>.

HTML

<head>
  <base href="https://annauniversityplus.com/courses/" target="_blank">
</head>

<!-- This link resolves to: https://annauniversityplus.com/courses/html/ -->
<a href="html/">HTML Course</a>

Q44What is progressive enhancement?Hard▼

Progressive enhancement is a design philosophy: start with a solid baseline that works for everyone (basic HTML), then enhance with CSS (styling) and JavaScript (interactivity) for browsers that support it.

Graceful degradation is the opposite: build the full experience first, then ensure it degrades acceptably on older browsers.

Progressive enhancement is generally considered the better approach because:

Core content is always accessible (even with JavaScript disabled)
Works on slow connections, old browsers, assistive technology
Better SEO (content visible to crawlers without JS)

Q45What are Web Workers?Hard▼

Web Workers allow JavaScript to run in background threads separate from the main UI thread. This prevents heavy computation from freezing the browser.

JavaScript

// main.js — create a worker
const worker = new Worker('worker.js');
worker.postMessage({ data: bigArray }); // send data to worker
worker.onmessage = (e) => {
  console.log('Result:', e.data.result);
};

JavaScript

// worker.js — runs in background thread
onmessage = (e) => {
  const result = e.data.data.reduce((a, b) => a + b, 0);
  postMessage({ result });
};

Workers cannot access the DOM. They communicate with the main thread via postMessage.

Q46What is CORS (Cross-Origin Resource Sharing)?Hard▼

CORS is a browser security mechanism that controls how web pages request resources from a different origin (domain, protocol, or port) than the one that served the page.

By default, browsers block cross-origin requests. The server must explicitly allow them via CORS headers:

HTTP Header

# Server response header that allows cross-origin requests
Access-Control-Allow-Origin: https://annauniversityplus.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

A common error: "Access to fetch blocked by CORS policy" — means the server hasn't set these headers. This is a server-side fix, not a client-side one.

Q47What is the <noscript> tag?Hard▼

<noscript> defines content that is shown only when JavaScript is disabled or not supported in the browser.

HTML

<noscript>
  <p>This site requires JavaScript to be enabled. Please enable it in your browser settings.</p>
</noscript>

<!-- Also used in <head> for meta redirects as fallback -->
<noscript>
  <meta http-equiv="refresh" content="0; url=/no-js.html">
</noscript>

Q48What is lazy loading in HTML?Hard▼

Lazy loading defers the loading of off-screen images and iframes until the user scrolls near them. It's built into HTML5 with the loading attribute.

HTML

<!-- Lazy load images below the fold -->
<img src="photo.jpg" alt="Photo" loading="lazy">

<!-- Eager loading for images above the fold (default) -->
<img src="hero.jpg" alt="Hero" loading="eager">

<!-- Lazy load iframes -->
<iframe src="video.html" loading="lazy"></iframe>

Benefits: faster initial page load, less bandwidth usage, better Core Web Vitals score. Never lazy-load the hero/above-the-fold image as it delays LCP.

Q49What is the form enctype attribute?Hard▼

enctype specifies how form data is encoded before sending to the server. It only applies to method="POST".

HTML

<!-- Default: key=value pairs, spaces become + signs -->
<form enctype="application/x-www-form-urlencoded">

<!-- REQUIRED for file uploads -->
<form method="POST" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Sends data as plain text (rarely used) -->
<form enctype="text/plain">

Always use multipart/form-data when your form includes file uploads (<input type="file">).

Q50What is the difference between HTML4 and HTML5?Hard▼

HTML5 is the current standard (2014–now). Key additions over HTML4:

Semantic elements: <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>
Media elements: <video>, <audio>, <canvas>, <svg>
Form improvements: New input types (email, date, range, color), native validation
APIs: localStorage, sessionStorage, Web Workers, Geolocation, Drag & Drop, History API
No more needed: Removed deprecated tags like <font>, <center>, <frame>
Simpler DOCTYPE: <!DOCTYPE html> vs the long HTML4 DOCTYPE

← Interview Overview CSS Questions →