This is a list of 50 commonly asked HTML interview questions and It is suitable for interview preparation, ranging from basic to advanced topics. These questions are often used to assess your knowledge of HTML during technical interviews.
1. What is HTML?
HTML (HyperText Markup Language) is the standard language used for creating web pages. It defines the structure and content of a webpage through tags.
2. What are the different types of HTML tags?
HTML tags can be categorized into:
Structural tags: <html>, <head>, <body>, <header>, <footer>Text formatting tags: <h1>, <p>, <b>, <i>, <strong>, <em>
Media tags: <img>, <audio>, <video>
Links and lists: <a>, <ul>, <ol>, <li>
Form elements: <form>, <input>, <textarea>, <button>
3. What is the purpose of the <head> and <body> tags in HTML?
The <head> tag contains meta-information about the document like title, charset, links to stylesheets, and scripts. The tag contains the content of the webpage (text, images, links, etc.).
4. What is the difference between block-level and inline elements in HTML?
Block-level elements take up the full width available and start on a new line (e.g., <div>, <p>, <h1>). Inline elements take up only as much width as necessary and do not start on a new line (e.g., <span>, <a>, <b>).5. What is the structure of an HTML document?
An HTML document typically consists of the following structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Put Content here -->
</body>
</html>
The <meta> tag provides metadata about the document, such as character encoding, keywords, and author information, often used for SEO and page settings.
7. What is the difference between <div> and <span> tags?
<div> is a block-level container, used to group content together, whereas <span> is an inline container, used for styling or grouping a small portion of content.
8. What is the <title> tag used for in an HTML document?
The <title> tag defines the title of the web page, which appears in the browser’s title bar or tab.
9. What is the purpose of the alt attribute in the <img> tag?
The alt attribute provides alternative text for an image if it cannot be displayed. It is also important for accessibility.
10. What are semantic elements in HTML? Can you give examples?
Semantic elements have meaningful names and provide context about the content they contain. Examples include <article>, <section>, <nav>, <header>, <footer>, <aside>, and <figure>.
11. Explain the <a> tag and its attributes.
The <a> tag defines a hyperlink, allowing users to navigate to other web pages or resources. Key attributes: href: URL of the destination. target: Specifies where to open the link (e.g., _blank for a new tab). title: Provides additional information on hover.
12. What are the different ways to include CSS in an HTML document?
CSS can be included in HTML in three ways: Inline: Using the style attribute within an element. Internal: Using the <style> tag within the <head>. External: Linking to an external CSS file with the <link> tag.
13. What is the <link> tag used for?
The <link> tag is used to link external resources to the HTML document, most commonly for linking external CSS stylesheets.
14. What is the purpose of the id attribute in HTML?
The id attribute uniquely identifies an element within a page, allowing it to be targeted with CSS or JavaScript.
15. What is the class attribute in HTML?
The class attribute is used to assign one or more classes to an element, allowing it to be styled or targeted with CSS and JavaScript.
16. What is the <form> element used for in HTML?
The <form> element is used to collect user input through various form controls like text fields, checkboxes, and buttons.
17. How do you create a hyperlink in HTML?
A hyperlink is created using the <a> tag
<a href="https://www.example.com">Click here</a>
18. What is the difference between the <ol> and <ul> tags in HTML?
<ol> represents an ordered list (numbered), while <ul> represents an unordered list (bulleted).
19. How do you create an image link in HTML?
You can create an image link by nesting an <img> tag inside an <a> tag
<a href="https://www.example.com">
<img src="image.jpg" alt="Example Image">
</a>
20. What are HTML entities and why are they used?
HTML entities are special characters or symbols that cannot be directly typed into the HTML. They are represented by a code, e.g., < for < or & for &.
21. What is the difference between the <strong> and <b> tags?
<strong> semantically indicates that the enclosed text is of strong importance, while <b> simply makes the text bold without indicating importance.
22. What is the difference between the <em> and <i> tags?
<em> semantically indicates emphasized text, typically rendered as italic, while <i> just renders text in italics without emphasizing its importance.
23. What are HTML5 doctype declarations?
The doctype declaration specifies the document type and version of HTML:
<!DOCTYPE html>
24. What is the <header> tag used for?
The <header> tag defines introductory content or navigational links at the top of a webpage or section.
25. Explain the <footer> tag in HTML5.
The <footer> tag represents the footer section of a document or section, typically containing information like copyright, links, or contact information.
26. What is the <section> tag in HTML5 used for?
The <section> tag represents a distinct section of content in a document, usually with a heading.
27. What are the new form input types introduced in HTML5?
New input types in HTML5 include
email, tel, date, number, url, search, and range.
28. What is the <nav> element used for in HTML?
The <nav> tag is used to define navigation links or a navigation menu in a document.
29. Explain the difference between <table>, <thead>, <tbody>, and <tfoot> tags.
<table> defines the table structure. <thead> defines the header section of the table, <tbody> defines the main body, and <tfoot> defines the footer section.
30. How do you embed audio and video in HTML5?
Use the <audio> and <video> tags
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
31. What is the purpose of the target attribute in the <a> tag?
The target attribute defines where the linked document will open. For example, target=”_blank” opens the link in a new tab.
32. What is the <iframe> tag used for?
The <iframe> tag is used to embed another HTML document within the current page.
33. What is the alt attribute in the <img> tag?
The alt attribute provides a text description of an image for screen readers or if the image fails to load.
34. What is the difference between GET and POST methods in a form?
GET appends data to the URL and is visible in the browser’s address bar. POST sends data in the request body and is more secure for submitting sensitive data.
35. What is the <canvas> element in HTML5?
The <canvas> element is used for drawing graphics via JavaScript, such as graphics, charts, or images.
36. Explain how to create a form with multiple input types in HTML.
A form with multiple input types can be created like this:
<form>
<input type="text" name="name">
<input type="email" name="email">
<textarea name="message"></textarea>
<input type="submit" value="Submit">
</form>
37. How do you create a drop-down menu in HTML?
A drop-down menu is created using the <select> tag
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
38. What is the difference between the href and src attributes in HTML?
href is used to specify the destination of a link (e.g., <a href=”url”>), while src is used to specify the source of media (e.g., <img src=”image.jpg”>).
39. What are the new features in HTML5 regarding forms and input validation?
HTML5 introduces new input types for validation (email, url, number, etc.), as well as attributes like required, pattern, min, max, and step.
40. What is the <progress> element used for?
The <progress> element is used to display the completion status of a task, such as a file upload.
41. How do you create tables in HTML?
Tables are created using the <table>, <tr>, <td>, and <th> tags. Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
42. What are HTML data attributes, and how are they used?
Data attributes allow you to store custom data on HTML elements. They are defined with data-*: <div data-id=”123″ data-name=”item”></div>
43. How do you optimize an HTML document for search engines?
There are many things to optimize website.
Use meaningful and descriptive tags.
Use alt attributes for images.
Ensure proper heading hierarchy.
Use meta tags like description and keywords
44. What is the HTML5 localStorage and sessionStorage APIs
localStorage stores data with no expiration date, accessible across sessions.
sessionStorage stores data for the duration of a session.
45. What is the <mark> tag used for?
The <mark> tag is used to highlight text within a document.
46. How does the <picture> tag work, and when should it be used?
The <picture> tag allows you to specify different images for different display conditions (e.g., screen size or resolution).
<picture>
<source srcset="image1.jpg" media="(max-width: 600px)">
<img src="image2.jpg" alt="example">
</picture>
47. What is the srcset attribute used for in the <img> tag?
The srcset attribute provides multiple image sources to the browser for responsive design, based on screen size or resolution.
48. What is ARIA in HTML? How is it helpful for accessibility?
ARIA (Accessible Rich Internet Applications) is a set of attributes that help improve web accessibility, especially for screen readers, by adding roles, states, and properties.
49. What is the role of the defer and async attributes in the <script> tag?
defer delays the script execution until after the document is parsed. async loads the script asynchronously, without blocking page rendering.
50. How does the <noscript> tag work in HTML?
The <noscript> tag is used to define content that will be displayed if JavaScript is not supported or is disabled in the browser.