HTML Interview Questions and Answers (Set 5)

By /

Introduction

This set continues to build on HTML knowledge, delving into niche topics and advanced uses. Each question is accompanied by examples and detailed explanations to reinforce understanding.

71. How do you create a collapsible menu using the <details> element?

  • Answer: Use the <details> and <summary> tags: 
    <details>
  <summary>Click to Expand</summary>
  <p>This is collapsible content.</p>
</details>

    Explanation: The <details> element creates collapsible content, and <summary> defines the visible label.

72. How do you set the default option in a <select> dropdown?

  • Answer: Add the selected attribute to the <option> tag: 
    <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.

73. What is the purpose of the <main> element in HTML?

  • Answer: Represents the main content of a document. 
    <main>
  <h1>Main Content</h1>
  <p>This is the primary content of the page.</p>
</main>

    Explanation: The <main> element helps screen readers and search engines identify the core content.

74. How do you specify a minimum and maximum value for an input field?

  • Answer: Use the min and max attributes: 
    <input type="number" min="1" max="10">

    Explanation: The min and max attributes restrict the range of acceptable values.

75. How do you group elements in a form?

  • Answer: Use the <fieldset> and <legend> tags: 
    <fieldset>
  <legend>Contact Information</legend>
  <label for="email">Email:</label>
  <input type="email" id="email">
</fieldset>

    Explanation: These tags group related inputs for better organization and accessibility.

76. What is the purpose of the autofocus attribute?

  • Answer: Automatically focuses an input field when the page loads. 
    <input type="text" autofocus>

    Explanation: The autofocus attribute improves user experience by highlighting the most relevant field.

77. How do you disable spell check on an input field?

  • Answer: Use the spellcheck="false" attribute: 
    <input type="text" spellcheck="false">

    Explanation: Disabling spell check is useful for fields where suggestions might be irrelevant, such as usernames.

78. How do you embed a PDF file in an HTML page?

  • Answer: Use the <embed> tag: 
    <embed src="file.pdf" type="application/pdf" width="600" height="400">

    Explanation: The <embed> tag allows users to view the PDF directly in the browser.

79. What is the <cite> tag used for?

  • Answer: Denotes the title of a work, such as a book, song, or movie. 
    <p>The book <cite>1984</cite> was written by George Orwell.</p>

    Explanation: The <cite> tag provides semantic meaning to titles for accessibility and SEO.

80. How do you make a form field required?

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

    Explanation: The required attribute ensures the field must be filled before form submission.

81. What is the <data> element used for?

  • Answer: Links data to a specific piece of content. 
    <p>Product Price: <data value="19.99">$19.99</data></p>

    Explanation: The <data> element associates a machine-readable value with human-readable content.

82. How do you create a time-based input field?

  • Answer: Use the type="time" attribute: 
    <input type="time" name="appointment_time">

    Explanation: Time inputs allow users to select a time using a browser-provided interface.

83. How do you create a range slider in HTML?

  • Answer: Use the type="range" attribute: 
    <input type="range" min="1" max="100" value="50">

    Explanation: Range sliders let users select a value within a specified range interactively.

84. What is the <del> tag used for?

  • Answer: Represents deleted or removed text. 
    <p><del>Old Price: $50</del> New Price: $40</p>

    Explanation: The <del> tag visually strikes through text, indicating it is no longer valid.

85. How do you embed audio in a webpage?

  • Answer: Use the <audio> tag: 
    <audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

    Explanation: The <audio> tag allows embedding and controlling audio playback.

86. How do you preload video content?

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

    Explanation: The preload attribute specifies how the browser should load the video (e.g., auto, metadata, or none).

87. What is the purpose of the <ruby> tag?

  • Answer: Provides annotations for East Asian characters. 
    <ruby>
  英 (England)
  <rt>English</rt>
</ruby>

    Explanation: The <ruby> tag helps display pronunciation guides or annotations for complex characters.

88. How do you set the tabbing order of elements?

  • Answer: Use the tabindex attribute: 
    <input type="text" tabindex="1">
<input type="text" tabindex="2">

    Explanation: The tabindex attribute controls the order in which elements are focused during keyboard navigation.

89. What is the <small> tag used for?

  • Answer: Represents fine print or small-sized text. 
    <p>This is regular text. <small>This is small text.</small></p>

    Explanation: The <small> tag is often used for disclaimers or annotations.

90. How do you make an input field read-only?

  • Answer: Use the readonly attribute: 
    <input type="text" value="Read-Only" readonly>

    Explanation: The readonly attribute prevents users from editing the field but allows copying its value.

Conclusion

This set of 20 advanced HTML questions and answers continues to prepare you for interviews, focusing on modern features and practical use cases.

Related Posts

Scroll to Top