HTML Interview Questions and Answers (Set 11)

Introduction

This eleventh set of HTML interview questions explores niche topics, advanced techniques, and practical applications. Each question is supplemented with detailed examples and explanations to enhance understanding.

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

Answer:
- <b> is used for stylistic purposes to make text bold.
- <strong> adds semantic meaning to emphasize the text.
```
<p>This is <b>bold text</b>.</p>
<p>This is <strong>important text</strong>.</p>
```
Explanation: <strong> should be used for content that needs emphasis, as it also conveys meaning to assistive technologies.

178. How do you create a tooltip using HTML?

Answer: Use the title attribute:
```
<button title="Click to submit">Submit</button>
```
Explanation: The title attribute shows a tooltip when the user hovers over the element.

179. What is the `<kbd>` tag, and where is it used?

Answer: Represents keyboard input.
```
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
```
Explanation: The <kbd> tag is used to mark up text that represents user input from the keyboard.

180. How do you disable autocomplete for an input field?

Answer: Use the autocomplete="off" attribute:
```
<input type="text" name="username" autocomplete="off">
```
Explanation: This disables the browser’s suggestion list for the input field.

181. How do you create a file upload input?

Answer: Use the <input> tag with type="file":
```
<input type="file" name="upload">
```
Explanation: The file input allows users to select files for uploading.

182. What is the `<wbr>` tag used for?

Answer: Suggests line break opportunities.
```
<p>Thisisavery<wbr>longword.</p>
```
Explanation: The <wbr> tag allows a browser to insert a line break if needed without affecting the word’s meaning.

183. How do you make a radio button group?

Answer: Use the type="radio" attribute and group them with the same name:
```
<input type="radio" name="group1" value="Option1"> Option 1
<input type="radio" name="group1" value="Option2"> Option 2
```
Explanation: Radio buttons with the same name allow only one selection within the group.

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

Answer: Use the <datalist> element with an <input> tag:

<input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Explanation: The <datalist> element provides predefined options that users can search through.

185. What is the `<ruby>` tag in HTML?

Answer: Represents annotations for East Asian typography.
```
<ruby>
  漢 <rt>kan</rt>
  字 <rt>ji</rt>
</ruby>
```
Explanation: The <ruby> element is used to provide pronunciation or other annotations for characters.

186. How do you create a submit button in a form?

Answer: Use the <button> tag with type="submit":
```
<form>
  <button type="submit">Submit</button>
</form>
```
Explanation: A button with type="submit" submits the form to the specified action URL.

187. How do you define a default selected option in a dropdown?

Answer: Use the selected attribute:

<select>
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
</select>

Explanation: The selected attribute pre-selects an option in the dropdown.

188. How do you create a responsive image?

Answer: Use the srcset attribute:
```
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive">
```
Explanation: The srcset and sizes attributes allow the browser to choose the best image size for the device.

189. What is the `<output>` tag used for?

Answer: Displays the result of a calculation or action.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="0">
  +
  <input type="number" id="b" value="0">
  =
  <output name="result">0</output>
</form>

Explanation: The <output> element shows dynamic results based on user inputs.

190. How do you specify a video fallback message?

Answer: Include fallback content inside the <video> tag:
```
<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
```
Explanation: The fallback message is displayed if the browser doesn’t support the <video> tag.

Conclusion

This set of HTML questions dives deeper into interactive elements, accessibility, and advanced use cases, ensuring you’re well-prepared for interviews and real-world development challenges.

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