HTML Interview Questions and Answers (Set 14)

By /

Introduction

This set of HTML interview questions focuses on specialized topics and advanced usage scenarios. Each question is accompanied by explanations and examples to help you prepare effectively.

261. How do you include a favicon in an HTML document?

  • Answer: Use the <link> tag in the <head> section: 
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    Explanation: The <link> tag specifies the path to the favicon, which appears in the browser tab and bookmarks.

262. How do you create a checkbox group in HTML?

  • Answer: Use multiple <input type="checkbox"> elements: 
    <label><input type="checkbox" name="hobby" value="reading"> Reading</label>
<label><input type="checkbox" name="hobby" value="traveling"> Traveling</label>

    Explanation: A group of checkboxes allows users to select multiple options independently.

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

  • Answer: Use the readonly attribute: 
    <input type="text" value="This is read-only" readonly>

    Explanation: The readonly attribute prevents users from modifying the field’s value but allows copying.

264. 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.

265. How do you create a clickable image in HTML?

  • Answer: Wrap the <img> tag inside an <a> tag: 
    <a href="https://example.com">
  <img src="image.jpg" alt="Clickable Image">
</a>

    Explanation: Clicking the image navigates to the specified URL.

266. What is the <time> element used for?

  • Answer: Represents a specific time or date. 
    <p>The event will be held on <time datetime="2024-01-01">January 1, 2024</time>.</p>

    Explanation: The datetime attribute provides a machine-readable format for the date or time.

267. How do you create an input field for URLs?

  • Answer: Use the type="url" attribute: 
    <input type="url" name="website" placeholder="Enter your website">

    Explanation: The url input type validates that the entered value is a valid URL.

268. What is the <bdi> tag, and how is it used?

  • Answer: Isolates a segment of text to ensure its directionality doesn’t affect surrounding text. 
    <p>Username: <bdi>user123</bdi></p>

    Explanation: The <bdi> tag is useful for mixing left-to-right and right-to-left text.

269. How do you specify a download filename for a link?

  • Answer: Use the download attribute: 
    <a href="document.pdf" download="CustomFilename.pdf">Download</a>

    Explanation: The download attribute suggests a filename to save the file as.

270. How do you include a progress bar in HTML?

  • Answer: Use the <progress> element: 
    <progress value="70" max="100">70%</progress>

    Explanation: The <progress> tag visually represents task completion progress.

271. How do you create a numbered list with Roman numerals?

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

    Explanation: The type attribute specifies the numbering style for ordered lists.

272. What is the <template> tag, and how is it used?

  • Answer: Defines reusable HTML fragments that are not rendered until activated with JavaScript. 
    <template id="myTemplate">
  <p>This is template content.</p>
</template>

    Explanation: The <template> tag is useful for dynamically creating DOM elements.

273. How do you specify a video poster image?

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

    Explanation: The poster attribute displays an image before the video starts playing.

274. How do you group form controls in HTML?

  • Answer: Use the <fieldset> and <legend> tags: 
    <fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</fieldset>

    Explanation: These tags improve form structure and accessibility.

275. What is the purpose of the <output> tag?

  • 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 shows dynamic results based on user inputs.

276. How do you preload an image in HTML?

  • Answer: Use the <link> tag with rel="preload": 
    <link rel="preload" href="image.jpg" as="image">

    Explanation: Preloading ensures images are loaded before they are displayed, improving performance.

277. How do you create a search input field?

  • Answer: Use the type="search" attribute: 
    <input type="search" name="query" placeholder="Search here">

    Explanation: The search input type provides an optimized interface for search queries.

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

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

    Explanation: The <cite> tag semantically marks up the title of creative works.

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

  • Answer: Use the multiple attribute in a <select> element: 
    <select 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.

280. How do you make an element draggable in HTML?

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

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

281. How do you embed a PDF file in HTML?

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

    Explanation: The <embed> tag displays a PDF file directly in the browser.

282. What is the <address> tag used for?

  • Answer: Represents contact information for the author or owner of a document. 
    <address>
  Contact us at: example@example.com
</address>

    Explanation: The <address> tag semantically defines contact information for better accessibility.

283. How do you create a horizontal rule in HTML?

  • Answer: Use the <hr> tag: 
    <hr>

    Explanation: The <hr> tag creates a horizontal line, often used to separate content sections.

284. How do you specify alternate text for an image?

  • Answer: Use the alt attribute: 
    <img src="image.jpg" alt="Description of the image">

    Explanation: The alt attribute improves accessibility and displays a fallback text if the image fails to load.

285. How do you create an email link in HTML?

  • Answer: Use the mailto: scheme in an <a> tag: 
    <a href="mailto:example@example.com">Send Email</a>

    Explanation: The mailto: scheme opens the default email client with the specified address.

286. What is the <noscript> tag used for?

  • Answer: Defines content to display when JavaScript is disabled. 
    <noscript>
  <p>JavaScript is disabled in your browser. Please enable it for the best experience.</p>
</noscript>

    Explanation: The <noscript> tag provides fallback content for users with JavaScript disabled.

287. How do you include subtitles in a video?

  • Answer: Use the <track> tag within a <video> element: 
    <video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

    Explanation: The <track> element provides subtitles or captions for video content, improving accessibility.

288. How do you make a text input field required?

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

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

289. How do you create a dropdown menu in HTML?

  • Answer: Use the <select> and <option> elements: 
    <select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

    Explanation: The <select> element creates a dropdown, and <option> defines the items within it.

290. How do you include a text area with a default value?

  • Answer: Add the default value between the <textarea> tags: 
    <textarea>Default text</textarea>

    Explanation: The content between the opening and closing <textarea> tags appears as the default value.

Conclusion

This expanded set of HTML questions and answers completes the series, covering foundational and advanced topics to enhance your understanding and preparation.

Related Posts

Scroll to Top