HTML 100 HTML Interview Questions and Answers

Prepare for HTML interviews with 100 commonly asked questions, clear explanations, and practical examples.

1. What is HTML?

HTML stands for HyperText Markup Language. It is the standard language used to structure content on web pages, including headings, paragraphs, links, images, forms, tables, and sections.

HTML
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>

2. Is HTML a programming language?

No. HTML is a markup language, not a programming language. It structures and describes web content but does not contain programming logic such as conditions, loops, or functions.

3. What is an HTML element?

An HTML element usually contains an opening tag, content, and a closing tag. In the example below, <p> is the opening tag, the sentence is the content, and </p> is the closing tag.

HTML
<p>This is a paragraph.</p>

4. What is an HTML tag?

An HTML tag is a keyword placed inside angle brackets, such as <h1>, <p>, <img>, or <a>. Tags tell the browser how to understand the content.

5. What is the difference between a tag and an element?

A tag is only the markup keyword, such as <p>. An element includes the opening tag, content, and closing tag, such as <p>Hello</p>.

6. What is the basic structure of an HTML document?

A basic HTML document contains <!DOCTYPE html>, <html>, <head>, and <body>.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

7. What is <!DOCTYPE html>?

<!DOCTYPE html> tells the browser that the document uses HTML5. It should appear at the beginning of every modern HTML document.

8. What is the purpose of the <head> element?

The <head> contains information that is not normally displayed in the page's main content, including the page title, metadata, CSS links, fonts, scripts, and SEO information.

9. What is the purpose of the <body> element?

The <body> contains the visible webpage content, such as headings, paragraphs, images, forms, and buttons.

10. What are HTML attributes?

Attributes provide additional information about an HTML element and are normally written inside its opening tag. In the example below, href is an attribute.

HTML
<a href="https://example.com">Visit Example</a>

11. What is the difference between id and class?

An id should uniquely identify one element on a page, while a class can be shared by multiple elements.

HTML
<h1 id="main-title">Welcome</h1>
<p class="description">First paragraph</p>
<p class="description">Second paragraph</p>

12. What are heading elements in HTML?

HTML provides six heading levels from <h1> to <h6>. <h1> is the most important heading, while <h6> is the least important.

13. How many <h1> elements can a webpage have?

HTML technically allows multiple <h1> elements. For a clear document structure and SEO, it is usually better to use one main <h1> for the page title and <h2> or <h3> for sections.

14. What is the paragraph element?

The <p> element creates a paragraph. Browsers normally add spacing before and after paragraphs.

15. What is the difference between <br> and <p>?

<p> creates a paragraph, while <br> creates a line break inside existing content. <br> should not be used to create large spaces between sections.

16. What is the <hr> element?

The <hr> element represents a thematic break between sections and is commonly displayed as a horizontal line.

17. What are void elements?

Void elements cannot contain content and therefore do not have closing tags. Examples include <img>, <br>, <hr>, <input>, and <meta>.

18. How do you create a link in HTML?

Use the <a> element with the href attribute. The text between the tags becomes clickable.

HTML
<a href="https://example.com">Visit Example</a>

19. How do you open a link in a new tab?

Use target="_blank". Add rel="noopener" to improve security when opening an external page in a new tab.

HTML
<a href="https://example.com" target="_blank" rel="noopener">
  Open Example
</a>

20. What is the difference between an absolute URL and a relative URL?

An absolute URL contains the complete web address, such as https://example.com/about. A relative URL, such as /about, points to a location within the same website.

21. How do you add an image in HTML?

Use the <img> element. The src attribute provides the image location, and alt describes the image.

HTML
<img src="mountain.jpg" alt="Snow-covered mountain">

22. Why is the alt attribute important?

Alternative text lets screen readers describe an image, appears when the image fails to load, improves accessibility, and can help search engines understand the image.

23. What is an HTML list?

HTML supports unordered lists with <ul>, ordered lists with <ol>, and list items with <li>. Unordered lists use bullets, while ordered lists use numbers.

HTML
<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

<ol>
  <li>Create an HTML file</li>
  <li>Open it in a browser</li>
</ol>

24. What is a description list?

A description list uses <dl> to contain terms marked with <dt> and their descriptions marked with <dd>.

25. How do you create a table in HTML?

Use <table>, <tr>, <th>, and <td>. <tr> creates a row, <th> creates a header cell, and <td> creates a data cell.

HTML
<table>
  <tr><th>Name</th><th>Role</th></tr>
  <tr><td>Aman</td><td>Developer</td></tr>
</table>

26. What are <thead>, <tbody>, and <tfoot>?

These elements organize a table into header, body, and footer sections, improving readability and accessibility.

27. What is the difference between colspan and rowspan?

colspan makes a table cell span multiple columns, while rowspan makes a cell span multiple rows.

28. What is an HTML form?

An HTML form collects user information such as names, email addresses, passwords, files, and feedback.

HTML
<form>
  <label for="name">Name</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

29. What is the difference between GET and POST?

GET sends form data through the URL and is commonly used for search or filtering. POST sends data in the request body and is commonly used for registration, login, payments, and sensitive data. HTTPS is still required for secure transmission.

30. What is the purpose of the action attribute in a form?

The action attribute defines where form data is sent when the user submits the form.

31. Why should a <label> be connected to an input?

A label explains an input's purpose. Its for value should match the input's id. This improves accessibility and lets users click the label to focus the input.

32. What are common HTML input types?

Common types include text, email, password, number, date, checkbox, radio, file, and submit. Different types provide suitable interfaces and browser validation.

33. What is the difference between a checkbox and a radio button?

Checkboxes allow multiple selections. Radio buttons normally allow one selection from a group and must share the same name attribute.

34. What is the difference between placeholder and value?

placeholder displays temporary guidance that disappears as the user types. value provides an actual input value. Placeholder text should not replace a proper label.

35. What does the required attribute do?

The required attribute prevents form submission until the user enters or selects a value, providing basic browser-side validation.

36. What is the difference between disabled and readonly?

A disabled field cannot be edited, selected, or submitted with the form. A readonly field cannot be edited, but its value is normally submitted.

37. What is semantic HTML?

Semantic HTML uses elements that describe the meaning of their content, such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer>. It improves accessibility, SEO, readability, and maintainability.

38. What is the difference between <div> and <section>?

<div> is a general-purpose container with no specific meaning. <section> represents a meaningful section of related content, usually with a heading.

39. What is the difference between <article> and <section>?

<article> represents independent content that could stand on its own, such as a blog post or product review. <section> groups related content within a page or article.

40. What is the purpose of the <main> element?

The <main> element contains the primary content of the webpage. A page should generally contain only one visible <main> element.

41. What is the purpose of the <nav> element?

The <nav> element contains important navigation links. It is mainly intended for major navigation areas, not every group of links.

42. What are HTML entities?

HTML entities display reserved or special characters. Common entities include &lt; for <, &gt; for >, &amp; for &, &nbsp; for a non-breaking space, and &copy; for the copyright symbol.

HTML
<p>&copy; 2026 DevBrainBox</p>

43. What are meta tags?

Meta tags provide information about the webpage and are placed inside <head>. They can define character encoding, page description, viewport settings, and other metadata.

44. What is the viewport meta tag?

The viewport meta tag helps webpages display correctly on mobile devices. Without it, responsive layouts may appear zoomed out or incorrectly sized.

HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">

45. What is the difference between block-level and inline elements?

Block-level elements such as <div>, <p>, <h1>, and <section> normally begin on a new line and use available width. Inline elements such as <span>, <a>, <strong>, and <em> normally remain within the same line. CSS can change any element's display behavior.

46. What is the difference between <strong> and <b>?

<strong> gives content strong importance. <b> draws visual attention without adding the same semantic importance. Both are normally displayed in bold.

47. What is the difference between <em> and <i>?

<em> adds emphasis to content. <i> represents text in an alternate voice or style, such as a technical term or foreign phrase. Both are normally displayed in italics.

48. How do you add audio and video in HTML?

Use the <audio> and <video> elements. The controls attribute displays playback controls, while nested <source> elements provide media files and types.

HTML
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="640">
  <source src="video.mp4" type="video/mp4">
</video>

49. What is an iframe?

An iframe embeds another webpage or external resource inside the current page. Iframes are commonly used for maps, videos, payment forms, and widgets, but must be used carefully because they can affect performance, accessibility, and security.

50. How can you make an HTML webpage more accessible?

Use semantic elements, meaningful image alt text, connected form labels, logical heading order, keyboard support, descriptive links, media captions or transcripts, a declared page language, and alternatives to color-only information.

  • Use semantic HTML elements.
  • Add meaningful alt text to images.
  • Connect labels with form inputs.
  • Maintain a logical heading order.
  • Support keyboard navigation.
  • Use descriptive link text.
  • Add captions or transcripts for media.
  • Declare the page language.
  • Avoid conveying important information using only color.
HTML
<html lang="en">
<body>
  <main>
    <h1>Contact Us</h1>
    <form>
      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" required>
      <button type="submit">Send Message</button>
    </form>
  </main>
</body>
</html>

Accessible HTML makes websites easier to use for everyone, including people using screen readers, keyboards, voice controls, or other assistive technologies.

51. What is HTML5?

HTML5 is the latest major version of HTML. It introduced semantic elements, multimedia support, improved forms, and many APIs without requiring additional plugins.

52. What are the new semantic elements introduced in HTML5?

Common HTML5 semantic elements include:

  • <header>
  • <footer>
  • <nav>
  • <main>
  • <section>
  • <article>
  • <aside>
  • <figure>
  • <figcaption>

These elements make webpages more meaningful and improve accessibility.

53. What is the purpose of the <figure> element?

The <figure> element groups media such as images, diagrams, or code examples with related content.

HTML
<figure>
  <img src="mountain.jpg" alt="Mountain">
  <figcaption>Beautiful mountain view.</figcaption>
</figure>

54. What is <figcaption>?

<figcaption> provides a caption for a <figure>.

HTML
<figure>
  <img src="flower.jpg" alt="Flower">
  <figcaption>Red Rose</figcaption>
</figure>

55. What is the purpose of the <address> element?

The <address> element contains contact information for a person or organization.

HTML
<address>Email: info@example.com</address>

56. What is the difference between <span> and <div>?

<div> is a block-level container, while <span> is an inline container.

57. What is nesting in HTML?

Nesting means placing one HTML element inside another.

HTML
<p>This is <strong>important</strong>.</p>

58. What are HTML comments?

Comments are ignored by browsers and help developers explain code.

HTML
<!-- This is a comment -->

59. Can comments appear anywhere in HTML?

Comments can appear almost anywhere except inside tag names or attribute names.

60. Why should HTML code be properly indented?

Proper indentation improves readability and makes debugging easier.

61. What is the lang attribute?

The lang attribute specifies the language of the webpage.

HTML
<html lang="en">

62. Why is the lang attribute important?

It helps screen readers, search engines, translation tools, and accessibility technologies understand the page language.

63. What is character encoding?

Character encoding tells browsers how to display characters correctly.

HTML
<meta charset="UTF-8">

64. What is UTF-8?

UTF-8 is the most commonly used character encoding because it supports almost every language.

65. What is the <title> tag?

The <title> tag defines the page title shown in the browser tab.

HTML
<title>Learn HTML</title>

66. Why is the page title important?

The page title supports SEO, browser tabs, bookmarks, and social sharing.

67. What is the purpose of the name attribute?

The name attribute identifies form data when it is submitted.

HTML
<input type="text" name="username">

68. What happens if an input has no name attribute?

Its value is generally not included when the form is submitted.

69. What is the autocomplete attribute?

The autocomplete attribute allows browsers to remember and suggest appropriate previous input values.

HTML
<input type="email" autocomplete="email">

70. What is autocomplete="off"?

It asks browsers not to remember or suggest entered values for that field or form.

71. What is the maxlength attribute?

maxlength limits the number of characters a user can enter.

HTML
<input maxlength="20">

72. What is the minlength attribute?

minlength requires a minimum number of characters.

HTML
<input minlength="8">

73. What is the pattern attribute?

The pattern attribute validates an input value using a regular expression.

HTML
<input pattern="[A-Za-z]{3,}">

74. What is the placeholder attribute used for?

It shows a temporary hint inside an input field. It should not replace a visible label.

75. What is the checked attribute?

The checked attribute pre-selects a checkbox or radio button.

HTML
<input type="checkbox" checked>

76. What is the selected attribute?

The selected attribute chooses a default option in a dropdown.

HTML
<option selected>India</option>

77. What is the multiple attribute?

The multiple attribute allows a user to select multiple values or files.

HTML
<input type="file" multiple>

78. What is the accept attribute?

The accept attribute indicates which file types a file input should allow.

HTML
<input type="file" accept=".pdf,.docx">

79. What is the <textarea> element?

The <textarea> element creates a multi-line text input.

HTML
<textarea rows="5"></textarea>

80. What is the <select> element?

The <select> element creates a dropdown list.

HTML
<select>
  <option>India</option>
  <option>Canada</option>
</select>

81. What is the <option> element?

The <option> element defines an item inside a dropdown list.

82. What is <optgroup>?

<optgroup> groups related dropdown options under a shared label.

HTML
<optgroup label="Programming">
  <option>HTML</option>
  <option>CSS</option>
</optgroup>

83. What is the <button> element?

The <button> element creates a clickable button.

HTML
<button>Save</button>

84. What are the button types?

Common button types are button, submit, and reset. Explicitly setting the type prevents unintended form behavior.

85. What does the required attribute do?

It prevents an empty required field from being submitted.

86. What is browser validation?

Browser validation is automatic client-side validation performed before a form is submitted.

87. What is an email input?

An email input provides browser validation for an email-address format.

HTML
<input type="email">

88. What is a URL input?

A URL input provides browser validation for a website address.

HTML
<input type="url">

89. What is a number input?

A number input accepts numeric values and can support numeric constraints.

HTML
<input type="number">

90. What is the difference between min and max?

min and max define the lowest and highest allowed values for compatible inputs.

HTML
<input type="number" min="1" max="100">

91. What is the step attribute?

The step attribute controls valid numeric increments.

HTML
<input type="number" step="5">

92. What is a date input?

A date input provides a browser-supported date entry interface, commonly displayed as a date picker.

HTML
<input type="date">

93. What is a color input?

A color input opens a browser-supported color picker.

HTML
<input type="color">

94. What is a range input?

A range input displays a slider for selecting a value within a range.

HTML
<input type="range" min="0" max="100">

95. What is the download attribute?

The download attribute tells the browser to download the linked resource instead of navigating to it when appropriate.

HTML
<a href="guide.pdf" download>Download PDF</a>

96. What is the difference between HTML and CSS?

HTML creates the content structure, while CSS controls presentation and appearance.

97. What is the difference between HTML and JavaScript?

HTML structures content, while JavaScript adds interactivity and behavior.

98. Can HTML create dynamic websites by itself?

No. HTML structures content. Dynamic behavior requires JavaScript, server-side technology, or both.

99. What are some HTML best practices?

  • Use semantic HTML.
  • Write clean, organized code.
  • Use meaningful headings.
  • Add image alt text.
  • Close elements correctly.
  • Use proper indentation.
  • Validate forms.
  • Keep code organized.

100. Why should every web developer learn HTML?

HTML is the foundation of every website. Learning it helps developers build webpages and forms, improve SEO and accessibility, work effectively with CSS and JavaScript, create responsive sites, and develop modern web applications.

  • Build webpages
  • Create forms
  • Improve SEO
  • Improve accessibility
  • Work with CSS and JavaScript
  • Develop responsive websites
  • Build modern web applications
Let's learn with DevBrainBox AI