HTML Interview Questions and Answers (Set 6)

Introduction

Continuing from previous sets, this segment of HTML interview questions explores advanced features and use cases. Each question is designed to help developers understand nuanced aspects of HTML with detailed explanations and examples.

91. What is the `<fieldset>` element used for?

Answer: It groups related form controls and labels.

<fieldset>
  <legend>Personal Details</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

Explanation: The <fieldset> element enhances form accessibility and organization, while the <legend> tag provides a caption for the group.

92. What is the `<dialog>` element in HTML?

Answer: The <dialog> element is used to create modal dialogs or interactive pop-ups.

<dialog id="myDialog">
  <p>This is a dialog box.</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

Explanation: The <dialog> tag provides a native way to create modals, simplifying accessibility and interaction.

93. How do you create a custom data attribute in HTML?

Answer: Use data- attributes to store custom data in HTML elements.
```
<div data-user-id="12345">User Info</div>
```
Explanation: Custom data attributes store extra information for JavaScript processing, making them highly versatile.

94. What is the difference between `<b>` and `<strong>` tags?

Answer:
- <b>: Makes text bold without semantic meaning.
- <strong>: Indicates important text with bold styling.
```
<p>This is <b>bold</b> text.</p>
<p>This is <strong>important</strong> text.</p>
```
Explanation: Use <strong> for accessibility and semantic emphasis, while <b> is purely stylistic.

95. How do you make an input field required in a form?

Answer: Use the required attribute:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <button type="submit">Submit</button>
</form>

Explanation: The required attribute prevents form submission until the field is filled.

96. What is the `<abbr>` tag?

Answer: The <abbr> tag defines an abbreviation or acronym.
```
<p><abbr title="Hypertext Markup Language">HTML</abbr> is the standard markup language for documents.</p>
```
Explanation: The title attribute specifies the full form, which appears as a tooltip.

97. How do you make a list with checkboxes in HTML?

Answer: Combine <ul> or <ol> with <input type="checkbox">:

<ul>
  <li><input type="checkbox" id="item1"> <label for="item1">Item 1</label></li>
  <li><input type="checkbox" id="item2"> <label for="item2">Item 2</label></li>
</ul>

Explanation: This pattern is common for tasks or options lists.

98. How do you create a form that accepts file uploads?

Answer: Use <input type="file"> with the enctype attribute in <form>:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Upload File:</label>
  <input type="file" id="file" name="file">
  <button type="submit">Upload</button>
</form>

Explanation: The enctype="multipart/form-data" ensures proper file upload handling.

99. What is the `<s>` tag?

Answer: Represents text that is no longer accurate or relevant.
```
<p>The price was <s>$50</s> now $30.</p>
```
Explanation: The <s> tag is often used to indicate outdated or discounted content.

100. How do you create a date input field in a form?

Answer: Use type="date":
```
<input type="date" name="dob">
```
Explanation: The type="date" attribute provides a date picker in modern browsers.

101. How do you create a text input with a maximum character limit?

Answer: Use the maxlength attribute:
```
<input type="text" name="username" maxlength="10">
```
Explanation: The maxlength attribute restricts the number of characters the user can enter.

102. What is the `<pre>` tag used for?

Answer: Preserves whitespace and line breaks in text.
```
<pre>
Line 1
  Line 2
Line 3
</pre>
```
Explanation: The <pre> tag maintains text formatting exactly as written.

103. How do you create a hyperlink that opens in a new tab?

Answer: Add target="_blank" to the <a> tag:
```
<a href="https://example.com" target="_blank">Visit Example</a>
```
Explanation: The target="_blank" attribute specifies that the link opens in a new tab or window.

104. How do you disable a `<button>`?

Answer: Use the disabled attribute:
```
<button disabled>Submit</button>
```
Explanation: The disabled attribute prevents interaction with the button.

105. How do you display inline code snippets in HTML?

Answer: Use the <code> tag:

<p>Use <code>console.log('Hello, World!')</code> to print messages to the console.</p>

Explanation: The <code> tag semantically indicates inline code.

106. What is the `<aside>` element?

Answer: Represents content tangentially related to the main content.
```
<aside>
  <p>This is a related side note.</p>
</aside>
```
Explanation: The <aside> tag is useful for sidebars, pull quotes, or advertisements.

107. How do you autoplay a video in HTML?

Answer: Add the autoplay attribute to the <video> tag:
```
<video autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>
```
Explanation: The autoplay attribute starts playback automatically when the page loads.

Conclusion

This set of advanced HTML questions and answers further expands your preparation, focusing on semantic elements, attributes, and modern features.

91. What is the <fieldset> element used for?

92. What is the <dialog> element in HTML?