50 HTML Interview Questions Every Front-End Developer Should Know
1. What is HTML?
Answer: HTML (HyperText Markup Language) is the standard markup language used to create web pages. It structures content on the web by using various elements and tags.
2. What are HTML tags?
Answer: HTML tags are the building blocks of HTML that define elements and specify how content should be displayed. Tags are typically enclosed in angle brackets (e.g., <p>, </p>).
3. What is the difference between HTML and XHTML?
Answer: HTML is more flexible in its syntax, while XHTML (Extensible HyperText Markup Language) is stricter and follows XML rules, such as properly closing all tags.
4. What is an HTML element?
Answer: An HTML element consists of a start tag, content, and an end tag (e.g., <p> This is a paragraph. </p>). Elements structure the content of a webpage.
5. What is an HTML attribute?
Answer: HTML attributes provide additional information about elements. They are written in the start tag and usually come in name-value pairs, like href="https://example.com" in an <a> tag.
6. What are void elements in HTML?
Answer: Void elements are HTML elements that do not have closing tags, such as <img>, <br>, and <input>.
7. What is the difference between <div> and <span>?
Answer: <div> is a block-level element, while <span> is an inline element. Divides content into sections, whereas <span> is used to apply styles or group content within inline text.
8. How do you create a hyperlink in HTML?
Answer: Hyperlinks are created using the <a> tag. For example:
<a href="https://example.com">Visit Example</a>
9. What is the purpose of the alt attribute in an <img> tag?
Answer: The alt attribute provides alternative text for images. It improves accessibility and is displayed if the image fails to load.
10. What is the semantic difference between <b> and <strong>, <i> and <em>?
Answer: <strong> and <em> convey emphasis, which screen readers recognize, while <b> and <i> only apply visual formatting like bold or italics without semantic meaning.
11. What is the purpose of the DOCTYPE declaration in HTML?
Answer: The DOCTYPE declaration informs the browser about the version of HTML being used, ensuring proper rendering. For HTML5, the declaration is <!DOCTYPE html>.
12. What is the purpose of the meta tag?
Answer: The meta tag provides metadata about the HTML document, such as the character set, viewport settings, author, and SEO information.
13. What is the difference between block-level and inline elements?
Answer: Block-level elements (e.g., <div>, <p>) start on a new line and take up the full width available. Inline elements (e.g., <span>, <a>) do not start on a new line and only take up as much width as necessary.
14. What is the <head> section in HTML?
Answer: The <head> section contains meta-information about the document (e.g., title, character set, linked CSS/JS files) that does not appear in the webpage's body.
15. What is the purpose of the <title> tag?
Answer: The <title> tag sets the title of the webpage, which appears in the browser's title bar or tab. It also affects SEO.
16. What is the difference between <ol>, <ul>, and <li>?
Answer: <ol> creates an ordered (numbered) list, <ul> creates an unordered (bulleted) list, and <li> represents individual list items within both lists.
17. What is the <form> tag used for?
Answer: The <form> tag is used to create a form that collects user input and sends it to a server. It can contain elements like text fields, checkboxes, and buttons.
18. What are the action and method attributes in a form?
Answer: action specifies the URL where form data should be submitted, and method defines how the data is submitted, typically GET or POST.
19. How do you make a text input field required in HTML?
Answer: Use the required attribute within the <input> element:
<input type="text" required>
20. What is the difference between GET and POST methods in forms?
Answer: GET appends form data to the URL, while POST sends data within the request body, providing more security and enabling larger data submission.
21. What are semantic HTML elements?
Answer: Semantic HTML elements clearly describe their meaning, both to the browser and developers, such as <header>, <footer>, <article>, and <section>.
22. What is the purpose of the <section> tag?
Answer: The <section> tag defines a section in a document, representing a thematic grouping of content, often with a heading.
23. What is the <nav> tag used for?
Answer: The <nav> tag is used to define navigation links, such as a menu or table of contents.
24. What is the purpose of the <header> and <footer> tags?
Answer: <header> represents the introductory content of a section, like titles or logos. <footer> represents the bottom part, often containing copyright, legal info, or links.
25. What is the <aside> tag?
Answer: <aside> defines content related to the main content but separated from it, often used for sidebars or extra information.
26. How do you embed an image in an HTML page?
Answer: Use the <img> tag with the src attribute to specify the image source:
<img src="image.jpg" alt="description">
27. How do you link an external CSS file to an HTML document?
Answer: Use the <link> tag in the <head> section:
<link rel="stylesheet" href="styles.css">
28. What is the <table> tag used for?
Answer: The <table> tag creates a table in HTML. It consists of rows (<tr>), headers (<th>), and data cells (<td>).
29. What is the purpose of the <caption> tag in a table?
Answer: The <caption> tag defines a title or summary for the table and is typically displayed above it.
30. What is the difference between the colspan and rowspan attributes in a table?
Answer: colspan merges cells horizontally (across columns), while rowspan merges cells vertically (across rows).
31. How do you embed a video in HTML?
Answer: Use the <video> tag with src and optional attributes like controls:
<video src="video.mp4" controls></video>
32. How do you embed audio in HTML?
Answer: Use the <audio> tag with src and optional attributes like controls:
<audio src="audio.mp3" controls></audio>
33. What is the purpose of the alt attribute in an <img> tag?
Answer: The alt attribute provides alternative text that is displayed if the image cannot load or is used by screen readers for accessibility.
34. What is the <iframe> tag used for?
Answer: The <iframe> tag embeds another HTML page or external content (like videos or maps) into the current page.
35. What is the difference between <button> and <input type="button">?
Answer: <button> can contain more complex content like text, images, or HTML, while <input type="button"> is a simple button with a value attribute.
36. What is the <blockquote> tag used for?
Answer: The <blockquote> tag is used to represent a long quotation from another source, often displayed with indentation.
37. What is the purpose of the <br> and <hr> tags?
Answer: <br> creates a line break (new line), while <hr> represents a horizontal rule (thematic break).
38. How do you create a dropdown list in HTML?
Answer: Use the <select> tag with <option> elements:
<select> <option>Option 1</option> <option>Option 2</option> </select>
39. What is the <mark> tag used for?
Answer: The <mark> tag highlights text, typically displayed with a yellow background.
40. How do you create a checkbox and a radio button in HTML?
Answer: Use <input type="checkbox"> for a checkbox and <input type="radio"> for a radio button.
41. What is the <label> tag used for?
Answer: The <label> tag provides a clickable label for an <input> element, improving accessibility.
42. How do you create an email link in HTML?
Answer: Use the mailto: attribute in an <a> tag:
<a href="mailto:example@example.com">Email us</a>
43. What is the difference between inline, inline-block, and block elements?
Answer: Inline elements do not start a new line and take up only the necessary width, inline-block elements take up their content's width but behave like block elements in terms of layout, and block elements start a new line and take up the full width.
44. How do you specify character encoding in HTML?
Answer: Use the <meta charset="UTF-8"> tag in the <head> to specify the character encoding.
45. What is the purpose of the <noscript> tag?
Answer: The <noscript> tag displays content for users who have JavaScript disabled in their browser.
46. How do you create a responsive webpage?
Answer: By using the <meta name="viewport"> tag and CSS media queries to adjust the layout based on screen size.
47. How do you add comments in HTML?
Answer: Use <!-- Comment text here -->.
48. What is the purpose of the <base> tag?
Answer: The <base> tag specifies the base URL for all relative links on a page.
49. What is the <time> tag used for?
Answer: The <time> tag represents a specific time or date, useful for events or structured data.
50. What is the <data> tag used for?
Answer: The <data> tag links content with machine-readable data (e.g., <data value="2024">2024</data>).
51. How do you add tooltips in HTML?
Answer: Use the title attribute to display a tooltip when the user hovers over an element.
52. What is the difference between <script> in <head> vs <body>?
Answer: Scripts in the <head> are executed before the page renders, which may delay loading. Scripts in the <body> (especially at the bottom) execute after the content loads, improving performance.