74 questions - Beginner friendly
HTML gives a web page its structure. Almost every frontend interview starts here, because clean HTML usually means clean CSS and JavaScript too. Read each answer once and say it back in your own words.
Last updated:
The first questions in almost every frontend interview.
HTML means HyperText Markup Language. It is not a programming language. It is a markup language: you use tags to say what each piece of content is. This is a heading. This is a paragraph. This is an image. The browser reads those tags and draws the page.
HTML5 is the newest version of HTML. It added meaning tags like header, nav, main, article and footer. It added new input types like email, date and number. It added audio, video and canvas, so you no longer need Flash. It also added local storage and other browser APIs. Today "HTML" almost always means HTML5.
A tag is the text you type, like <p>. An element is the full thing: the opening tag, the content inside, and the closing tag. So <p>Hello</p> is one element made of two tags.
<p>Hello</p>
<!-- <p> and </p> are tags. The whole line is one element. -->An attribute is extra information you write inside the opening tag. The shape is always name="value". For example href tells a link where to go. src tells an image which file to load.
<a href="/pricing" title="See plans">Pricing</a>
<img src="/logo.png" alt="Company logo" />It tells the browser that this page is HTML5. The browser then follows the modern rules, called standards mode. If you forget it, the browser uses quirks mode and copies old broken behaviour from the 1990s. Your CSS box sizes can then go wrong.
Doctype first. Then <html>. Inside it, <head> holds information about the page. <body> holds the content people actually see.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My page</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html><head> holds information about the page: the title, the character set, CSS links, meta tags for SEO. Nothing inside <head> is drawn on the screen. <body> holds everything the user sees and clicks.
It tells the browser which character set to use while reading the file. UTF-8 covers almost every language and symbol. Without it, names, the rupee sign and emojis can turn into strange boxes.
It tells a mobile browser to use the real width of the phone. Without it, the phone pretends to be a 980px desktop. Your responsive CSS then does not work and the page looks zoomed out.
<meta name="viewport" content="width=device-width, initial-scale=1" />A block element starts on a new line and takes the full width it can. Examples: <div>, <p>, <h1>. An inline element stays inside the line of text and takes only the width it needs. Examples: <span>, <a>, <strong>.
They are elements that cannot hold anything inside, so they have no closing tag. Common ones are <br>, <hr>, <img>, <input>, <meta> and <link>.
Both have no meaning of their own. They are only boxes. <div> is a block box used for layout sections. <span> is an inline box used to wrap a few words inside a sentence.
The <h1> is the main title of the page. Screen readers and search engines use it to know what the page is about. Many <h1> tags make that unclear. Use <h2> and <h3> for the parts below it, in order, without skipping a level.
Entities are codes for characters that you cannot type directly. Some characters have a meaning in HTML, so writing them plainly would break the page. Write < for <, > for >, & for &, and for a space that never breaks a line.
<p>Use <div> for layout</p>
<!-- shows: Use <div> for layout -->
<p>Rs 999</p>
<!-- the price never splits across two lines -->Put the text between <!-- and -->. The browser ignores it. Remember that anyone can still read it with view-source, so never write secrets there.
<!-- This note is only for developers -->An id must be unique on the page and points to one element. A class can be used on many elements and gives the same style or behaviour to a group. In CSS you select an id with # and a class with a dot.
They let you store your own data on an element without breaking HTML rules. JavaScript reads them through the dataset property. They are useful for linking a button to a record id.
<button data-user-id="42" data-role="admin">Edit</button>
<script>
const btn = document.querySelector("button");
console.log(btn.dataset.userId); // "42"
</script>DOM means Document Object Model. When the browser reads your HTML, it builds a tree of objects in memory. Every tag becomes a node in that tree. JavaScript changes the page by changing this tree, not the HTML file. That is why the page updates without a reload.
XHTML is a stricter HTML written with XML rules. Every tag must be closed, tags must be lowercase, and every attribute value must be in quotes. One small mistake breaks the whole page. HTML5 forgives such mistakes, so XHTML is rare today.
Using the right tag for the right meaning.
Semantic HTML means picking tags that describe the meaning of the content, not the look. <header>, <nav>, <main>, <article>, <aside> and <footer> each say what that block is for. A screen reader, a search engine and a new developer can then understand the page faster.
<body>
<header>Logo and site title</header>
<nav>Menu links</nav>
<main>
<article>The blog post</article>
<aside>Related links</aside>
</main>
<footer>Contact and copyright</footer>
</body>Three reasons. Accessibility: a screen reader can jump straight to the main content or the menu. SEO: search engines understand the page structure. Maintenance: the code reads like a description of the page instead of a wall of divs.
An <article> makes sense on its own: a blog post, a news item, a product card. A <section> is one part of a bigger page, like the "Features" part of a landing page. Simple test: if you could copy it out and publish it alone, it is an article.
Once per page, around the main content of that page. Things that repeat on every page stay outside it: the header, the side menu, the footer. Browsers use <main> for the "skip to content" shortcut.
<strong> and <em> carry meaning: high importance and emphasis. A screen reader changes its tone for them. <b> and <i> only change the look and add no meaning. Use <strong> and <em> when the meaning matters.
<figure> wraps content that the text refers to, like an image, a chart or a code block. <figcaption> gives it a caption. The browser then knows that this caption belongs to that image.
<figure>
<img src="chart.png" alt="Sales grew 40 percent in 2025" />
<figcaption>Sales growth in 2025</figcaption>
</figure>It marks a date or a time so machines can read it. People read the text inside. Machines read the datetime attribute.
<time datetime="2026-03-14">14 March 2026</time>They make an open and close block with no JavaScript. <summary> is the line the user clicks. Everything else inside <details> is hidden until the user opens it. They are the simplest way to build an FAQ or a "read more" block.
<details>
<summary>What is the refund policy?</summary>
<p>Full refund within 7 days.</p>
</details>It is a built-in modal box. Call showModal() to open it and close() to close it. The browser handles the dark background, the focus trap and the Escape key for you. Before <dialog>, developers had to build all of that by hand.
<dialog id="box">
<p>Saved.</p>
<button onclick="box.close()">OK</button>
</dialog>
<script>box.showModal();</script>It holds HTML that the browser reads but does not show. You copy it with JavaScript when you need it. It is useful for repeating rows in a list without building HTML strings by hand.
<template id="row">
<li class="item"></li>
</template>
<script>
const tpl = document.getElementById("row");
const node = tpl.content.cloneNode(true);
document.querySelector("ul").appendChild(node);
</script>Loading content the right way.
It describes the image in words. A screen reader reads it out. The browser also shows it when the image fails to load. If the image is only decoration, write alt="" so the screen reader skips it instead of reading the file name.
src means "download this file and put it inside this element". It is used by <img>, <script> and <iframe>. href means "this points to another resource". It is used by <a> and <link>. In short: src embeds, href points.
When you open a link with target="_blank", the new page gets a link back to your page through window.opener. A bad site can use it to change your page. noopener removes that link back. noreferrer also hides where the visitor came from. New browsers add noopener on their own, but writing it is still safe.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open</a>Use srcset to list several image sizes. Use sizes to tell the browser how wide the image will be on screen. The browser then picks the smallest file that still looks sharp.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Team photo"
/>It lets you send completely different images in different cases. For example a modern WebP file for new browsers and a JPG for old ones. The browser uses the first <source> that matches. If none match, it uses the <img> inside.
<picture>
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Hero" />
</picture>Adding loading="lazy" tells the browser to download that image or iframe only when the user scrolls near it. The first paint becomes much faster. Do not use it on the image at the top of the page, because that one is needed at once.
<img src="big.jpg" alt="Gallery" loading="lazy" />Use <audio> and <video>. Add the controls attribute so the user gets play and volume buttons. Put a few <source> tags inside for different formats, and plain text at the end for very old browsers.
<video controls width="600" poster="thumb.jpg">
<source src="clip.webm" type="video/webm" />
<source src="clip.mp4" type="video/mp4" />
Your browser cannot play this video.
</video>An iframe puts another page inside your page, like a YouTube video or a map. It is risky because you are running content from another website. Add the sandbox attribute to limit what it can do. Never embed a site you do not trust.
The part of HTML that interviewers dig into most.
GET puts the data in the URL. You can see it, bookmark it and share it, but the length is limited. It suits search. POST sends the data in the request body. It is not shown in the URL and can be large. It suits creating or changing data.
A label tells the user and the screen reader what the field is for. Clicking the label also focuses the field, which helps a lot on mobile. Connect them with the for attribute matching the input id, or put the input inside the label.
<label for="email">Email</label>
<input id="email" name="email" type="email" />email, url, tel, number, range, date, time, color, search and more. You get free checking from the browser. On mobile you also get the right keyboard: a number pad for tel, an @ key for email.
A placeholder is a hint that disappears when the user starts typing. So it cannot be the only description. A label always stays visible. Using a placeholder in place of a label is a common accessibility mistake.
Attributes like required, min, max, minlength, maxlength, pattern and type make the browser check the value before the form is sent. The browser also shows the error message. Add novalidate on the form if you want to do all checks in JavaScript.
<input
type="text"
name="pin"
required
pattern="[0-9]{6}"
title="Enter a 6 digit PIN code"
/>A disabled field cannot be focused or edited, and it is not sent with the form. A readonly field cannot be edited, but it can be focused and copied, and it is still sent with the form.
It is the key used when the form data goes to the server. Without a name, the value is simply not sent. The id is only for labels, CSS and JavaScript.
By giving them the same name attribute. Only one radio in a group can be selected. Checkboxes with the same name are all sent, so they act like a multi-select list.
<input type="radio" name="plan" value="monthly" id="m" /><label for="m">Monthly</label>
<input type="radio" name="plan" value="yearly" id="y" /><label for="y">Yearly</label><fieldset> groups related fields together. <legend> gives that group a title. A screen reader reads the legend before each field in the group, which helps a lot with a set of radio buttons.
Use input type="file". The form needs method="post" and enctype="multipart/form-data". Without that enctype, only the file name is sent, not the file. Add accept to limit file types and multiple to allow more than one file.
<form method="post" enctype="multipart/form-data">
<input type="file" name="resume" accept=".pdf,.docx" />
<button type="submit">Upload</button>
</form>It tells the browser what kind of value the field expects, so the browser can fill it from saved data. Correct values like autocomplete="email" or "one-time-code" make forms much faster, above all on mobile.
Both send the form. <button> can hold HTML inside it, like an icon plus text, so it is more flexible. Note that a <button> inside a form submits by default. Set type="button" when it should not submit.
It gives an input a list of suggestions, but the user can still type any value. It works like an autocomplete dropdown with no JavaScript.
<input list="cities" name="city" />
<datalist id="cities">
<option value="Bengaluru"></option>
<option value="Pune"></option>
</datalist>Small topics that still show up in interviews.
<table> wraps everything. <caption> names it. <thead> holds the header row, <tbody> holds the data rows and <tfoot> holds totals. Header cells use <th> and data cells use <td>.
<table>
<caption>Monthly sales</caption>
<thead>
<tr><th scope="col">Month</th><th scope="col">Total</th></tr>
</thead>
<tbody>
<tr><td>March</td><td>12,000</td></tr>
</tbody>
</table>It says whether that header belongs to a column or to a row. A screen reader uses it to read the right header while the user moves between cells. A blind user then knows that "12,000" is the March total.
A table means "this is data in rows and columns". Using it for layout confuses screen readers, makes responsive design very hard and gives messy HTML. Use CSS grid or flexbox for layout.
<ul> is an unordered list, used when the order does not matter. <ol> is an ordered list, used when the order matters, and items get numbers. <dl> is a description list of term and meaning pairs, written with <dt> and <dd>.
colspan makes one cell stretch across several columns. rowspan makes one cell stretch down several rows. Both are used for merged header cells.
A topic that separates a junior from a mid-level candidate.
It means building pages that people with disabilities can use. That includes people using a screen reader, people who cannot use a mouse, and people with low vision or colour blindness. Good accessibility usually improves SEO and helps every user too.
ARIA means Accessible Rich Internet Applications. It is a set of extra attributes, such as role, aria-label and aria-expanded. They describe custom widgets to screen reader software. The first rule of ARIA is simple: if a normal HTML element already does the job, do not use ARIA.
It gives an element a name when there is no visible text. A button with only an X icon should have aria-label="Close dialog". Without it, a screen reader just says "button".
<button aria-label="Close dialog">
<svg aria-hidden="true">...</svg>
</button>tabindex="0" puts an element into the normal keyboard tab order. tabindex="-1" makes it focusable only from JavaScript, which helps when you move focus into a modal. Positive numbers break the natural order, so avoid them.
It is a link at the very top of the page that jumps straight to the main content. Without it, keyboard users must tab through the whole menu on every page. It is usually hidden until it gets focus.
<a class="skip-link" href="#main">Skip to main content</a>
...
<main id="main">...</main>Because real elements already come with keyboard support, focus behaviour and correct announcements. A real <button> works with Enter and Space and is read as a button. A <div onclick> gives you none of that until you build it all again by hand.
It hides an element from screen readers while keeping it visible on screen. Use it for icons that are only decoration. Never put it on something the user can focus, or a keyboard user will land on an element that says nothing.
Modern browser features usually asked at the end of the round.
localStorage keeps data until you delete it and holds about 5MB. sessionStorage keeps data only until the tab is closed. Cookies are small, about 4KB, and go to the server with every request. That makes cookies right for login and wrong for general data.
No. Any JavaScript on the page can read it, including a bad script loaded from another website. So one XSS bug leaks the token. A cookie marked httpOnly cannot be read by JavaScript, so it is the safer place for a session.
Both download the script without stopping HTML parsing. async runs it as soon as the download finishes, so the order is not fixed. defer waits until the HTML is fully parsed and then runs scripts in the order you wrote them. Use defer for your app code and async for separate things like analytics.
<script src="app.js" defer></script>
<script src="analytics.js" async></script>Because a plain <script> in the <head> stops HTML parsing until it downloads and runs. The user then sees a blank page. Putting it before </body> avoids that. Today defer in the head gives the same benefit and starts the download earlier.
It is a blank drawing area that you paint on with JavaScript. It draws pixels, so it is fast for games and charts with many points. The shapes are not real elements, so they are not accessible and not searchable.
Canvas is pixel based and drawn by script. Once drawn, the browser forgets what the shapes were. SVG is vector based, and every shape is a real element you can style with CSS and attach events to. SVG stays sharp at any size. Canvas is faster with thousands of objects.
It is a script that runs on a separate thread. Heavy work then does not freeze the page. A worker cannot touch the DOM. It talks to the main thread by sending messages.
const worker = new Worker("heavy.js");
worker.postMessage({ rows: 100000 });
worker.onmessage = (e) => console.log(e.data);It is a background script that sits between your page and the network. It can save files in a cache and serve them when the user is offline. It also powers push notifications. It is the base of a Progressive Web App and works only over HTTPS.
preload downloads something this page needs very soon, like a font. prefetch downloads something the next page will probably need, at low priority. preconnect opens the connection to another domain early, so the real request starts faster.
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin />
<link rel="preconnect" href="https://api.example.com" />DOMContentLoaded fires when the HTML is parsed and the DOM is ready, even if images are still downloading. load fires later, when every image, stylesheet and iframe has finished. Most scripts should use DOMContentLoaded.
It asks the browser for the location of the user. The browser always shows a permission prompt first, and it works only on HTTPS. The result gives latitude, longitude and accuracy.
It reads the HTML and builds the DOM tree. It reads the CSS and builds the CSSOM. It joins both into a render tree. Then it works out the size and position of every box, which is layout. Then it paints the pixels and joins the layers on screen.
CrackInterviewAI listens to the live interview and gives a structured answer on screen for coding, system design, HR and project questions. Download for Windows.