Top 100 HTML Interview Question and Answers PDF Download

1. What is HTML? HTML stands for Hypertext Markup Language. It is the standard markup language used to create and structure content on websites.

2. What are the basic building blocks of an HTML document? The basic building blocks of an HTML document are elements, tags, and attributes.

3. What are HTML elements? HTML elements are the individual components that make up an HTML document. They consist of opening and closing tags with content in between.

4. What is the structure of an HTML element? An HTML element has an opening tag, content, and a closing tag. For example: <tag>content</tag>.

5. What are HTML tags? HTML tags are keywords enclosed in angle brackets that define an HTML element.

6. What is an HTML attribute? An HTML attribute provides additional information about an element and is defined within the opening tag of the element.

7. What is the purpose of the <!DOCTYPE> declaration in an HTML document? The <!DOCTYPE> declaration specifies the version and type of HTML used in the document.

8. What is the purpose of the <meta> tag in HTML? The <meta> tag is used to provide metadata about the HTML document, such as character encoding, author, and viewport settings.

9. What are the different heading levels in HTML? The heading levels in HTML range from h1 (highest) to h6 (lowest), used to define different levels of headings on a page.

10. What is the <title> tag used for in HTML? The <title> tag sets the title of the HTML document, which appears in the browser's title bar or tab.

11. What is the difference between block-level elements and inline elements? Block-level elements start on a new line and take up the full width available, while inline elements only take up the necessary width and do not start on a new line.

12. Explain the <img> tag and its attributes. The <img> tag is used to embed images in an HTML document. Its attributes include src (source), alt (alternative text), width, height, and more.

13. What is the <a> tag used for? The <a> tag creates a hyperlink to another web page or resource.

14. Explain the difference between absolute and relative URLs. An absolute URL specifies the complete web address of a resource, while a relative URL points to a resource relative to the current page's location.

15. What is the purpose of the <ol> and <ul> tags in HTML? The <ol> tag represents an ordered (numbered) list, while the <ul> tag represents an unordered (bulleted) list.

16. What is the <li> tag used for? The <li> tag defines a list item within an ordered or unordered list.

17. Explain the <table> tag and its related tags. The <table> tag is used to create a tabular data structure. It is often accompanied by <tr> (table row), <th> (table header), and <td> (table data) tags.

18. What is the purpose of the <form> tag in HTML? The <form> tag is used to create a form that allows users to submit data to a web server.

19. Explain the <input> tag and its different types. The <input> tag is used to create input fields in forms. It has different types, such as text, password, checkbox, radio, submit, etc.

20. What is the difference between the <button> and <input type="submit"> tags? Both can be used to create buttons, but <button> allows for more flexibility in content and styling.

21. What is the purpose of the <label> tag in HTML? The <label> tag is used to associate a label with an input element, improving accessibility and user experience.

22. Explain the <textarea> tag. The <textarea> tag creates a multi-line text input field in a form.

23. What are HTML entities? Give an example. HTML entities are special characters represented by their entity names or codes. For example, "<" represents the less-than sign ("<").

24. Explain the <br> tag and its purpose. The <br> tag inserts a line break or a new line within text.

25. What is the <hr> tag used for? The <hr> tag creates a horizontal rule (line) to separate content.

26. What is the purpose of the <div> and <span> tags? The <div> tag is used to create block-level containers, while the <span> tag creates inline containers for styling purposes.

27. Explain the concept of semantic HTML. Semantic HTML involves using HTML elements that convey meaning, making the document structure clearer and more meaningful for search engines and assistive technologies.

28. What is the purpose of the <header>, <footer>, <nav>, and <main> tags in semantic HTML?

    • The <header> tag represents the header of a section or page.
    • The <footer> tag represents the footer of a section or page.
    • The <nav> tag represents navigation links.
    • The <main> tag represents the main content of a page.

29. What is the <article> tag used for? The <article> tag defines a self-contained piece of content that can be independently distributed and reused.

30. Explain the <aside> tag in HTML. The <aside> tag is used for content that is indirectly related to the main content, such as sidebars or callout boxes.

31. What is the purpose of the <section> tag? The <section> tag represents a thematic grouping of content, typically with a heading.

32. Explain the <abbr> tag. The <abbr> tag is used to define an abbreviation or acronym, providing an optional full explanation.

33. What is the <cite> tag used for? The <cite> tag is used to indicate the title of a creative work, such as a book, movie, or song.

34. What is the <time> tag in HTML5? The <time> tag is used to represent a specific time or a range of time.

35. Explain the <audio> and <video> tags and their attributes. The <audio> tag is used to embed audio content, and the <video> tag is used to embed video content. Their attributes include src, controls, autoplay, and more.

36. What is the <canvas> tag used for in HTML5? The <canvas> tag is used to draw graphics, animations, or interactive elements using JavaScript.

37. Explain the purpose of the <svg> tag. The <svg> tag is used to create scalable vector graphics for drawings and illustrations.

38. What is the purpose of the <iframe> tag? The <iframe> tag is used to embed another HTML document or a web page within the current document.

39. What are data attributes in HTML5? Data attributes are custom attributes that start with "data-" and can be used to store additional data related to an element.

40. Explain the concept of accessibility in HTML. Accessibility in HTML involves making web content usable and understandable by people with disabilities, such as screen readers for the visually impaired.

41. How do you create a hyperlink that opens in a new tab? Use the target="_blank" attribute in the <a> tag to open the link in a new tab or window.

42. How do you link to an email address using HTML? Use the "mailto:" protocol in the href attribute of the <a> tag to create a link to an email address.

43. What is the purpose of the <map> and <area> tags in HTML? The <map> tag defines an image map, and the <area> tag defines clickable areas within the image map.

44. What is the difference between <strong> and <b> tags, and <em> and <i> tags? Both <strong> and <b> make text bold, but <strong> carries semantic weight for important content. Similarly, <em> and <i> make text italic, but <em> carries semantic weight for emphasized content.

45. Explain the concept of responsive web design in HTML. Responsive web design involves creating web pages that adapt and display well on different devices and screen sizes.

46. How do you add a background image to an HTML element? Use the background-image property in CSS to add a background image to an HTML element.

47. What is the purpose of the <details> and <summary> tags in HTML5? The <details> tag is used to create a disclosure widget for additional information, and the <summary> tag provides a summary or heading for the details.

48. What are Web Storage APIs, and how do they differ from cookies? Web Storage APIs (localStorage and sessionStorage) provide a way to store data on the client-side without expiration, unlike cookies, which have an expiration date and are sent to the server with every request.

49. What is the purpose of the <noscript> tag? The <noscript> tag contains content that should be displayed if the user's browser does not support or has disabled JavaScript.

50. How do you embed a YouTube video in an HTML document? YouTube provides an embed code that you can copy and paste into your HTML document to embed a video.

51. What are the new semantic elements introduced in HTML5? HTML5 introduced new semantic elements like <article>, <aside>, <header>, <footer>, <nav>, <section>, <main>, <time>, <mark>, <progress>, <meter>, and more.

52. Explain the concept of HTML validation. HTML validation is the process of checking whether an HTML document complies with the syntax rules and standards.

53. What is the purpose of the <ruby> and <rt> tags in HTML5? The <ruby> tag is used to annotate ruby text, and the <rt> tag provides the pronunciation of ruby text for East Asian typography.

54. How do you add a comment in an HTML document? Use <!-- your comment here --> to add a comment in an HTML document.

55. What is the purpose of the <script> tag in HTML? The <script> tag is used to embed or reference JavaScript code within an HTML document.

56. How do you embed external stylesheets in an HTML document? Use the <link> tag with the "rel" attribute set to "stylesheet" and the "href" attribute pointing to the external CSS file.

57. What is the purpose of the <style> tag? The <style> tag is used to embed CSS code directly within an HTML document.

58. Explain the concept of media queries in HTML and CSS. Media queries allow you to apply different styles based on the characteristics of the user's device, such as screen size, resolution, and orientation.

59. How do you create a numbered list with Roman numerals in HTML? Use the "type" attribute with the value "I" in the <ol> tag to create a numbered list with Roman numerals.

60. What is the purpose of the <optgroup> and <option> tags in HTML? The <optgroup> tag groups related options within a <select> element, and the <option> tag defines an option within a <select> element.

61. How do you create a custom checkbox or radio button style using HTML and CSS? Use the <input type="checkbox"> or <input type="radio"> elements with custom CSS styles.

62. What is the purpose of the <progress> tag in HTML5? The <progress> tag represents the progress of a task, such as file uploads or loading processes.

63. Explain the <fieldset> and <legend> tags in HTML. The <fieldset> tag groups form elements together, and the <legend> tag provides a caption or heading for the <fieldset>.

64. What is the purpose of the <iframe sandbox> attribute? The "sandbox" attribute in the <iframe> tag restricts the capabilities of the embedded content for security purposes.

65. How do you create a non-breaking space in HTML? Use the   entity to create a non-breaking space.

66. What is the purpose of the <address> tag in HTML? The <address> tag is used to provide contact information for the author or owner of a document.

67. Explain the <wbr> tag in HTML. The <wbr> tag is used to specify a word break opportunity within text.

68. What are HTML imports? HTML imports were part of the Web Components specification and allowed for importing HTML documents as reusable components. However, HTML imports have been deprecated in favor of other technologies like ES6 modules.

69. What is the difference between the <button> and <input type="button"> tags? Both create clickable buttons, but <button> can contain other HTML elements, while <input type="button"> cannot.

70. Explain the <s> and <del> tags in HTML. Both <s> and <del> are used to represent deleted or struck-through text.

71. What is the purpose of the <pre> tag in HTML? The <pre> tag is used to display preformatted text, preserving white spaces and line breaks.

72. How do you create a clickable link with an image in HTML? Wrap an <img> tag inside an <a> tag, setting the "href" attribute to the target URL.

73. What is the purpose of the <canvas> tag's "fallback" content? The "fallback" content is displayed if the user's browser does not support the <canvas> element or JavaScript.

74. How do you create a custom tooltip using HTML and CSS? Use the <span> tag and CSS styles with position: relative and :after pseudo-element.

75. Explain the concept of application cache (offline web applications) in HTML5. Application cache allows web applications to work offline by storing resources locally.

76. What is the <dialog> tag in HTML5? The <dialog> tag is used to create a modal or pop-up dialog box.

77. How do you embed an SVG image in an HTML document? Use the <svg> tag with the appropriate SVG content inside the HTML document.

78. What is the purpose of the <bdi> tag in HTML5? The <bdi> tag is used to isolate a part of text that might be formatted in a different direction from the surrounding text.

79. How do you create a line break without using the <br> tag? Use the CSS property white-space: pre; on the container and insert a newline character (\n) where you want the line break.

80. What is the purpose of the <picture> and <source> tags in HTML5? The <picture> tag provides a way to serve different images based on different conditions, and the <source> tag specifies multiple versions of the image for different scenarios.

81. Explain the concept of lazy loading of images in HTML. Lazy loading postpones the loading of images until they are about to be displayed, improving page load time.

82. What is the <template> tag in HTML? The <template> tag provides a way to define reusable content that can be cloned and used dynamically with JavaScript.

83. How do you create a marquee effect using HTML and CSS? Use CSS animations or transitions to create a marquee effect on an element.

84. What is the purpose of the <track> tag in HTML5? The <track> tag is used to provide text tracks for video or audio elements, such as subtitles or captions.

85. Explain the concept of Content Security Policy (CSP) in HTML. CSP is a security feature that helps prevent cross-site scripting (XSS) attacks by specifying which sources of content are allowed to be loaded and executed.

86. What are the different input types for the <input> tag, and how do they differ? Some common input types are text, password, checkbox, radio, number, email, date, file, etc. They differ in the way they handle user input.

87. How do you disable browser spell-checking for a specific input field? Use the spellcheck="false" attribute on the input field.

88. What is the purpose of the <data> tag in HTML5? The <data> tag is used to embed machine-readable data that is not displayed to users.

89. Explain the concept of microdata in HTML5. Microdata provides a way to add structured data to HTML documents, making it easier for search engines to understand the content.

90. What are Web Workers in HTML5, and how do they work? Web Workers allow for background script execution to prevent blocking the main thread.

91. How do you embed an audio or video player with custom controls in HTML? Use the <audio> or <video> tag with custom JavaScript controls.

92. Explain the concept of progressive enhancement in web development. Progressive enhancement involves building a website with a basic version that works across all devices and browsers and then adding more advanced features for modern devices and browsers.

93. What is the purpose of the <details> tag's "open" attribute? The "open" attribute in the <details> tag allows you to set the details element as open by default.

94. How do you create a hyperlink that points to an anchor within the same page? Use the anchor tag <a> with the href="#anchor-name" attribute, where "anchor-name" is the name of the anchor within the page.

95. What is the purpose of the <optgroup> tag's "label" attribute? The "label" attribute in the <optgroup> tag provides a label or heading for the grouped options.

96. Explain the concept of browser cookies in HTML. Cookies are small pieces of data stored on the user's device by the web browser. They are commonly used for session management and user tracking.

97. How do you create a custom 404 error page in HTML? Configure the web server to redirect to a custom HTML page when a 404 error occurs.

98. What is the purpose of the <meter> tag in HTML5? The <meter> tag is used to represent a scalar measurement within a known range.

99. How do you create a responsive web design using media queries? Use media queries with different breakpoints to apply different styles based on the screen size and orientation.

100. What is the purpose of the <ruby>, <rt>, and <rp> tags in HTML5? The <ruby> tag is used for Ruby annotations, the <rt> tag provides pronunciation, and the <rp> tag provides parentheses for browsers that do not support Ruby annotations.

👉 Free PDF Download: HTML Interview Questions

Programming: