HTML Interview Questions and Answers (Set 4)

By /

Introduction

This fourth set of HTML interview questions and answers continues to explore advanced concepts and practical applications. Each question includes an explanation and example code to deepen understanding.

51. How do you make an image a clickable link 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 will navigate to the URL specified in the <a> tag.

52. What is the <sup> and <sub> tag?

  • Answer:
    • <sup>: Represents superscript text.
    • <sub>: Represents subscript text.
    H<sub>2</sub>O (Water) and E = mc<sup>2</sup>

    Explanation: These tags are used for mathematical notations or chemical formulas.

53. What is the <map> element in HTML?

  • Answer: Defines image maps, which create clickable areas on an image. 
    <img src="image.jpg" usemap="#map1" alt="Image Map">
<map name="map1">
  <area shape="rect" coords="34,44,270,350" href="https://example.com">
</map>

    Explanation: The <map> element allows you to define clickable regions within an image.

54. How do you disable an input field in HTML?

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

    Explanation: The disabled attribute prevents user interaction with the input field.

55. What is the <template> tag used for?

  • Answer: Holds client-side content that is not rendered when the page loads. 
    <template id="my-template">
  <p>This is template content.</p>
</template>

    Explanation: The <template> tag is used to define reusable HTML fragments for dynamic rendering with JavaScript.

56. How do you specify a placeholder for an input field?

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

    Explanation: The placeholder text provides guidance on what to input until the user types in the field.

57. What is the <address> element?

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

    Explanation: The <address> element is semantic and improves accessibility for contact information.

58. How do you create a multiline placeholder in a <textarea>?

  • Answer: Use the placeholder attribute directly: 
    <textarea placeholder="Line 1

Line 2″>

**Explanation:**
The placeholder appears in the `<textarea>` until the user begins typing.

---

### **59. How do you specify multiple file uploads in a form?**
- **Answer:** Add the `multiple` attribute to the `<input>` tag:
```html
<input type="file" name="files[]" multiple>

Explanation: The multiple attribute allows users to select multiple files for uploading.

60. How do you add a favicon to a webpage?

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

    Explanation: The favicon appears in the browser tab and bookmarks for the webpage.

61. What is the <progress> tag used for?

  • Answer: Displays the progress of a task: 
    <progress value="70" max="100"></progress>

    Explanation: The <progress> tag provides a visual indicator for task completion.

62. How do you use the <meter> tag?

  • Answer: Represents a scalar measurement within a known range: 
    <meter value="0.7" min="0" max="1">70%</meter>

    Explanation: The <meter> tag is used for measurements like disk usage or temperature.

63. What is the purpose of the download attribute in <a> tags?

  • Answer: Forces a file to be downloaded: 
    <a href="file.pdf" download="example.pdf">Download File</a>

    Explanation: The download attribute suggests a filename and triggers file download instead of opening it.

64. What is the <bdi> tag?

  • Answer: Isolates a portion of text that may have a different text direction. 
    <bdi>Example Text</bdi>

    Explanation: The <bdi> tag ensures correct rendering of bidirectional text, such as mixing left-to-right and right-to-left scripts.

65. How do you create a navigation bar in HTML?

  • Answer: Use the <nav> element: 
    <nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

    Explanation: The <nav> element is semantic and represents a block of navigation links.

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

  • Answer:
    • <section>: Groups related content.
    • <article>: Represents self-contained content.
    <section>
  <h2>Section Title</h2>
  <p>Content for this section.</p>
</section>
<article>
  <h2>Article Title</h2>
  <p>This article can stand alone.</p>
</article>

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

67. What is the <wbr> tag?

  • Answer: Suggests a line break opportunity in long words. 
    <p>Thisisavery<wbr>longword.</p>

    Explanation: The browser inserts a line break where the <wbr> tag is placed, if necessary.

68. How do you create a dropdown menu?

  • Answer: Use the <select> element: 
    <select name="options">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

    Explanation: Dropdowns allow users to select from predefined options.

69. How do you create a tooltip in HTML?

  • Answer: Use the title attribute: 
    <button title="Click to submit">Submit</button>

    Explanation: When hovered, the title attribute displays additional information.

70. What is the <optgroup> tag?

  • Answer: Groups options in a <select> dropdown: 
    <select>
  <optgroup label="Group 1">
    <option>Option 1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2</option>
  </optgroup>
</select>

    Explanation: The <optgroup> tag organizes related options for better user experience.

Conclusion

This set of 25 questions delves deeper into the practical and advanced aspects of HTML. These examples and explanations ensure a comprehensive understanding of how to use HTML effectively in real-world scenarios.

Related Posts

Scroll to Top