HTML Interview QA

Welcome to our comprehensive HTML interview preparation guide. HTML (HyperText Markup Language) is the standard language for creating web pages and web applications. Every web developer, regardless of their specialization, must have a deep understanding of HTML structure, semantic tags, forms, and accessibility standards. In this section, we cover everything from basic tags to advanced HTML5 features like local storage and multimedia elements. Reviewing these questions will ensure you are ready to tackle any frontend technical screen.

1. What is HTML, and how does it relate to the DOM?

HTML (HyperText Markup Language) is the standard markup language used to structure web pages and their content. However, in an interview, it's crucial to explain its relationship to the DOM.

When a browser reads an HTML document, it creates a Document Object Model (DOM). The DOM is an object-oriented representation of the HTML document that acts as an interface between JavaScript and the document itself.

<!-- The Browser parses this HTML -->
<html>
  <body>
    <h1 id="heading">Hello World</h1>
  </body>
</html>

// And creates a DOM tree where JavaScript can manipulate it:
document.getElementById('heading').textContent = "Updated Text";
Pro Tip: Interviewers often ask this to see if you understand that HTML is static text, but the DOM is the living, in-memory structure that frameworks like React manipulate.
2. What is the difference between HTML and HTML5? Can you name some new features?
3. What are Semantic HTML tags and why are they critical?
4. What is the difference between normal <script>, <script async>, and <script defer>?

This is a critical web performance and rendering question:

  • Normal <script>: HTML parsing pauses immediately while the script is fetched and executed, blocking page rendering until complete.
  • <script async>: The script is fetched asynchronously in parallel with HTML parsing. As soon as it downloads, HTML parsing pauses to execute the script immediately. Order of execution is not guaranteed.
  • <script defer>: The script is fetched asynchronously in parallel with HTML parsing, but its execution is deferred until HTML parsing completes (before DOMContentLoaded). Scripts execute in the exact order they appear in the document.
5. What is the purpose of the <head> tag?
The <head> tag contains metadata about the document such as title, character set, styles, scripts, and other information not displayed directly.
6. What are void elements in HTML?
Void elements are HTML elements that do not have closing tags. Examples include <br>, <hr>, <img>, <input>.
7. What is the difference between id and class in HTML?
An id is unique and can be used to identify a single element, while a class can be used on multiple elements for styling or scripting.
8. What does the <doctype> declaration do?
The <!DOCTYPE> declaration defines the document type and version of HTML being used.
9. What is the difference between block and inline elements?
Block elements start on a new line and take full width. Inline elements do not start on a new line and only take as much width as needed.
10. What is the use of the <meta> tag?
The <meta> tag provides metadata like page description, keywords, author, and character encoding.
11. How do you create a hyperlink in HTML?
Using the <a> tag: <a href="https://example.com">Visit Example</a>.
12. What are formatting tags in HTML?
Formatting tags include <b>, <i>, <u>, <mark>, <strong>, <em> that change the appearance or emphasize content.
13. What is the purpose of <div> and <span>?
<div> is used to group block-level elements, and <span> is used to group inline elements for styling or scripting.
14. What is the difference between relative and absolute URLs?
Relative URLs link to a resource within the same site. Absolute URLs include the full path (e.g., https://example.com/page).
15. What are HTML attributes?
Attributes provide additional information about HTML elements, like id, class, href, src, alt, etc.
16. What is the <iframe> tag used for?
It embeds another HTML page within the current page.
17. What is a list in HTML?
Lists can be ordered (<ol>) or unordered (<ul>) and contain list items (<li>).
18. What is the use of the <label> tag?
The <label> tag defines a label for an input element, improving form accessibility.
19. How do you create a table in HTML?
Using <table>, <tr>, <th>, and <td> tags to create rows and cells.
20. What is the difference between <strong> and <b>?
<strong> is semantic (indicates importance), while <b> is purely visual (bold text).
21. What is the role of the <script> tag?
It embeds JavaScript code into the HTML page.
22. What are self-closing tags?
Tags that do not require a closing tag, e.g., <br />, <img />, <input />.
23. What is the difference between <em> and <i>?
<em> is semantic (emphasizes meaning), <i> is visual (italic style).
24. What is nesting in HTML?
Placing elements inside other elements. Proper nesting is crucial for correct rendering.
25. What are global attributes in HTML?
Attributes common to all elements, like id, class, style, title, and data-*.
26. What is accessibility in HTML?
Ensuring that web content is usable by all people, including those with disabilities. Using semantic HTML helps improve accessibility.
27. What is the <canvas> tag used for?
It provides a drawing area for graphics via JavaScript.
28. How can you comment in HTML?
Using <!-- comment here --> syntax.
29. What is the use of <fieldset> and <legend>?
<fieldset> groups related form elements, and <legend> defines a title for the group.
30. What is the difference between <section> and <div>?
<section> is semantic and defines a section of related content. <div> is non-semantic and used for grouping content for styling.
31. What is the purpose of the <style> tag in HTML?
The <style> tag is used to include internal CSS styles within an HTML document, allowing you to define how elements should be displayed.
32. How is the <link> tag used in HTML?
The <link> tag is used to link external resources like stylesheets to an HTML document. Example: <link rel="stylesheet" href="styles.css">.
33. What are the differences between <head> and <body> tags?
The <head> contains metadata, links to styles/scripts, and is not visible. The <body> contains the visible content of the web page.
34. What is the role of <title> tag in HTML?
The <title> tag defines the title of the web page shown on the browser tab and is important for SEO.
35. What are empty elements in HTML?
Empty elements are HTML elements that do not have any content or closing tag. Examples include <br>, <img>, and <input>.
36. What are the types of semantic tags in HTML?
Common types of semantic tags include structure tags like <header>, <footer>, <main>, <section>, <article>, and <nav>, as well as tags like <figure>, <figcaption>, and <aside> for auxiliary content.
37. What are examples of non-semantic tags?
Non-semantic tags include <div> and <span>. These do not convey any specific meaning about their content and are mostly used for styling purposes with CSS.
38. What are types of syntactic elements in HTML?
Types of syntactic elements include structural elements (like <html>, <head>, <body>), text formatting tags (like <b>, <i>, <u>), and form elements (like <form>, <input>, <label>).
39. Is there a difference between formatting tags and semantic formatting tags?
Yes. Formatting tags change the appearance (e.g., <b>, <i>), while semantic formatting tags also provide meaning (e.g., <strong>, <em>).
40. Why is using semantic formatting preferred over purely visual formatting?
Semantic formatting improves accessibility, SEO, and makes the code more maintainable by conveying meaning in addition to style.

Tips for Success

We hope these HTML interview questions help you solidify your frontend foundation. Remember, writing semantic, accessible HTML is a critical skill that sets apart great developers from good ones. Keep practicing building structured web pages, and good luck with your upcoming interviews!