HTML Interview Questions and Answers (Set 9)

By /

Introduction

This set of HTML interview questions covers edge cases, modern features, and best practices. Each question is designed to provide practical insights into using HTML effectively in advanced scenarios.

144. What is the <fieldset> element, and how is it used?

  • Answer: Groups related elements in a form and provides a visual boundary. 
    <fieldset>
  <legend>Personal Information</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> and <legend> elements help organize form controls, improving readability and accessibility.

145. How do you create a hidden input field?

  • Answer: Use the type="hidden" attribute: 
    <input type="hidden" name="user_id" value="12345">

    Explanation: Hidden fields store data that is not visible to users but is submitted with the form.

146. What is the <meta> viewport tag, and why is it important?

  • Answer: Ensures proper scaling and responsiveness on mobile devices. 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Explanation: The viewport meta tag allows web pages to scale correctly on different screen sizes, critical for responsive design.

147. How do you add subtitles to a video?

  • Answer: Use the <track> element within a <video> tag: 
    <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 provides text tracks like subtitles or captions, enhancing accessibility.

148. What is the difference between id and class attributes?

  • Answer:
    • id: Unique identifier for a single element.
    • class: Can be applied to multiple elements for grouping.
    <div id="unique">Unique Element</div>
<div class="common">Shared Style</div>

    Explanation: Use id for single instances and class for reusable styles or scripts.

149. How do you define a responsive image?

  • Answer: Use the srcset and sizes attributes: 
    <img src="image-small.jpg" srcset="image-small.jpg 500w, image-large.jpg 1000w" sizes="(max-width: 600px) 500px, 1000px" alt="Responsive Image">

    Explanation: The srcset attribute specifies multiple image sources, and sizes defines display conditions for each source.

150. How do you create an inline frame (iframe) in HTML?

  • Answer: Use the <iframe> tag: 
    <iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>

    Explanation: The <iframe> tag embeds another HTML page within the current page.

151. What is the <noscript> element?

  • Answer: Provides alternative content for users with JavaScript disabled. 
    <noscript>
  <p>JavaScript is disabled on your browser. Please enable it for full functionality.</p>
</noscript>

    Explanation: The <noscript> element ensures fallback content is displayed when scripts are not supported or disabled.

152. How do you disable a form control?

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

    Explanation: The disabled attribute prevents user interaction with the form control.

153. How do you make a list item draggable in HTML5?

  • Answer: Use the draggable="true" attribute: 
    <li draggable="true">Drag me!</li>

    Explanation: The draggable attribute enables drag-and-drop functionality for the element.

154. What is the <output> element used for?

  • Answer: Displays the result of a calculation or user 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 is typically used in forms to show real-time results.

155. How do you specify fallback content for <audio> or <video>?

  • Answer: Place fallback content between the opening and closing tags: 
    <audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

    Explanation: Fallback content ensures compatibility with browsers that do not support multimedia elements.

156. What is the difference between <section> and <article>?

  • Answer:
    • <section>: Groups related content.
    • <article>: Represents self-contained, reusable content.
    <section>
  <h2>Section Title</h2>
  <p>Content for the section.</p>
</section>
<article>
  <h2>Article Title</h2>
  <p>Content for the article.</p>
</article>

    Explanation: Use <section> for thematic grouping and <article> for independent, reusable content.

157. How do you create a button that submits a form?

  • Answer: Use the <button> tag with type="submit": 
    <form>
  <button type="submit">Submit</button>
</form>

    Explanation: The type="submit" attribute submits the form data to the specified action URL.

158. What is the <time> element in HTML?

  • Answer: Represents a specific time or date. 
    <p>Event Date: <time datetime="2023-12-25">December 25, 2023</time></p>

    Explanation: The datetime attribute provides a machine-readable format, useful for search engines and accessibility tools.

159. How do you create a collapsible section in HTML?

  • Answer: Use the <details> and <summary> tags: 
    <details>
  <summary>More Information</summary>
  <p>This is the hidden content revealed upon clicking.</p>
</details>

    Explanation: The <details> element creates collapsible content, with <summary> defining the clickable label.

160. How do you include custom metadata in HTML?

  • Answer: Use the <meta> tag: 
    <meta name="author" content="John Doe">
<meta name="description" content="An example of custom metadata.">

    Explanation: Custom metadata improves SEO and helps define page-specific information.

Conclusion

This set of HTML questions prepares you for advanced scenarios and practical applications. Mastering these topics ensures you’re well-equipped for real-world development challenges and technical interviews.

Related Posts

Scroll to Top