Table of contents
No headings in the article.
100 must-know HTML questions along with answers.
1. What is HTML?
➡️ HTML (Hypertext Markup Language) is the standard language for creating web pages.
2. What is an HTML element?
➡️ An HTML element is everything from the opening tag to the closing tag, including the content in between.
3. What is a tag in HTML?
➡️ A tag defines the start and end of an element. Example: <p> and </p> for paragraphs.
4. What is an attribute in HTML?
➡️ Attributes provide additional information about an element, such as class, id, or src for images.
5. What is the purpose of the <!DOCTYPE html> declaration?
➡️ It tells the browser which version of HTML is being used (HTML5).
6. What is the difference between block-level and inline elements?
➡️ Block-level elements start on a new line (e.g., <div>, <p>), while inline elements don’t break the flow (e.g., <span>, <a>).
7. What is the <head> tag used for?
➡️ The <head> tag contains metadata, such as links to stylesheets, scripts, and the document title.
8. What is the <body> tag used for?
➡️ The <body> contains the content of the web page that is visible to users.
9. What is the purpose of the <title> tag?
➡️ The <title> tag sets the title of the page, which appears in the browser’s title bar or tab.
10. What is semantic HTML?
➡️ Semantic HTML uses elements that describe the meaning of the content, like <article>, <header>, and <footer>.
11. What is the purpose of the <header> tag?
➡️ The <header> represents introductory content or a set of navigational links.
12. What does the <footer> tag represent?
➡️ The <footer> element represents the footer for its nearest sectioning content or section.
13. What is the <nav> tag used for?
➡️ The <nav> tag defines navigation links, such as menus.
14. What is the <article> tag used for?
➡️ The <article> tag defines independent, self-contained content.
15. What is the difference between <div> and <section>?
➡️ <div> is a generic container, while <section> is used for thematically grouped content.
16. What is the purpose of the <a> tag?
➡️ The <a> tag is used to define hyperlinks.
17. What is the href attribute in the <a> tag?
➡️ The href attribute specifies the URL of the page the link goes to.
18. What is the target="_blank" attribute used for in links?
➡️ It opens the link in a new tab or window.
19. How do you create an image in HTML?
➡️ Use the <img> tag with the src attribute to specify the image source.
20. What is the alt attribute in an <img> tag?
➡️ The alt attribute provides alternative text if the image cannot be displayed.
21. What is the <br> tag used for?
➡️ The <br> tag inserts a line break.
22. What does the <hr> tag represent?
➡️ The <hr> tag represents a thematic break or a horizontal rule.
23. How do you create a list in HTML?
➡️ Use <ul> for unordered lists and <ol> for ordered lists, with <li> for list items.
24. What is the difference between <ol> and <ul>?
➡️ <ol> creates a numbered list, while <ul> creates a bulleted list.
25. How do you add a table in HTML?
➡️ Use <table> with <tr> for rows and <td> for data cells.
26. What is the <th> tag used for?
➡️ The <th> tag defines a header cell in a table.
27. What is a form in HTML?
➡️ A form collects user input, using elements like <input>, <textarea>, and <button>.
28. What is the action attribute in a form?
➡️ The action attribute specifies where to send the form data.
29. What is the method attribute in a form?
➡️ The method specifies how to send form data (GET or POST).
30. What does the <input> tag do?
➡️ The <input> tag defines an input field in a form.
31. What is the difference between GET and POST methods?
➡️ GET appends form data to the URL, while POST sends data in the request body.
32. What is the <button> tag used for?
➡️ The <button> tag defines a clickable button.
33. What does the type attribute do in an <input> tag?
➡️ The type attribute specifies the input field type (text, password, radio, etc.).
34. What is the purpose of the <label> tag?
➡️ The <label> tag defines a label for an input element.
35. How do you create a checkbox in HTML?
➡️ Use <input type="checkbox">.
36. How do you create a radio button in HTML?
➡️ Use <input type="radio">.
37. What is the <select> tag used for?
➡️ The <select> tag creates a dropdown list.
38. What is the <textarea> tag used for?
➡️ The <textarea> tag creates a multi-line text input field.
39. What is the <fieldset> tag used for?
➡️ The <fieldset> groups related form elements.
40. What is the <legend> tag used for?
➡️ The <legend> defines a caption for a <fieldset>.
41. What does the <meta> tag do?
➡️ The <meta> tag provides metadata about the HTML document (e.g., character set, author, description).
42. What is the charset attribute in the <meta> tag?
➡️ It specifies the character encoding (e.g., UTF-8).
43. What is the purpose of the <link> tag?
➡️ The <link> tag links external resources like stylesheets.
44. What is the <style> tag used for?
➡️ The <style> tag allows you to embed CSS directly in the HTML document.
45. What is the <script> tag used for?
➡️ The <script> tag embeds or links to JavaScript code.
46. What is the defer attribute in a <script> tag?
➡️ The defer attribute tells the browser to execute the script after the page has loaded.
47. What is the async attribute in a <script> tag?
➡️ The async attribute allows the script to load asynchronously.
48. What does the <noscript> tag do?
➡️ The <noscript> tag defines content to display if JavaScript is disabled.
49. What is the purpose of the <base> tag?
➡️ The <base> tag sets the base URL for all relative URLs on a page.
50. What does the id attribute do?
➡️ The id attribute uniquely identifies an element on the page.
51. What is the class attribute used for?
➡️ The class attribute is used to assign one or more class names to an element, allowing for CSS styling or JavaScript targeting.
52. What is the difference between id and class attributes?
➡️ id must be unique within a page, while class can be reused for multiple elements.
53. What is the <iframe> tag used for?
➡️ The <iframe> tag embeds another HTML document within the current page.
54. What does the src attribute in an <iframe> tag do?
➡️ The src attribute specifies the URL of the document to be displayed in the iframe.
55. How do you include audio in HTML?
➡️ Use the <audio> tag with the src attribute, and optionally add controls.
56. How do you include video in HTML?
➡️ Use the <video> tag with the src attribute, and optionally add controls.
57. What is the <source> tag used for in <video> and <audio> elements?
➡️ The <source> tag allows you to specify multiple media sources for the browser to choose from.
58. What is the <canvas> tag used for?
➡️ The <canvas> tag is used to draw graphics via scripting (usually JavaScript).
59. What is the <svg> tag used for?
➡️ The <svg> tag is used to define scalable vector graphics.
60. How do you make an element draggable in HTML5?
➡️ Add the attribute draggable="true" to the element.
61. What is the <b> tag used for?
➡️ The <b> tag makes the text bold, without implying importance.
62. What is the <strong> tag used for?
➡️ The <strong> tag also makes the text bold but implies strong importance.
63. What is the difference between <i> and <em> tags?
➡️ <i> is used for italicized text without emphasis, while <em> gives emphasized (important) italic text.
64. What is the <abbr> tag used for?
➡️ The <abbr> tag is used to define abbreviations or acronyms.
65. What is the <cite> tag used for?
➡️ The <cite> tag is used to reference the title of a work, like a book or a research paper.
66. What is the <code> tag used for?
➡️ The <code> tag is used to display code snippets with monospace font styling.
67. What is the <pre> tag used for?
➡️ The <pre> tag preserves both spaces and line breaks, displaying text exactly as it is written.
68. What is the <mark> tag used for?
➡️ The <mark> tag highlights text.
69. What is the <sup> tag used for?
➡️ The <sup> tag defines superscript text (text above the normal line).
70. What is the <sub> tag used for?
➡️ The <sub> tag defines subscript text (text below the normal line).
71. What is the <blockquote> tag used for?
➡️ The <blockquote> tag is used to quote large sections of text from another source.
72. What is the <q> tag used for?
➡️ The <q> tag is used to quote a short passage of text.
73. What is the <time> tag used for?
➡️ The <time> tag is used to represent a specific time or date.
74. What is the <data> tag used for?
➡️ The <data> tag links the content with a machine-readable value.
75. What is the <details> tag used for?
➡️ The <details> tag is used to create a collapsible block of content.
76. What is the <summary> tag used for?
➡️ The <summary> tag provides a summary or title for the content inside a <details> element.
77. What is the <progress> tag used for?
➡️ The <progress> tag represents the progress of a task.
78. What is the <meter> tag used for?
➡️ The <meter> tag defines a scalar measurement within a known range, such as disk usage.
79. What is the purpose of the lang attribute?
➡️ The lang attribute specifies the language of the document’s content.
80. What is the difference between relative and absolute URLs?
➡️ A relative URL is relative to the current page, while an absolute URL is a full web address.
81. What is the alt attribute in the <img> tag for?
➡️ The alt attribute provides alternative text if an image can’t be displayed.
82. What is the difference between <link> and <a> tags?
➡️ The <link> tag links external resources like stylesheets, while the <a> tag creates hyperlinks.
83. What is the <noscript> tag used for?
➡️ It defines content that will be displayed if the browser does not support JavaScript or if JavaScript is disabled.
84. How do you make a page responsive?
➡️ By using meta tags like <meta name="viewport" content="width=device-width, initial-scale=1.0"> and CSS media queries.
85. What is the <picture> tag used for?
➡️ The <picture> tag allows you to define multiple sources for images, useful for responsive images.
86. What is a favicon, and how do you add one?
➡️ A favicon is a small icon that appears in the browser tab. Add it using <link rel="icon" href="path-to-icon">.
87. What is the purpose of the rel="noopener noreferrer" in anchor tags?
➡️ It improves security when opening links in new tabs by preventing the new page from accessing the original window.
88. How do you comment in HTML?
➡️ Use <!-- Comment --> to add comments in HTML.
89. What is the <kbd> tag used for?
➡️ The <kbd> tag defines keyboard input.
90. What is the <samp> tag used for?
➡️ The <samp> tag is used to define sample output from a computer program.
91. What is the <var> tag used for?
➡️ The <var> tag defines a variable in programming or mathematical expressions.
92. What is the <dfn> tag used for?
➡️ The <dfn> tag defines a term that is being described or explained.
93. What is the <bdo> tag used for?
➡️ The <bdo> tag stands for Bi-Directional Override, used to override text direction.
94. What is the difference between mailto: and tel: in anchor tags?
➡️ mailto: creates a link to send an email,
while tel: creates a link to call a phone number.
95. What is the <wbr> tag used for?
➡️ The <wbr> tag defines a potential line break point in very long words.
96. What is the purpose of the <template> tag?
➡️ The <template> tag is used to hold client-side content that is hidden when the page loads but can be rendered later via JavaScript.
97. What is the <mark> tag used for?
➡️ The <mark> tag highlights text by marking it with a background color.
98. What is the <ins> tag used for?
➡️ The <ins> tag defines the inserted text, often displayed with an underline.
99. What is the <del> tag used for?
➡️ The <del> tag defines deleted or removed text, often displayed with a strikethrough.
100. What is the <output> tag used for?
➡️ The <output> tag represents the result of a calculation or user action.
Thank you, for reading 🙌.