HTML Interview Questions and Answers (Set 13)

Introduction

This set of HTML interview questions delves into practical use cases, focusing on edge cases and advanced scenarios to help you ace interviews and strengthen your web development knowledge.

226. How do you create a text input with a default value?

Answer: Use the value attribute in the <input> tag:
```
<input type="text" name="username" value="DefaultUser">
```
Explanation: The value attribute sets the initial content of the input field when the page loads.

227. How do you create a collapsible content section?

Answer: Use the <details> and <summary> elements:
```
<details>
  <summary>Click to Expand</summary>
  <p>This is hidden content that becomes visible upon clicking.</p>
</details>
```
Explanation: The <details> element creates a collapsible section, with <summary> acting as the clickable label.

228. How do you create a video player with autoplay and muted attributes?

Answer: Use the <video> tag with autoplay and muted attributes:
```
<video autoplay muted controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```
Explanation: The autoplay attribute starts playback automatically, and the muted attribute silences the video.

229. What is the `<nav>` element used for?

Answer: Represents a block of navigation links.
```
<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>
```
Explanation: The <nav> element semantically groups navigation links for better accessibility and structure.

230. How do you specify multiple media sources for a video?

Answer: Use the <source> tag within the <video> element:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Explanation: The <source> tag allows the browser to choose the best-supported format for playback.

231. How do you create a file input field with a specific file type filter?

Answer: Use the accept attribute:
```
<input type="file" name="image" accept="image/png, image/jpeg">
```
Explanation: The accept attribute restricts file selection to specific formats, such as .png or .jpg.

232. What is the `<figure>` element used for?

Answer: Groups media content with a caption.
```
<figure>
  <img src="image.jpg" alt="An example image">
  <figcaption>An example caption for the image.</figcaption>
</figure>
```
Explanation: The <figure> element semantically groups images, videos, or graphics with their respective captions.

233. How do you define a custom tooltip?

Answer: Use the title attribute:
```
<button title="Click to submit the form">Submit</button>
```
Explanation: The title attribute creates a simple tooltip that appears when hovering over an element.

234. How do you disable an HTML button?

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

235. How do you create a responsive table?

Answer: Use a scrollable container with CSS:

<style>
  .table-container {
    overflow-x: auto;
  }
</style>
<div class="table-container">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
  </table>
</div>

Explanation: Wrapping the table in a scrollable container ensures it remains accessible on smaller screens.

236. How do you create a slider input?

Answer: Use the type="range" attribute:
```
<input type="range" min="0" max="100" value="50">
```
Explanation: The range input creates a slider control for selecting numeric values within a defined range.

237. What is the `<small>` tag used for?

Answer: Represents side comments or fine print.
```
<p>This is regular text. <small>This is fine print.</small></p>
```
Explanation: The <small> tag is used for disclaimers, annotations, or smaller text.

238. How do you create a hidden input field?

Answer: Use the type="hidden" attribute:
```
<input type="hidden" name="user_id" value="12345">
```
Explanation: Hidden input fields store data that is submitted with the form but not visible to users.

239. What is the `<datalist>` element?

Answer: Provides predefined options for an input field.
```
<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>
```
Explanation: The <datalist> element enhances input fields with a searchable list of suggestions.

240. How do you display preformatted text in HTML?

Answer: Use the <pre> tag:
```
<pre>
Line 1
  Line 2
</pre>
```
Explanation: The <pre> tag preserves whitespace and line breaks, displaying text exactly as written in the HTML source.

Conclusion

This set continues to build upon foundational and advanced HTML concepts, offering practical knowledge for interviews and real-world development challenges.