1. HTML Interview Questions Interview Questions and Answers

1. HTML Interview Questions Interview Questions and Answers

Practice every question in this topic using expandable answers and interview tips. Answer aloud first, then open the explanation.

Back to the complete interview hub

Q1. What is HTML? [Easy]

Answer: HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines elements such as headings, paragraphs, images, links, tables, forms, and multimedia content.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q2. What is the purpose of HTML? [Easy]

Answer: The purpose of HTML is to define the structure and content of a web page. It works with CSS for styling and JavaScript for interactivity.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q3. What is the difference between HTML and HTML5? [Easy]

Answer: HTML5 is the latest version of HTML. It introduces semantic elements, multimedia support without plugins, canvas, SVG, local storage, geolocation, and improved form controls.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q4. What is the <!DOCTYPE html> declaration? [Easy]

Answer: The <!DOCTYPE html> declaration tells the browser that the document uses HTML5. It ensures the browser renders the page in standards mode.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q5. What are HTML elements? [Easy]

Answer: HTML elements are the building blocks of a webpage. Most elements consist of an opening tag, content, and a closing tag, although some are self-closing.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q6. What are HTML tags? [Easy]

Answer: HTML tags are keywords enclosed in angle brackets that define the type of content, such as <p>, <h1>, <div>, and <img>.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q7. What are empty (void) HTML elements? [Easy]

Answer: Empty or void elements do not have closing tags or content. Examples include <br>, <hr>, <img>, <input>, <meta>, and <link>.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q8. What is the difference between block-level and inline elements? [Easy]

Answer: Block-level elements start on a new line and occupy the full available width, while inline elements only take the width required by their content and remain in the same line.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q9. What are semantic HTML elements? [Medium]

Answer: Semantic HTML elements clearly describe their meaning to browsers and developers. Examples include <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. They improve accessibility and SEO.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q10. Why should semantic HTML be used instead of only div elements? [Medium]

Answer: Semantic HTML improves code readability, accessibility for screen readers, SEO, and browser understanding of the document structure. Using only div elements makes the document less meaningful.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q11. What are HTML attributes? [Easy]

Answer: HTML attributes provide additional information about an element. They are written inside the opening tag as name-value pairs, such as href, src, alt, id, and class.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q12. What is the difference between the id and class attributes? [Easy]

Answer: The id attribute uniquely identifies a single element on a page and should not be repeated. The class attribute can be assigned to multiple elements and is commonly used for applying styles and JavaScript functionality.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q13. What is the purpose of the alt attribute in the img tag? [Easy]

Answer: The alt attribute provides alternative text for an image if it cannot be displayed. It also improves accessibility by allowing screen readers to describe the image.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q14. What is the difference between absolute and relative URLs? [Medium]

Answer: An absolute URL contains the complete web address including the protocol and domain, while a relative URL specifies the path relative to the current document.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q15. What is the purpose of the meta tag? [Medium]

Answer: The meta tag provides metadata about the webpage, such as character encoding, viewport settings, author information, and SEO-related descriptions. Metadata is not displayed directly on the page.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q16. What is the purpose of the viewport meta tag? [Easy]

Answer: The viewport meta tag controls how a webpage is displayed on mobile devices. It enables responsive layouts by setting the page width to the device width and defining the initial zoom level.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q17. What is the difference between the script tag placed in the head and before the closing body tag? [Medium]

Answer: Scripts placed in the head may block page rendering unless deferred or loaded asynchronously. Placing scripts before the closing body tag allows HTML content to load first, improving perceived performance.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q18. What is the difference between async and defer attributes in script tags? [Medium]

Answer: The async attribute downloads and executes the script as soon as it is available, which may interrupt HTML parsing. The defer attribute downloads the script while HTML is parsed but executes it only after the document has been fully parsed.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q19. What are HTML lists? Name their types. [Easy]

Answer: HTML provides three types of lists: ordered lists (<ol>) for numbered items, unordered lists (<ul>) for bullet points, and description lists (<dl>) for terms and descriptions.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q20. What is the difference between ordered, unordered, and description lists? [Medium]

Answer: Ordered lists display items in a numbered sequence, unordered lists display bullet points, and description lists pair terms with their descriptions using the dt and dd elements.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q21. What is an HTML form? [Easy]

Answer: An HTML form is used to collect user input and send it to a server for processing. It contains form controls such as text fields, radio buttons, checkboxes, dropdowns, and submit buttons.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q22. What is the difference between GET and POST methods in HTML forms? [Easy]

Answer: GET sends form data through the URL and is suitable for retrieving data. POST sends data in the request body, making it more secure and appropriate for submitting sensitive or large amounts of data.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q23. What are the different input types available in HTML5? [Medium]

Answer: HTML5 provides many input types including text, password, email, number, tel, url, search, date, time, datetime-local, month, week, color, range, file, checkbox, radio, hidden, reset, button, and submit.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q24. How does HTML5 form validation work? [Medium]

Answer: HTML5 provides built-in validation using attributes such as required, minlength, maxlength, pattern, min, max, step, email, and url. Browsers automatically validate input before form submission.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q25. What is the purpose of the label element? [Easy]

Answer: The label element associates descriptive text with a form control, improving usability and accessibility. Clicking the label focuses or activates the associated input field.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q26. What is the difference between radio buttons and checkboxes? [Medium]

Answer: Radio buttons allow users to select only one option from a group, whereas checkboxes allow multiple selections independently.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q27. What is the purpose of HTML tables? [Easy]

Answer: HTML tables are used to display structured tabular data in rows and columns using elements such as table, tr, th, and td.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q28. What is the difference between th and td elements? [Medium]

Answer: The th element defines a header cell in a table and is usually displayed in bold and centered. The td element defines a standard data cell containing table content.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q29. What are rowspan and colspan attributes? [Medium]

Answer: The rowspan attribute allows a table cell to span multiple rows, while colspan allows a cell to span multiple columns.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q30. What is the purpose of the iframe element? [Medium]

Answer: The iframe element is used to embed another HTML document or external web page within the current webpage. It is commonly used for embedding maps, videos, documents, and third-party content.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q31. What is the difference between the audio and video elements in HTML5? [Medium]

Answer: The <audio> element is used to embed sound files such as MP3 or WAV, while the <video> element is used to embed video files such as MP4, WebM, or Ogg. Both support built-in playback controls without requiring external plugins.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q32. What is the HTML5 canvas element? [Medium]

Answer: The <canvas> element provides a drawable area that allows JavaScript to create graphics, animations, charts, image manipulation, and simple games dynamically.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q33. What is SVG and how is it different from Canvas? [Medium]

Answer: SVG (Scalable Vector Graphics) is XML-based and suitable for scalable graphics such as icons and diagrams. Canvas is pixel-based and better suited for animations, games, and real-time drawing. SVG elements remain editable in the DOM, while Canvas drawings do not.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q34. What is the difference between localStorage and sessionStorage? [Medium]

Answer: localStorage stores data permanently until it is explicitly removed, even after the browser is closed. sessionStorage stores data only for the current browser tab or session and is cleared when the tab is closed.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q35. What are cookies and how are they different from localStorage? [Medium]

Answer: Cookies are small pieces of data stored by the browser and are sent to the server with every HTTP request. localStorage stores larger amounts of client-side data and is not automatically sent to the server.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q36. What are data-* attributes in HTML? [Medium]

Answer: Data attributes allow developers to store custom information directly on HTML elements. They are accessed in JavaScript using the dataset property and are commonly used to store IDs, configuration values, or application-specific metadata.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q37. What are ARIA attributes and why are they important? [Hard]

Answer: ARIA (Accessible Rich Internet Applications) attributes improve accessibility for users who rely on screen readers and assistive technologies. They provide additional information about UI components when standard HTML semantics are not sufficient.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q38. How does semantic HTML improve SEO? [Medium]

Answer: Semantic HTML helps search engines understand the structure and meaning of web pages. Elements such as <header>, <article>, <section>, <main>, and <footer> improve content organization, accessibility, and search engine indexing.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q39. What are Progressive Web Apps (PWAs)? [Hard]

Answer: Progressive Web Apps are web applications that provide an app-like experience using modern web technologies. They support offline functionality, push notifications, responsive layouts, and installation on supported devices through Service Workers and Web App Manifests.

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Q40. What are some HTML best practices followed in modern web development? [Medium]

Answer: Use semantic HTML elements, maintain proper document structure, write accessible forms, include alt text for images, use descriptive titles and meta tags, validate HTML, minimize unnecessary nesting, optimize multimedia, and separate structure (HTML), presentation (CSS), and behavior (JavaScript).

Interview tip: Define it clearly, give a small example, and mention one practical use or limitation.

Study checklist

Explain the answer without reading.
Write one small example.
Compare framework or database version differences in official documentation.

1. HTML Interview Questions Interview Questions and Answers

Practice one question at a time. Read the question, answer aloud, then compare your explanation with the answer.

← Back to the complete interview hub

Study method: define the concept, give a small example, and mention one practical use or limitation.