HTML (HyperText Markup Language) is the foundation of web development, serving as the backbone for structuring content on the web. Whether you're starting out as a front-end developer or brushing up for an interview, HTML knowledge is essential. To help you prepare for an interview, we’ve compiled a list of 50 frequently asked HTML interview questions along with detailed answers. These questions range from the basics to more advanced topics, ensuring a solid understanding of HTML.
50 Most Asked HTML Interview Questions and Answers
1. What is HTML?
Answer: HTML stands for HyperText Markup Language, and it is the standard language for creating web pages. It defines the structure of a web page and its elements, including headings, paragraphs, links, images, and more.
2. What is a DOCTYPE in HTML?
Answer: The DOCTYPE declaration tells the browser which version of HTML the page is written in. It must be the first line in an HTML document, and in HTML5, it's simply <!DOCTYPE html>.
3. What is the difference between HTML and XHTML?
Answer: HTML is more forgiving with syntax, while XHTML is stricter. XHTML requires all tags to be properly closed and written in lowercase, and elements must be properly nested.
4. What are HTML tags?
Answer: HTML tags are the building blocks of HTML pages. They define the structure and elements of a webpage. Tags are enclosed in angle brackets, such as <p> for a paragraph or <h1> for a heading.
5. What is the difference between block-level and inline elements?
Answer: Block-level elements, like <div> and <p>, take up the full width of their container and start on a new line. Inline elements, like <span> and <a>, only take up as much width as necessary and do not break the flow of the text.
6. What is the purpose of the <head> tag?
Answer: The <head> tag contains metadata about the document, such as the title, character set, links to stylesheets, and scripts. It is placed before the <body> tag in an HTML document.
7. What is the <title> tag used for?
Answer: The <title> tag defines the title of the HTML document. This title is displayed on the browser’s title bar or tab, and it is also used by search engines.
8. What is the difference between <div> and <span>?
Answer: <div> is a block-level container used for grouping elements, while <span> is an inline container used to style parts of text or other inline elements.
9. What is the <meta> tag?
Answer: The <meta> tag provides metadata about the HTML document. This can include information about the document's character encoding, author, description, and keywords for search engines.
10. How do you create a hyperlink in HTML?
Answer: You create a hyperlink using the <a> (anchor) tag. For example:<a href="https://www.example.com">Click here</a> creates a clickable link to the provided URL.
11. What is the purpose of the alt attribute in an <img> tag?
Answer: The alt attribute provides alternative text for an image if it cannot be displayed. It also helps improve accessibility and is used by screen readers for visually impaired users.
12. How can you create a table in HTML?
Answer: A table is created using the <table> tag along with child tags like <tr> for rows, <th> for header cells, and <td> for data cells. Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
</table>
13. What are semantic HTML elements?
Answer: Semantic HTML elements clearly describe their meaning in a way that both the browser and developers understand. Examples include <header>, <footer>, <article>, and <section>.
14. What is the difference between <strong> and <b> tags?
Answer: Both tags make text bold, but <strong> indicates that the text is of strong importance, while <b> is purely for stylistic purposes.
15. What is the role of the <form> tag in HTML?
Answer: The <form> tag is used to create a form for user input. It can contain various input elements like text fields, radio buttons, checkboxes, and submit buttons.
16. What is the action attribute in a form?
Answer: The action attribute in the <form> tag specifies the URL where the form data should be sent when it is submitted.
17. How do you add a comment in HTML?
Answer: HTML comments are added using the following syntax: <!-- This is a comment -->. Comments are not displayed in the browser.
18. What is the purpose of the <iframe> tag?
Answer: The <iframe> tag is used to embed another HTML document within the current document. For example, it can be used to display a video or a map.
19. What are the global attributes in HTML?
Answer: Global attributes are attributes that can be used on any HTML element. These include class, id, style, title, and data-* attributes.
20. What is the difference between the id and class attributes in HTML?
Answer:
idis a unique identifier for an HTML element. An element can only have oneidand it must be unique within the document.classis used to group multiple elements and can be shared by many elements for styling or scripting purposes.
21. How do you create a list in HTML?
Answer: You can create ordered lists using the <ol> tag and unordered lists using the <ul> tag. Each item in the list is placed inside an <li> (list item) tag.
22. What is the <script> tag used for?
Answer: The <script> tag is used to embed or reference JavaScript code in an HTML document.
23. What are the new HTML5 form elements?
Answer: HTML5 introduced new input types such as email, date, url, and range, as well as new elements like <datalist>, <output>, and <progress>.
24. What is the <link> tag used for?
Answer: The <link> tag is used to link external resources, such as stylesheets. For example, to link a CSS file:<link rel="stylesheet" href="styles.css">.
25. What is the rel attribute in a <link> tag?
Answer: The rel attribute specifies the relationship between the current document and the linked resource. For example, rel="stylesheet" is used to link a CSS file.
26. What is the difference between <em> and <i> tags?
Answer: Both tags make text italic, but <em> denotes emphasized text, implying more importance, while <i> is used for stylistic italicization without implying importance.
27. How do you add an image in HTML?
Answer: An image is added using the <img> tag with the src attribute specifying the path to the image, and the alt attribute providing alternative text.
Example: <img src="image.jpg" alt="A description of the image">.
28. What is the <nav> tag in HTML5?
Answer: The <nav> tag is a semantic element introduced in HTML5 to define a section of navigation links.
29. What is the use of the <figure> and <figcaption> tags?
Answer: The <figure> tag is used to group media content like images or diagrams, while <figcaption> provides a caption for the content inside the <figure> element.
30. What is the purpose of the <main> tag in HTML5?
Answer: The <main> tag specifies the main content of the document that is unique to the page, as opposed to repeated content like navigation or sidebars.
31. What is the purpose of the <section> tag?
Answer: The <section> tag defines a section of a document, such as chapters, headers, footers, or other thematic grouping of content. It is a semantic element used to organize content in a logical manner.
32. How do you specify a document’s character encoding in HTML?
Answer: You can specify a document's character encoding using the <meta> tag inside the <head> section. The most common encoding is UTF-8:<meta charset="UTF-8">.
33. What is the difference between the <input> element with type="button" and a <button> element?
Answer: The <input> element with type="button" creates a simple button without any content inside, while the <button> element can contain HTML or text content, allowing for more complex button structures.
34. What are void elements in HTML?
Answer: Void elements are HTML elements that do not have a closing tag or any content inside them. Examples include <img>, <input>, <br>, and <hr>.
35. What is the difference between the <html> and <body> tags?
Answer:
- The
<html>tag is the root element that wraps all the other HTML elements in a document. - The
<body>tag contains the content that is displayed in the browser, such as text, images, and links.
36. How do you make a webpage mobile-friendly using HTML?
Answer: You can make a webpage mobile-friendly by adding the viewport meta tag:<meta name="viewport" content="width=device-width, initial-scale=1.0">. This ensures the page scales correctly on different screen sizes.
37. What is the difference between defer and async attributes in the <script> tag?
Answer:
async: The script is downloaded asynchronously and executed as soon as it is available, without blocking the page rendering.defer: The script is downloaded in parallel with the page but executes after the document has been parsed.
38. What is the <details> tag in HTML5?
Answer: The <details> tag is used to create a collapsible content box. It can be expanded or collapsed when the user clicks on it. Inside the <details> tag, you can use the <summary> tag to provide a heading or label.
39. How do you create a checkbox in HTML?
Answer: A checkbox is created using the <input> tag with type="checkbox". Example:<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to the newsletter.
40. What are data-* attributes in HTML?
Answer: The data-* attributes allow developers to store extra information on standard, semantic HTML elements. For example:<div data-user-id="12345">User Info</div>. This data can be accessed via JavaScript.
41. What is the purpose of the <base> tag?
Answer: The <base> tag specifies the base URL for all relative URLs in the document. It must be included inside the <head> section. Example:<base href="https://www.example.com/">.
42. What is the difference between localStorage and sessionStorage in HTML5?
Answer:
localStorage: Stores data persistently, even after the browser is closed and reopened. Data does not expire unless manually deleted.sessionStorage: Stores data for the duration of the page session, and the data is cleared when the browser or tab is closed.
43. What is the <noscript> tag?
Answer: The <noscript> tag provides content for users who have JavaScript disabled in their browsers or when the browser does not support JavaScript. It can be used to display alternative content or messages.
44. How do you embed a video in an HTML page?
Answer: A video can be embedded using the <video> tag. Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
45. How do you include audio in an HTML page?
Answer: You can include audio using the <audio> tag. Example:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
46. What is the <mark> tag in HTML5?
Answer: The <mark> tag highlights text in a document, marking it as important or relevant. Example:<p>This is <mark>highlighted</mark> text.</p>.
47. How do you create a dropdown list in HTML?
Answer: You create a dropdown list using the <select> tag with <option> tags inside. Example:
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
48. What is the purpose of the <aside> tag in HTML5?
Answer: The <aside> tag defines content that is related to the main content but not essential to it. This is typically used for sidebars or extra information like quotes or advertisements.
49. What is the purpose of the autofocus attribute in HTML5?
Answer: The autofocus attribute is used in form elements to automatically focus the input field when the page loads. For example:<input type="text" name="username" autofocus>.
50. How do you create a radio button in HTML?
Answer: A radio button is created using the <input> tag with type="radio". Radio buttons allow users to select only one option from a group. Example:
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Conclusion
HTML serves as the foundation for web development, and understanding its concepts is essential for every developer. By reviewing these 50 most commonly asked HTML interview questions, you’ll be well-prepared to tackle any HTML-related queries during your job interview. Whether you're a beginner or an experienced developer, mastering HTML will help you create better, more accessible, and structured websites.