HTML Interview Questions and Answers (Set 8)

By /

Introduction

This eighth set of HTML interview questions covers more advanced topics, including accessibility, multimedia, and newer HTML5 features. Each question is supplemented with examples and detailed explanations.

126. What is the <source> element used for in HTML?

  • Answer: Specifies multiple media resources for <audio> or <video> elements. 
    <video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

    Explanation: The <source> element allows browsers to choose the best available format for playback.

127. How do you create a field for entering a telephone number?

  • Answer: Use the type="tel" attribute: 
    <input type="tel" name="phone" pattern="[0-9]{10}" placeholder="Enter 10-digit phone number">

    Explanation: The tel input type provides an interface optimized for entering phone numbers on mobile devices.

128. How do you specify a video poster image in HTML?

  • Answer: Use the poster attribute in the <video> tag: 
    <video controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
</video>

    Explanation: The poster attribute sets an image to display while the video is loading or until the user starts playback.

129. What is the <mark> tag used for?

  • Answer: Highlights text for emphasis. 
    <p>This is a <mark>highlighted</mark> word.</p>

    Explanation: The <mark> tag is often used to emphasize search terms or key points.

130. How do you create a dropdown list with grouped options?

  • Answer: Use the <optgroup> tag within <select>: 
    <select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
  </optgroup>
</select>

    Explanation: The <optgroup> element groups related options within a dropdown for better organization.

131. What is the <samp> tag?

  • Answer: Represents sample output from a program or system. 
    <p>The program returned: <samp>Error 404</samp></p>

    Explanation: The <samp> tag is used for displaying computer output or program results.

132. How do you create a clickable area on an image?

  • Answer: Use an image map with the <map> and <area> elements: 
    <img src="image.jpg" usemap="#map1" alt="Clickable Image">
<map name="map1">
  <area shape="rect" coords="34,44,270,350" href="https://example.com">
</map>

    Explanation: The <map> and <area> elements define regions on an image that are clickable links.

133. How do you preload audio in HTML?

  • Answer: Use the preload attribute in the <audio> tag: 
    <audio preload="auto" controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

    Explanation: The preload attribute specifies whether the audio should be loaded before playback begins.

134. What is the <code> tag used for?

  • Answer: Represents a fragment of computer code. 
    <p>Use <code>console.log("Hello, World!")</code> to print messages to the console.</p>

    Explanation: The <code> tag is used to semantically mark up inline code snippets.

135. How do you create an ordered list with custom numbering?

  • Answer: Use the type attribute in the <ol> tag: 
    <ol type="i">
  <li>First item</li>
  <li>Second item</li>
</ol>

    Explanation: The type attribute allows custom numbering styles such as Roman numerals (i, I), letters (a, A), or numbers (1).

136. How do you include an icon font in HTML?

  • Answer: Use a web font library like FontAwesome: 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<i class="fas fa-home"></i>

    Explanation: Icon fonts allow scalable vector icons to be added using CSS classes.

137. How do you specify alternative text for an image?

  • Answer: Use the alt attribute: 
    <img src="image.jpg" alt="A beautiful scenery">

    Explanation: The alt attribute improves accessibility by providing text descriptions for images.

138. What is the <wbr> tag?

  • Answer: Specifies a line break opportunity within a long word. 
    <p>Thisisavery<wbr>longword.</p>

    Explanation: The <wbr> tag indicates where a line break can occur without affecting the text layout.

139. How do you create a table with column and row spans?

  • Answer: Use the colspan and rowspan attributes: 
    <table border="1">
  <tr>
    <th colspan="2">Header</th>
  </tr>
  <tr>
    <td rowspan="2">Row 1 and 2</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>

    Explanation: colspan merges columns, and rowspan merges rows in a table.

140. What is the <bdi> tag?

  • Answer: Isolates a section of text for bidirectional text. 
    <p>Username: <bdi>example123</bdi></p>

    Explanation: The <bdi> tag ensures text direction is not influenced by its surrounding content.

141. How do you disable autocomplete for a form field?

  • Answer: Use the autocomplete="off" attribute: 
    <input type="text" name="username" autocomplete="off">

    Explanation: This prevents browsers from suggesting previously entered values.

142. How do you specify a default value for an input field?

  • Answer: Use the value attribute: 
    <input type="text" value="Default Text">

    Explanation: The value attribute sets a default value displayed when the page loads.

143. How do you create a responsive video?

  • Answer: Wrap the <video> element in a responsive container: 
    <div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;">
  <iframe src="https://www.youtube.com/embed/example" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>
</div>

    Explanation: This approach maintains the aspect ratio while resizing the video for responsiveness.

Conclusion

This set of advanced HTML questions deepens understanding of multimedia, accessibility, and modern practices, equipping you for challenging interview scenarios.

Related Posts