HTML Interview Questions and Answers (Set 7)

Introduction

This set of HTML interview questions builds further on the previous sets, exploring advanced features, edge cases, and modern practices. Each question includes detailed examples and explanations to prepare you comprehensively.

108. What is the `<track>` tag in HTML?

Answer: The <track> tag is used to specify text tracks (e.g., subtitles or captions) for <video> and <audio> elements.
```
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
```
Explanation: The <track> element improves accessibility by providing text alternatives for audio and video content.

109. How do you create a searchable dropdown in HTML?

Answer: Use the <datalist> element with an <input> tag:
```
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>
```
Explanation: The <datalist> element adds a set of predefined options that users can select from or search within.

110. How do you include a line break in text?

Answer: Use the <br> tag:
```
<p>This is line 1.<br>This is line 2.</p>
```
Explanation: The <br> tag forces a line break, often used in formatting poetry or addresses.

111. How do you create a multi-select dropdown?

Answer: Add the multiple attribute to a <select> element:
```
<select name="options" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
```
Explanation: The multiple attribute allows users to select more than one option.

112. What is the `<bdo>` tag?

Answer: The <bdo> (Bi-Directional Override) tag explicitly specifies the text direction.
```
<bdo dir="rtl">This text is right-to-left.</bdo>
```
Explanation: The <bdo> tag is useful for overriding text direction in bi-directional (e.g., Arabic and English) documents.

113. How do you create a tooltip for an element?

Answer: Use the title attribute:
```
<button title="Submit the form">Submit</button>
```
Explanation: The title attribute provides a tooltip that appears when the user hovers over the element.

114. How do you define a read-only `<textarea>` in HTML?

Answer: Use the readonly attribute:
```
<textarea readonly>This is read-only text.</textarea>
```
Explanation: The readonly attribute prevents users from modifying the content but allows them to copy it.

115. What is the `<kbd>` tag?

Answer: Represents user input from a keyboard.
```
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
```
Explanation: The <kbd> tag is used to denote keyboard shortcuts or user input instructions.

116. How do you define a color input field?

Answer: Use the type="color" attribute:
```
<input type="color" name="favcolor">
```
Explanation: The color input provides a color picker UI for selecting colors.

117. How do you create a progress bar in HTML?

Answer: Use the <progress> tag:
```
<progress value="70" max="100"></progress>
```
Explanation: The <progress> element visually represents task completion progress.

118. How do you create a time input field?

Answer: Use the type="time" attribute:
```
<input type="time" name="appointment">
```
Explanation: This input provides a time selection UI in supported browsers.

119. How do you preload an image in HTML?

Answer: Use the <link> tag with the rel="preload" attribute:
```
<link rel="preload" href="image.jpg" as="image">
```
Explanation: Preloading images improves performance by loading assets before they are needed.

120. What is the `<figure>` element?

Answer: Represents self-contained content, often with a caption.
```
<figure>
  <img src="image.jpg" alt="Example Image">
  <figcaption>Figure 1: Example image caption.</figcaption>
</figure>
```
Explanation: The <figure> and <figcaption> elements semantically group media and its description.

121. How do you define a search field in a form?

Answer: Use the type="search" attribute:
```
<input type="search" name="query">
```
Explanation: This input type provides a search-specific UI for user input.

122. How do you make a button submit a form?

Answer: Use the type="submit" attribute:
```
<button type="submit">Submit</button>
```
Explanation: The type="submit" attribute submits the form data to the specified action URL.

123. What is the `<ruby>` element?

Answer: Provides annotations for East Asian typography.
```
<ruby>
  英 (England)
  <rt>English</rt>
</ruby>
```
Explanation: The <ruby> tag is used for annotations or pronunciations in languages like Japanese and Chinese.

124. How do you define a radio button group?

Answer: Use <input type="radio"> with the same name attribute:

<input type="radio" id="option1" name="group" value="1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="group" value="2">
<label for="option2">Option 2</label>

Explanation: Radio buttons with the same name attribute ensure only one option can be selected.

125. How do you autoplay audio in HTML?

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

Conclusion

This set of questions further develops your understanding of HTML, preparing you for scenarios involving multimedia, forms, and accessibility features.

108. What is the <track> tag in HTML?