HTML Notes
50 essential HTML interview questions with detailed answers — covering basics, semantic HTML, forms, accessibility, HTML5 features, performance, SEO, and advanced topics for front-end developer interviews.
These are the most commonly asked HTML questions in front-end developer interviews, from fresher to senior level. Master these and you will be prepared for any HTML-related interview round.
Semantic HTML (Questions 16–25)
16. What is semantic HTML and why does it matter?
Semantic HTML uses elements that describe the meaning of content, not just its appearance. Examples: <article>, <section>, <nav>, <aside>, <main>.
Benefits:
- Accessibility: Screen readers navigate semantic landmarks
- SEO: Search engines understand content hierarchy
- Maintainability: Other developers understand the code
- Future-proofing: Meaning survives visual changes
17. What is the difference between <article> and <section>?
<article> | <section> |
|---|---|
| Self-contained content — makes sense independently | Thematic grouping — part of a larger whole |
| Could be republished elsewhere | Cannot stand alone meaningfully |
| Blog post, news article, comment, product card | Chapter within an article, feature section |
18. When would you use <main>, <header>, <footer>, <aside>, and <nav>?
<main>— Primary content of the page. One per page.<header>— Introductory content (logo, navigation) at top of page or section<footer>— Closing content (copyright, links) at bottom of page or section<aside>— Supplementary content tangentially related (sidebar, pull quote)<nav>— Major navigation blocks (main menu, breadcrumb, pagination)
19. What is the <figure> element used for?
<figure> groups media content with its associated caption (<figcaption>). The media and caption are semantically linked:
<figure>
<img src="diagram.png" alt="Network topology diagram">
<figcaption>Figure 2: Star topology connecting 8 nodes to a central switch.</figcaption>
</figure>20. What is the <time> element?
<time> marks dates and times with a machine-readable datetime attribute:
<p>Published <time datetime="2026-06-15">June 15, 2026</time></p>
<p>Meeting at <time datetime="14:30">2:30 PM</time></p>Screen readers and search engines (for rich results) can parse the datetime value.
Forms (Questions 21–30)
21. What are all the input types in HTML5?
22. What is the difference between GET and POST form methods?
| GET | POST |
|---|---|
| Data in URL query string | Data in request body |
| Visible in browser address bar | Not visible in URL |
| Can be bookmarked | Cannot be bookmarked |
| Limited data (URL length ~2000 chars) | No practical size limit |
| Use for: search forms | Use for: login, payment, file upload |
| Not for sensitive data | Appropriate for sensitive data |
23. Why are <label> elements important?
- Associates text with a form control
- Clicking the label focuses/activates the control (larger click target)
- Screen readers read the label when the input is focused
- Required for WCAG accessibility compliance
24. What is the purpose of <fieldset> and <legend>?
<fieldset> groups related form controls. <legend> provides a caption for the group:
Benefits: improved accessibility (screen readers announce the legend), visual grouping, logical form organisation.
25. What are HTML5 form validation attributes?
required— field cannot be emptyminlength/maxlength— character count constraintsmin/max— numeric/date rangepattern— regular expression validationtype="email"— validates email format automaticallytype="url"— validates URL format automatically
26. What does enctype="multipart/form-data" do?
It changes how form data is encoded when submitted. Required when the form includes <input type="file">. Without it, file contents are not properly transmitted:
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="document">
<button>Upload</button>
</form>27. What is the <datalist> element?
<datalist> provides autocomplete suggestions for an <input> — users can still type freely but get suggestions:
28. What is the difference between <input type="button">, <button>, and <input type="submit">?
| Submit | Reset | Button | |
|---|---|---|---|
| - | -------- | ------- | -------- |
<input type="submit"> | Yes | No | No |
<input type="reset"> | No | Yes | No |
<input type="button"> | No | No | No |
<button type="submit"> | Yes | No | No |
<button type="button"> | No | No | Yes |
Prefer <button> over <input type="submit"> because <button> can contain HTML content (text + icon).
HTML5 and Advanced (Questions 29–40)
29. What is the difference between localStorage, sessionStorage, and cookies?
| localStorage | sessionStorage | Cookies | |
|---|---|---|---|
| - | ------------ | ---------------- | --------- |
| Capacity | ~5-10MB | ~5MB | ~4KB |
| Expiry | Never (manual) | Tab close | Set by expires |
| Sent to server | No | No | Yes (every request) |
| JS accessible | Yes | Yes | Yes |
| Best use | Preferences, cache | Temp form data | Auth tokens |
30. What is the <canvas> element?
<canvas> provides a resolution-dependent bitmap drawing surface, controlled with JavaScript via the Canvas 2D API or WebGL. Used for: charts, games, image processing, animations.
<canvas id="chart" width="400" height="200"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 80);
</script>31. What is the difference between <canvas> and SVG?
| Canvas | SVG |
|---|---|
| Pixel-based (raster) | Vector-based (scales without blur) |
| Manipulated via JavaScript | Manipulated via DOM/CSS |
| No DOM nodes per element | Each shape is a DOM element |
| Better for complex animations, games | Better for logos, icons, charts |
| Not accessible by default | Accessible (can have title, desc) |
32. What are ARIA roles and when do you use them?
ARIA (Accessible Rich Internet Applications) attributes add semantic information to elements for screen readers when native HTML semantics are insufficient:
<div role="navigation" aria-label="Main menu">...</div>
<button aria-expanded="false" aria-controls="menu">Menu</button>
<div id="menu" role="menu" aria-hidden="true">...</div>
<span role="alert" aria-live="polite">Form submitted successfully!</span>Use native HTML semantics first. Only add ARIA when no native element covers the use case.
33. What is the tabindex attribute?
Controls the tab order of focusable elements:
34. What is the <details> and <summary> element?
A native HTML accordion — no JavaScript needed:
<details>
<summary>What is semantic HTML?</summary>
<p>HTML that uses elements that describe the meaning of content...</p>
</details>The open attribute makes it visible by default: <details open>.
35. What does the <dialog> element do?
Creates a native browser modal dialog:
dialog.showModal()— opens as modal with backdropdialog.show()— opens without modal backdropdialog.close()— closes- Automatically traps focus inside
- Escape key closes it
36. What are <progress> and <meter> elements?
<progress>— shows task completion (downloading, uploading, loading)<meter>— shows a scalar value within a known range (disk usage, score, temperature)
Performance and SEO (Questions 41–50)
37. What is the loading="lazy" attribute?
Defers loading of images and iframes until they are near the viewport. Reduces initial page load time and bandwidth usage:
<img src="below-fold.jpg" alt="Content" loading="lazy" width="800" height="600">
<iframe src="youtube.com/embed/xyz" loading="lazy"></iframe>Use loading="eager" (default) for above-the-fold images.
38. Why should you set width and height on images?
Setting dimensions lets the browser reserve space before the image downloads, preventing Cumulative Layout Shift (CLS) — a Core Web Vitals metric that affects SEO rankings. Layout shifts are jarring for users as content jumps around while loading.
39. What is srcset on images?
srcset provides multiple image resolutions. The browser picks the most appropriate one based on device pixel ratio and viewport size:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
alt="Photo"
>40. What is the <link rel="canonical"> tag?
Tells search engines which URL is the preferred version of a page when duplicate content exists (e.g., http vs https, with/without www, pagination):
<link rel="canonical" href="https://wohotech.in/subjects/html-complete-guide">41. What are <script defer> and <script async>?
Both load scripts asynchronously (don't block HTML parsing), but differ in execution:
defer | async | |
|---|---|---|
| - | --------- | --------- |
| Download | While HTML parses | While HTML parses |
| Execute | After HTML fully parsed | As soon as downloaded |
| Order | Maintained | Not guaranteed |
| Best for | Most scripts | Analytics, ads |
42. What is the difference between href and src?
href (Hypertext Reference) | src (Source) |
|---|---|
| Links to an external resource | Embeds/replaces content |
<a href>, <link href> | <img src>, <script src>, <iframe src> |
| Page continues loading while fetching | Page pauses loading until resource fetches |
43. What is the rel="noopener noreferrer" attribute for?
Used with target="_blank" to prevent security vulnerabilities:
noopener— prevents the new tab from accessingwindow.opener(prevents tab hijacking)noreferrer— also hides the referrer URL from the destination site
44. What is the <base> element?
Sets the base URL for all relative URLs in the document:
45. What is a favicon and how do you add one?
A favicon is the small icon shown in the browser tab:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">46. What is the viewport meta tag?
Controls page scaling on mobile devices. Without it, mobile browsers zoom out to fit desktop-width pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">47. What is the difference between <section> and <div>?
<section> | <div> |
|---|---|
| Semantic — thematic group | Non-semantic — generic container |
| Should have a heading | No heading required |
| Appears in document outline | Does not affect outline |
| Use when content has a theme | Use for styling/layout grouping only |
48. What is the lang attribute on <html>?
Specifies the primary language of the document. Used by screen readers (correct pronunciation), search engines (language-based indexing), and browsers (translation offer):
49. What is the difference between display:none and visibility:hidden?
display: none | visibility: hidden |
|---|---|
| Element removed from layout | Element hidden but still takes up space |
| Not accessible to screen readers | Accessible to screen readers |
| Use to hide and remove | Use to hide while maintaining layout |
For accessibility: aria-hidden="true" hides from screen readers without affecting layout.
50. What makes an HTML page accessible?
Key accessibility requirements:
- Semantic HTML elements (not div soup)
- All images have meaningful
alttext - All form inputs have associated
<label>elements - Colour contrast ratio of at least 4.5:1 (WCAG AA)
- All interactive elements are keyboard-accessible
- Skip navigation link at top of page
- Language declared with
langattribute - ARIA roles for custom widgets
- Focus is visible when navigating by keyboard
- Content does not depend solely on colour, position, or sound
Quick Reference Summary
| Topic | Key Elements |
|---|---|
| Document structure | <!DOCTYPE html>, <html>, <head>, <body> |
| Metadata | <meta charset>, <meta viewport>, <title>, <link> |
| Text | <h1>–<h6>, <p>, <strong>, <em>, <code>, <pre> |
| Semantic layout | <header>, <main>, <footer>, <nav>, <aside> |
| Content | <article>, <section>, <figure>, <time>, <address> |
| Links | <a href> with rel="noopener noreferrer" for external |
| Images | <img src alt width height loading srcset> |
| Lists | <ul>, <ol>, <dl> |
| Tables | <table>, <thead>, <tbody>, <th scope>, <td> |
| Forms | <form>, <input>, <label>, <fieldset>, <button> |
| HTML5 | <audio>, <video>, <canvas>, <details>, <dialog> |
| Storage | localStorage, sessionStorage |
*You have completed the HTML interview preparation section. Practice these questions out loud and write code for each one.*
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for HTML Interview Questions — 50 Questions with Answers.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this HTML Complete Guide topic.
Search Terms
html-complete-guide, html complete guide, html, complete, guide, interview, preparation, questions
Related HTML Complete Guide Topics