69 questions - Beginner friendly
HTML is the language that gives a web page its structure. Almost every frontend interview starts here, because a person who writes clean HTML usually writes clean CSS and JavaScript too. These answers stay short and use plain words on purpose.
The first questions in almost every frontend interview.
HTML means HyperText Markup Language. It is not a programming language. It is a markup language, which means you use tags to describe what each piece of content is: a heading, a paragraph, an image, a link. The browser reads those tags and draws the page.
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 put inside the opening tag. It always sits as name="value". For example href tells a link where to go, and 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 uses HTML5 and should be rendered in standards mode. If you forget it, the browser switches to quirks mode and copies old buggy behaviour from the 1990s, so your CSS box sizes can go wrong.
Doctype first, then <html>, then <head> for information about the page, then <body> for 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, links to CSS, meta tags for SEO. Nothing in <head> is drawn on the screen. <body> holds everything the user sees and clicks.
It tells the browser which character set to use when reading the file. UTF-8 supports almost every language and symbol, so names, rupee signs and emojis show correctly instead of turning into strange boxes.
It tells a mobile browser to use the real device width instead of pretending to be a 980px desktop. Without it, your responsive CSS will not work properly on phones - the page will look 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 available, like <div>, <p> and <h1>. An inline element stays inside the line of text and takes only as much width as it needs, like <span>, <a> and <strong>.
They are elements that cannot have content inside them, 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 just containers. <div> is a block container used for layout sections. <span> is an inline container 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 understand what the page is about. Many <h1> tags make the structure confusing. Use <h2> and <h3> for the sections under it, in order, without skipping levels.
You wrap the text between <!-- and -->. The browser ignores it, but remember that anyone can still read it in view-source, so never put secrets there.
<!-- This note is only for developers -->An id must be unique on the page and identifies one single element. A class can be repeated on many elements and is used to give the same style or behaviour to a group. In CSS, id uses # and class uses a dot.
They let you store your own custom data on an element without breaking HTML rules. JavaScript can read them through the dataset property. They are very handy for connecting 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>XHTML is a stricter version of HTML written using XML rules. Every tag must be closed, tags must be lowercase and attribute values must be quoted. One mistake breaks the whole page. HTML5 is forgiving, so XHTML is rarely used today.
Using the right tag for the right meaning.
Semantic HTML means choosing tags that describe the meaning of the content, not just how it looks. <header>, <nav>, <main>, <article>, <aside> and <footer> all say what a block is for. A screen reader, a search engine and a new developer can all 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: screen readers can jump straight to the main content or the navigation. 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> is a piece of content that makes sense on its own - a blog post, a news item, a product card. A <section> is a thematic group inside a bigger page, like the "Features" part of a landing page. If you could copy it out and publish it alone, it is an article.
Once per page, around the main unique content. Things repeated on every page - the header, the sidebar menu, the footer - stay outside it. Browsers use it for the "skip to content" shortcut.
<strong> and <em> carry meaning: strong importance and emphasis. A screen reader changes its tone for them. <b> and <i> only change how the text looks, with no extra meaning. Prefer <strong> and <em> when the meaning matters.
<figure> wraps content like an image, chart or code block that is referenced from the text. <figcaption> gives it a caption that stays connected to it, so the browser knows the 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 time in a machine-readable way. Humans read the text inside, and machines read the datetime attribute.
<time datetime="2026-03-14">14 March 2026</time>It holds HTML that the browser parses but does not render. You clone it with JavaScript when you need it. It is useful for repeating rows in a list without building 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, and the browser shows it if 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 "fetch this file and put it inside this element" - used by <img>, <script>, <iframe>. href means "this is a reference to another resource" - used by <a> and <link>. src blocks and embeds, href just points.
When you open a link with target="_blank", the new page can get a reference back to your page through window.opener and change it. noopener removes that reference. noreferrer also hides where the visitor came from. Modern browsers add noopener by default, but writing it is still safe.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Open</a>Use srcset to give several image sizes and sizes to tell the browser how wide the image will be. The browser then picks the smallest file that still looks sharp on that screen.
<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 serve completely different images for different conditions - for example a modern WebP file for browsers that support it, and a JPG for older ones. The browser uses the first <source> that matches and falls back to the <img> inside.
<picture>
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Hero" />
</picture>Adding loading="lazy" to an image or iframe tells the browser to download it only when the user scrolls near it. That makes the first paint much faster. Do not use it on the image at the top of the page, because that one is needed immediately.
<img src="big.jpg" alt="Gallery" loading="lazy" />Use <audio> and <video> with a controls attribute so the user gets play and volume buttons. Put several <source> tags inside for different formats and a plain text fallback 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 embeds another page inside yours - a YouTube video or a map. It is risky because you are running someone else content. Add the sandbox attribute to limit what it can do, and never embed a site you do not trust.
The part of HTML that interviewers dig into most.
GET puts the data in the URL, so it is visible, can be bookmarked and has a length limit. It suits searching. POST sends the data in the request body, so it is not visible 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, and clicking the label focuses the field, which makes it easier to tap on mobile. Connect them with the for attribute matching the input id, or wrap 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. They give free validation and, on mobile, the right keyboard - a number pad for tel, an @ key for email.
A placeholder is a hint that disappears as soon as the user types, so it cannot be the only description. A label stays visible. Using a placeholder instead 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 submitting and show a message. Add novalidate on the form if you want to handle everything 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, cannot be edited and is not sent when the form submits. A readonly field cannot be edited but can be focused, copied, and it is still sent with the form.
It is the key used when the form data is sent to the server. Without a name, the value is simply not submitted. The id is only for labels and CSS or JavaScript.
By sharing the same name attribute. Only one radio in a group can be selected. Checkboxes with the same name are all sent, so they behave 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 and <legend> gives that group a title. Screen readers read the legend before each field in the group, which is very useful for a set of radio buttons.
Use input type="file". The form must use method="post" and enctype="multipart/form-data", otherwise only the file name is sent, not the file. Add accept to filter file types and multiple to allow several files.
<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 a field expects, so the browser can fill it from saved data. Correct values like autocomplete="email" or "one-time-code" make forms much faster to complete, especially on mobile.
Both submit a form. <button> can contain HTML inside it, like an icon plus text, so it is more flexible. Remember that a <button> inside a form defaults to type="submit"; set type="button" if it should not submit.
It gives an input a list of suggestions while still allowing any typed value. It behaves like an autocomplete dropdown without any 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 describes a column or a row. Screen readers use it to announce the right header while moving between cells, so a blind user knows that "12,000" is the March total.
Tables mean "this is tabular data". Using them for layout confuses screen readers, makes responsive design very hard and produces messy HTML. Use CSS grid or flexbox for layout.
<ul> for an unordered list where order does not matter, <ol> for an ordered list where order matters and items get numbers, and <dl> for a description list of term and definition pairs using <dt> and <dd>.
colspan makes one cell stretch across several columns, and rowspan makes it stretch down several rows. They 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 - people using a screen reader, people who cannot use a mouse, people with low vision or colour blindness. Good accessibility usually also improves SEO and usability for everyone.
ARIA stands for Accessible Rich Internet Applications. It is a set of extra attributes such as role, aria-label and aria-expanded that describe custom widgets to assistive technology. The first rule of ARIA is: do not use ARIA if a normal HTML element already does the job.
It gives an element an accessible name when there is no visible text. A button that contains only an X icon should have aria-label="Close dialog", otherwise 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 is useful for moving focus into a modal. Positive numbers break the natural order and should be avoided.
A link at the very top of the page that jumps straight to the main content. Keyboard users otherwise have to tab through the whole menu on every page. It is usually hidden until it receives focus.
<a class="skip-link" href="#main">Skip to main content</a>
...
<main id="main">...</main>Because native elements already come with keyboard support, focus behaviour and correct announcements. A real <button> can be pressed with Enter and Space and is announced as a button. A <div onclick> gives you none of that until you rebuild it by hand.
It removes an element from the accessibility tree, so screen readers ignore it. Use it for decorative icons. Never put it on something the user can focus, or a keyboard user will land on an element that is silent.
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, around 4KB, and are sent to the server with every request, which makes them right for authentication and wrong for general data.
Not really. Any JavaScript on the page, including a compromised third-party script, can read it, so an XSS bug leaks the token. An httpOnly cookie cannot be read by JavaScript, so it is the safer place for a session.
Both download the script without blocking HTML parsing. async runs it the moment it finishes downloading, so the order is unpredictable. defer waits until the HTML is fully parsed and runs scripts in the order written. Use defer for your app code and async for independent things like analytics.
<script src="app.js" defer></script>
<script src="analytics.js" async></script>Because a plain <script> in the <head> blocks HTML parsing until it downloads and runs, so the user sees a blank page. Putting it before </body> avoids that. Today using 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 produces pixels, so it is fast for games and charts with many points, but the shapes are not real DOM elements, so they are not accessible or searchable.
Canvas is pixel based and drawn by script; once drawn, the browser forgets what the shapes were. SVG is vector based and each shape is a DOM node you can style with CSS and attach events to. SVG scales perfectly; Canvas performs better with thousands of objects.
A script that runs on a separate thread, so heavy work does not freeze the page. It 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);A background script that sits between the page and the network. It can cache files and serve them when the user is offline, and it powers push notifications. It is the core of a Progressive Web App and only works over HTTPS.
preload downloads something needed for this page very soon, like a font. prefetch downloads something likely needed on the next page, at low priority. preconnect opens the network connection to another domain early so the real request is faster.
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin />
<link rel="preconnect" href="https://api.example.com" />DOMContentLoaded fires when the HTML has been 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 user location. The browser always shows a permission prompt first, and it only works on HTTPS. The result gives latitude, longitude and accuracy.
It parses HTML into the DOM tree, parses CSS into the CSSOM, combines them into a render tree, calculates the position and size of every box (layout), paints the pixels, and then composites 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.