Skip to content
Web Development
All coursesPlacement Report
‹ Back to previous sectionCourse homeAll page URLs

HTML Fundamentals Interview Questions for Web Development

25 HTML Fundamentals questions with answers for web development roles — 9 easy, 13 medium, 3 hard.

About HTML Fundamentals

HTML is the structure of every web page. This topic covers semantic elements, forms and validation, responsive images, accessibility with labels and ARIA, SEO meta tags and how script loading affects page speed. Interviewers use these questions to check whether you write clean, accessible markup instead of div soup.

Sheet progressStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
3 questions free Unlock the rest in seconds
01

What is semantic HTML and why does it matter?

HTML FundamentalsEasy
Save to ▾
Show answer
Semantic HTML uses elements that describe meaning, such as header, nav, main, article, section, aside and footer, instead of generic div tags everywhere. It helps screen readers announce page structure, helps search engines understand which content is primary, and makes code easier to maintain. For example, wrapping the site menu in nav lets assistive technology users jump straight to navigation, which a plain div cannot offer.
02

What is the difference between block-level and inline elements?

HTML FundamentalsEasy
Save to ▾
Show answer
Block-level elements such as div, p, h1 and section start on a new line and take the full available width by default. Inline elements such as span, a, strong and img sit inside a line of text and only take as much width as their content. Inline elements ignore vertical width and height settings, which is why developers often switch them to inline-block or block when they need sizing.
03

What does the DOCTYPE declaration do in an HTML page?

HTML FundamentalsEasy
Save to ▾
Show answer
The DOCTYPE tells the browser which rendering mode to use. Writing <!DOCTYPE html> at the very top puts the browser in standards mode, so CSS box model and layout rules follow the modern specification. Without it, browsers fall back to quirks mode, which imitates old browser bugs and can make widths, margins and table layouts behave inconsistently across browsers.
04

What is the difference between id and class attributes?

HTML FundamentalsEasy
Save to ▾
Show answer
An id must be unique within a page and identifies one element, so it is used for anchor links, label for attributes and getElementById. A class can be reused on many elements and is the normal hook for CSS styling and grouping in JavaScript. Ids also have much higher CSS specificity, so styling with ids makes overrides harder; most teams style only with classes.
05

What is the difference between GET and POST methods in an HTML form?

HTML FundamentalsEasy
Save to ▾
Show answer
GET sends form data in the URL query string, so it is visible, bookmarkable, cached and limited in length; it suits search and filter forms. POST sends data in the request body, so it is not shown in the URL and can carry large or binary content such as file uploads. Any action that changes data on the server, like login, registration or payment, should use POST.
06

Write an accessible login form with proper labels.

HTML FundamentalsEasy
Save to ▾
Show answer
Every input needs a label linked through for and id, the right input type and autocomplete hints: <form action='/login' method='post'> <label for='email'>Email</label> <input id='email' name='email' type='email' autocomplete='email' required> <label for='pwd'>Password</label> <input id='pwd' name='password' type='password' autocomplete='current-password' required minlength='8'> <button type='submit'>Log in</button> </form> Clicking a label focuses its input and screen readers read the label aloud.
07

Write the basic SEO meta tags for a course landing page.

HTML FundamentalsEasy
Save to ▾
Show answer
Key tags go in the head: <title>Full Stack Web Development Course in Noida</title> <meta name='description' content='Learn HTML, CSS, JavaScript, PHP and MySQL with live projects.'> <link rel='canonical' href='https://example.com/web-development'> <meta property='og:title' content='Web Development Course'> <meta property='og:image' content='https://example.com/og.jpg'> <meta name='robots' content='index, follow'> Keep titles under about 60 characters and descriptions near 150 to 160 characters.
08

Why should external links opened with target='_blank' use rel='noopener'?

HTML FundamentalsEasy
Save to ▾
Show answer
When a page opens a link in a new tab, the new page historically got access to window.opener and could redirect the original tab to a phishing page, an attack called reverse tabnabbing. Adding rel='noopener' removes that reference, and noreferrer also hides the referring URL. Modern browsers apply noopener by default for target='_blank', but adding it explicitly is still good practice for older browsers.
09

Tell me about a website you built from scratch.

HTML FundamentalsEasy
Save to ▾
Show answer
Situation: during my final year, a local coaching institute needed a website. Task: I had to build a responsive site with course pages and an enquiry form in three weeks. Action: I designed the layout in Figma, built it with semantic HTML, CSS Grid and JavaScript, stored enquiries in MySQL through PHP and deployed it on shared hosting. Result: it scored above 90 in Lighthouse and brought enquiries within the first month.
10

When should you use section, article or div?

HTML FundamentalsMedium
Save to ▾
Show answer
Use article for self-contained content that makes sense on its own, such as a blog post, product card or comment. Use section for a thematic group of content that normally has its own heading, like a Features block on a landing page. Use div only when you need a wrapper purely for styling or scripting with no meaning. Choosing correctly improves the document outline and accessibility.
11

What are data-* attributes and when do you use them?

HTML FundamentalsMedium
Save to ▾
Show answer
Custom data attributes such as data-product-id or data-price let you store extra information on an element without misusing class or id. JavaScript reads them through element.dataset, for example button.dataset.productId, and CSS can target them with attribute selectors. They are ideal for passing small values from server-rendered HTML to scripts, but sensitive data should never be stored there because anyone can read the page source.
12

Explain the difference between async and defer on a script tag.

HTML FundamentalsMedium
Save to ▾
Show answer
Both download the script in parallel without blocking HTML parsing. An async script executes as soon as it finishes downloading, in no fixed order, so it suits independent scripts like analytics. A defer script waits until the HTML is fully parsed and runs in document order, so it suits application code that depends on the DOM or on other scripts. A plain script tag blocks parsing completely.
13

Why is the meta viewport tag needed for mobile pages?

HTML FundamentalsMedium
Save to ▾
Show answer
Without a viewport meta tag, mobile browsers render the page at a virtual width of around 980 pixels and then zoom out, so text looks tiny. Adding <meta name='viewport' content='width=device-width, initial-scale=1'> tells the browser to use the real device width, which makes media queries work as expected. Avoid disabling user zoom with maximum-scale=1 because it hurts accessibility for users with low vision.
14

How do srcset and sizes help with responsive images?

HTML FundamentalsMedium
Save to ▾
Show answer
srcset lists several versions of the same image with their widths, for example hero-480.jpg 480w and hero-1200.jpg 1200w. sizes tells the browser how wide the image will be shown at different viewport widths. The browser then picks the smallest file that still looks sharp for that screen and pixel density. This saves a lot of mobile data compared to sending one large image to every device.
15

What is ARIA and when should you use it?

HTML FundamentalsMedium
Save to ▾
Show answer
ARIA (Accessible Rich Internet Applications) adds roles, states and properties like role='dialog', aria-expanded and aria-label so assistive technologies understand custom widgets. The first rule of ARIA is to prefer native HTML elements, because a real button already has keyboard support and the right role. Use ARIA only when building something HTML lacks, such as tabs or a combobox, and keep the states updated with JavaScript.
16

Show HTML5 built-in validation for a registration form.

HTML FundamentalsMedium
Save to ▾
Show answer
HTML5 attributes validate input before any JavaScript runs: <input type='text' name='name' required minlength='3' maxlength='50'> <input type='email' name='email' required> <input type='tel' name='mobile' pattern='[6-9][0-9]{9}' title='10 digit mobile number'> <input type='number' name='age' min='18' max='60'> <input type='url' name='portfolio'> The browser blocks submission and shows a message when rules fail. Server-side validation is still mandatory because client checks can be bypassed.
17

Use the picture element to serve WebP or AVIF with a JPEG fallback.

HTML FundamentalsMedium
Save to ▾
Show answer
The browser picks the first source format it supports and falls back to img: <picture> <source srcset='hero.avif' type='image/avif'> <source srcset='hero.webp' type='image/webp'> <img src='hero.jpg' alt='Students in a coding lab' width='1200' height='600'> </picture> The img element still carries alt, width and height, so accessibility and layout stability are preserved. Modern formats are often 30 to 50 percent smaller than JPEG.
18

How do you lazy load images and iframes natively?

HTML FundamentalsMedium
Save to ▾
Show answer
Add loading='lazy' so the browser fetches them only when they come near the viewport: <img src='gallery-1.jpg' alt='Campus' width='600' height='400' loading='lazy'> <iframe src='https://www.youtube.com/embed/xyz' loading='lazy' title='Demo video'></iframe> Do not lazy load the main hero or above-the-fold image, because that delays Largest Contentful Paint. For the hero use fetchpriority='high' instead, and always set width and height to avoid layout shift.
19

An accessibility audit gives your site a low score. What would you fix first?

HTML FundamentalsMedium
Save to ▾
Show answer
I would start with issues that block users completely: missing alt text on meaningful images, form inputs without labels, poor colour contrast, and controls that cannot be reached by keyboard. Then I would fix heading order, add a skip link, use semantic landmarks and make focus outlines visible. I would test with Lighthouse or axe, then manually with Tab key navigation and a screen reader like NVDA.
20

A client wants better Google rankings. What HTML-level changes would you make?

HTML FundamentalsMedium
Save to ▾
Show answer
I would give every page a unique title and meta description, use exactly one clear h1 with a logical h2 and h3 structure, and add descriptive alt text. I would add canonical tags to avoid duplicate content, structured data such as JSON-LD for courses or FAQs, and internal links with meaningful anchor text. I would also improve Core Web Vitals, since page speed affects ranking.
21

Product images look blurry on high-resolution phone screens. How do you fix it?

HTML FundamentalsMedium
Save to ▾
Show answer
High-density screens have a device pixel ratio of 2 or 3, so a 300 pixel wide image displayed at 300 CSS pixels looks soft. I would export 2x and 3x versions and serve them through srcset with x descriptors or width descriptors plus sizes. For icons and logos I would switch to SVG, which stays sharp at any size and is usually smaller than multiple raster versions.
22

How do you keep yourself updated with changes in web standards?

HTML FundamentalsMedium
Save to ▾
Show answer
I follow MDN Web Docs, web.dev and the release notes of Chrome and Firefox, and I check Can I Use before adopting a new feature. Every few weeks I build a small demo with something new, such as container queries or the popover attribute, and push it to GitHub. For example, after reading about native lazy loading, I replaced a JavaScript library in my project and reduced the bundle size.
23

Explain the critical rendering path and how HTML structure affects it.

HTML FundamentalsHard
Save to ▾
Show answer
The browser parses HTML into the DOM, CSS into the CSSOM, combines them into a render tree, then calculates layout and paints pixels. CSS in the head is render-blocking and synchronous scripts block parsing, so their placement decides how fast the first paint appears. Good practice is to inline small critical CSS, defer non-essential scripts, preload key fonts and hero images, and keep the initial HTML lean.
24

A contact form is receiving hundreds of spam submissions daily. What do you do?

HTML FundamentalsHard
Save to ▾
Show answer
I would layer defences rather than rely on one trick. On the front end, add a hidden honeypot field that bots fill and humans do not, and add an invisible CAPTCHA such as reCAPTCHA v3 or Turnstile. On the server, validate every field, apply rate limiting per IP, reject submissions that arrive too fast after page load, and log patterns. Real protection must be server side because bots skip JavaScript.
25

Lighthouse shows a poor Largest Contentful Paint caused by the hero image. What steps do you take?

HTML FundamentalsHard
Save to ▾
Show answer
First I would compress the image and serve it in AVIF or WebP at the correct size using srcset. I would remove loading='lazy' from it, add fetchpriority='high' and a preload link in the head, and make sure it is in the initial HTML rather than injected by JavaScript. I would also serve it from a CDN and check that render-blocking CSS is not delaying the paint.

Frequently asked questions

How important is HTML Fundamentals in Web Development interviews?

HTML is the structure of every web page. This topic covers semantic elements, forms and validation, responsive images, accessibility with labels and ARIA, SEO meta tags and how script loading affects page speed. Interviewers use these questions to check whether you write clean, accessible markup instead of div soup.

How should I use the HTML Fundamentals sheet?

Go top to bottom — easy to hard. Answer before opening each answer, tick what you solved and save misses to Last-Minute Revision.

More question sheets

CSS Layout and Responsive Design questionsJavaScript Core questionsDOM and Browser Events questionsPHP Programming questionsMySQL Database questionsWeb Security questionsHosting and Deployment questions