HTML Interview Questions and Answers (Set 2)

By /

Introduction

Continuing from the previous set of questions, this blog provides the next 25 interview questions on HTML topics. These questions dive deeper into intermediate concepts, ensuring thorough preparation for interviews.

16. What is the difference between <section> and <div>?

  • Answer: <section> is a semantic element used to group related content, while <div> is a generic container with no inherent meaning.

    Explanation: Use <section> for meaningful grouping, like dividing content into chapters, and <div> for structural purposes when no semantic meaning is needed.

17. How do you specify the character encoding for an HTML document?

  • Answer: Use the <meta charset="UTF-8"> tag inside the <head> section.

    Explanation: This tag ensures the browser correctly interprets characters, including special symbols and non-English text.

18. What is the purpose of the <fieldset> and <legend> tags?

  • Answer: <fieldset> groups related form elements, and <legend> provides a title for the group.

    <fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</fieldset>

    Explanation: These tags improve form accessibility and readability by visually grouping related inputs.

19. What is the purpose of the <noscript> tag?

  • Answer: It defines fallback content displayed when JavaScript is disabled in the user’s browser.

    Explanation: This tag ensures functionality or messages are available to users without JavaScript.

20. How do you make a dropdown list in HTML?

  • Answer: Use the <select> and <option> tags:

    <select name="cars">
  <option value="volvo">Volvo</option>
  <option value="bmw">BMW</option>
</select>

    Explanation: The <select> element creates a dropdown menu, with <option> specifying each selectable item.

21. What is the purpose of the <label> tag?

  • Answer: Associates a text label with a form input element, improving accessibility:

    <label for="email">Email:</label>
<input type="email" id="email">

    Explanation: The for attribute connects the label to the input, enabling users to click the label to focus the input.

22. How do you create an email input field in a form?

  • Answer: Use the type="email" attribute in the <input> tag:

    <input type="email" name="user_email">

    Explanation: Email inputs validate the format of entered email addresses, reducing errors.

23. What is the difference between defer and async attributes in <script> tags?

  • Answer:

    • defer: Executes the script after the HTML document has been fully parsed.
    • async: Executes the script as soon as it’s downloaded, without waiting for HTML parsing.
    <script src="script.js" defer></script>

    Explanation: Use defer for dependent scripts and async for standalone scripts.

24. How do you create a checkbox in HTML?

  • Answer: Use the type="checkbox" attribute in the <input> tag:

    <input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter

    Explanation: Checkboxes allow users to select multiple options independently.

25. What is the <datalist> element used for?

  • Answer: Provides a list of predefined options for an input field:

    <input list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>

    Explanation: <datalist> enhances user input with suggestions while allowing custom entries.

26. What are HTML data attributes?

  • Answer: Custom attributes prefixed with data- used to store additional information:

    <div data-user-id="12345">User</div>

    Explanation: Data attributes allow embedding extra data into HTML elements, accessible via JavaScript.

27. How do you create a search input field?

  • Answer: Use the type="search" attribute in the <input> tag:

    <input type="search" name="query">

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

28. How do you embed a YouTube video in HTML?

  • Answer: Use the <iframe> tag with the video URL:

    <iframe width="560" height="315" src="https://www.youtube.com/embed/video_id" frameborder="0" allowfullscreen></iframe>

    Explanation: <iframe> is commonly used for embedding external media, like YouTube videos.

29. How do you create a hidden input field?

  • Answer: Use the type="hidden" attribute in the <input> tag:

    <input type="hidden" name="user_id" value="12345">

    Explanation: Hidden fields store data that isn’t visible to users but submitted with the form.

30. What is the purpose of the <abbr> tag?

  • Answer: Represents an abbreviation or acronym:

    <abbr title="HyperText Markup Language">HTML</abbr>

    Explanation: The title attribute provides the full form of the abbreviation on hover.

31. What is the <progress> element used for?

  • Answer: Displays a progress bar:

    <progress value="70" max="100"></progress>

    Explanation: This element visually represents a task’s completion status.

32. 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 pre-fills the input field with a specified value.

33. How do you create a number input field?

  • Answer: Use the type="number" attribute:

    <input type="number" name="quantity" min="1" max="10">

    Explanation: Number inputs allow users to enter numeric values within a defined range.

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

  • Answer: Represents a specific time or date:

    <time datetime="2023-12-25">December 25, 2023</time>

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

35. What is the <address> element used for?

  • Answer: Defines contact information:

    <address>
  123 Main Street<br>
  City, State, ZIP Code
</address>

    Explanation: The <address> element semantically indicates contact details, often for authors or organizations.

Conclusion

This set of 25 questions builds on foundational HTML knowledge, preparing you for intermediate-level discussions. Mastering these topics will enhance your ability to tackle diverse interview scenarios confidently.

Related Posts

Scroll to Top