60 HTML Interview Questions (with concise answers)
1. What is HTML?
HTML (HyperText Markup Language) is the standard markup language for creating web pages and web
applications. It structures content using elements represented by tags.
2. What is the difference between HTML and HTML5?
HTML5 is the latest major revision of HTML, adding new semantic elements, multimedia support
(audio/video), canvas, localStorage, and APIs for modern web apps.
3. What are semantic elements in HTML?
Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples:
<header>, <footer>, <article>, <section>, <nav>, <main>.
4. What is the purpose of the <!DOCTYPE html> declaration?
Declares the document type and version of HTML; in HTML5 it triggers standards mode so browsers
render the page correctly.
5. What is the difference between block-level and inline elements?
Block-level elements start on a new line and take full width (e.g., <div>, <p>, <h1>). Inline
elements do not start on a new line and only take necessary width (e.g., <span>, <a>, <img>).
6. What is the difference between <div> and <span>?
<div> is a block-level container used for grouping content; <span> is an inline container used for
grouping small parts of text or elements.
7. How do you include an external CSS file in HTML?
Use the <link> tag inside <head>: <link rel="stylesheet" href="[Link]">.
8. How do you include JavaScript in an HTML page?
Inline with <script> tags or external file: <script src="[Link]"></script>. Place before </body>
to improve load performance or use defer/async.
9. What are data-* attributes?
Custom data attributes (e.g., data-user="123") allow storing extra information on HTML elements
accessible via JavaScript ([Link]).
10. What is the purpose of the <meta> tag?
Provides metadata about the document, e.g., charset (<meta charset="utf-8">), viewport (<meta
name="viewport" content="width=device-width, initial-scale=1">), description, author.
11. What is the difference between id and class attributes?
id is unique within the document and used for single elements; class can be shared among multiple
elements. CSS selector: #id and .class.
12. How do you make an image responsive?
Use CSS: max-width:100%; height:auto; or use <picture> and srcset for art direction and responsive
images.
13. What are the <picture> and srcset attributes used for?
They enable responsive images and allow the browser to choose the best image source depending on
viewport size, resolution, or media conditions.
14. What is the <canvas> element?
An HTML element used to draw graphics via scripting (JavaScript). Useful for dynamic graphics,
games, charts, and animations.
15. What is ARIA and why use it?
Accessible Rich Internet Applications (ARIA) provides attributes to improve accessibility for
dynamic content and widgets (e.g., role, aria-label, aria-hidden).
16. What is the difference between <button> and <input type="button">?
Both create clickable buttons; <button> can contain HTML and has different default behaviors in
forms, while input type="button" is an empty element.
17. Explain form elements and validation in HTML5.
HTML5 provides input types (email, url, number, date), attributes (required, pattern, minlength,
maxlength) and built-in client-side validation.
18. What is the purpose of the <form> 'action' and 'method' attributes?
action sets the URL where form data is submitted; method defines HTTP method (GET or POST) used to
send data.
19. How do you create a link that opens in a new tab?
Use <a href="url" target="_blank" rel="noopener noreferrer">Link</a> to prevent security issues like
[Link] vulnerability.
20. What is the 'rel' attribute for anchor tags?
Specifies relationship between current document and linked resource (e.g., rel="noopener",
rel="noreferrer", rel="stylesheet").
21. What are HTML forms' enctype values and when to use them?
Common values: application/x-www-form-urlencoded (default), multipart/form-data (for file uploads),
text/plain (rare).
22. What is the difference between localStorage and sessionStorage?
Both store key-value pairs on client. localStorage persists across sessions, sessionStorage is
cleared when the tab/window is closed.
23. How does the 'defer' attribute differ from 'async' on script tags?
defer downloads script asynchronously and executes after HTML parsing; async downloads
asynchronously and executes as soon as ready, which can interrupt parsing.
24. What is a favicon and how to add it?
A small icon shown in browser tabs/bookmarks. Add via <link rel="icon" href="/[Link]"
type="image/x-icon">.
25. What is the <link rel="preload"> used for?
Preloads resources (fonts, scripts, styles) so the browser prioritizes fetching them early to
improve performance.
26. How do you include a web font?
Use @font-face in CSS or link to Google Fonts with <link href="..." rel="stylesheet"> and apply via
font-family.
27. Explain HTML entities and why they're needed.
Entities represent special characters in HTML (e.g., & for &, < for <). They prevent
interpretation as markup and ensure correct rendering.
28. What is the purpose of <noscript>?
Content inside <noscript> is displayed when JavaScript is disabled in the user's browser.
29. How do you create semantic headings and why are they important?
Use <h1> to <h6> in order to structure content for accessibility and SEO; <h1> is the main heading,
others are subsections.
30. What is the difference between <ol> and <ul>?
<ol> creates an ordered (numbered) list, <ul> creates an unordered (bulleted) list. Items use <li>.
31. What is the role of the <aside> element?
Represents content tangentially related to the main content, like sidebars or pull quotes.
32. How does the <iframe> element work and what are security concerns?
Embeds another HTML page. Use sandbox attribute and set appropriate headers (X-Frame-Options) to
mitigate clickjacking and security risks.
33. What is progressive enhancement?
Technique of building a basic, functional experience for all users and adding advanced features for
capable browsers, improving accessibility and resilience.
34. What are microdata and JSON-LD in HTML?
Microdata are inline annotations for structured data using attributes; JSON-LD embeds linked-data as
a script of type application/ld+json. Both help SEO and rich results.
35. How do you make a table accessible?
Include <caption>, use <th> for headers with scope attributes, ensure keyboard navigation, and
provide summaries if needed.
36. What is the use of the 'download' attribute on anchor tags?
Tells the browser to download the linked resource rather than navigate to it; optionally suggests a
filename: <a href="[Link]" download="[Link]">.
37. What is the difference between [Link]() and DOM methods?
[Link]() writes during parsing and can overwrite the page if used after load; DOM methods
(createElement, appendChild) are preferred for dynamic updates.
38. Explain the concept of 'responsive design'.
Design approach ensuring web pages adapt to various screen sizes using fluid grids, flexible images,
and CSS media queries.
39. What is the viewport meta tag and why is it important?
Controls layout on mobile devices: <meta name="viewport" content="width=device-width, initial-
scale=1"> ensures proper scaling and responsiveness.
40. How can you optimize HTML for SEO?
Use semantic tags, meaningful headings, meta description, canonical URLs, structured data,
accessible content, and fast page load times.
41. What is the difference between <strong> and <b>, or <em> and <i>?
<strong> and <em> convey semantic importance/emphasis; <b> and <i> are purely presentational and
don't convey meaning to assistive tech.
42. How do you include comments in HTML?
Use <!-- comment here -->. They are ignored by the browser and not rendered.
43. What is cross-origin resource sharing (CORS) and how does it relate to HTML?
CORS is a server-side policy controlling cross-origin requests for resources like fonts or APIs.
HTML may reference cross-origin assets; servers must allow them via response headers.
44. What are web components?
A set of web platform APIs (Custom Elements, Shadow DOM, HTML Templates) for creating reusable,
encapsulated custom elements.
45. What is the Shadow DOM?
A browser feature that encapsulates an element's DOM and styles, preventing leakage to/from the main
document, used in web components.
46. How do you include SVG in HTML?
Inline with <svg> markup, or via <img>, <object>, or <iframe>. Inline allows scripting and styling
of SVG elements.
47. What is the use of the <template> element?
Holds HTML that is not rendered until cloned via JavaScript; useful for client-side templating.
48. Explain the difference between HTTP and HTTPS and why it matters for HTML pages.
HTTPS is HTTP over TLS/SSL providing encryption and integrity; essential for security, protecting
data in transit and enabling modern features (e.g., service workers require HTTPS).
49. What are content security policy (CSP) headers and why use them?
CSP is a security standard that helps prevent XSS and other attacks by restricting the sources of
content (scripts, images, styles).
50. How do you implement lazy loading for images?
Use the loading="lazy" attribute on <img> or implement Intersection Observer to defer loading
offscreen images.
51. What is the role of the <main> element?
Indicates the main content of the <body> unique to the document; there should be only one <main> per
page for accessibility.
52. How do you handle file uploads in HTML forms?
Use <input type="file"> and form enctype="multipart/form-data"; handle server-side processing
securely and validate file types/sizes.
53. What is the purpose of <meta charset="utf-8">?
Declares the character encoding to UTF-8 to correctly render characters from many languages and
symbols.
54. What are the best practices for organizing HTML files in a project?
Use clear folder structure (css/, js/, images/), separate concerns, keep markup semantic and DRY,
use partials or templates for repetitive sections.
55. What is the difference between GET and POST when used in forms?
GET appends form data to the URL (visible, length-limited, good for queries). POST sends data in the
request body (not visible in URL, used for changes or large payloads).
56. What is the purpose of the 'charset' attribute in <script> or <link>?
Specifies character encoding for external resources; rarely needed if server sends correct headers
and document charset is UTF-8.
57. How do you make HTML content print-friendly?
Use a print-specific CSS @media print to hide unnecessary elements, adjust layout and fonts, and
ensure colors/links print well.
58. What is the <meta name="robots"> tag used for?
Directs search engine crawlers (e.g., noindex, nofollow) on how to index and follow links on the
page.
59. What are HTML doctypes other than HTML5?
Older doctypes include XHTML and HTML4 declarations (e.g., <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN">). HTML5 simplified this to <!DOCTYPE html>.
60. How do you ensure backward compatibility with older browsers?
Use feature detection, progressive enhancement, polyfills for missing APIs, graceful degradation,
and test across target browsers.