HTML Interview Questions and Answers (Set 3)

By /

Introduction

This third set of HTML interview questions and answers builds on the previous sets, focusing on more intermediate and advanced topics. Each question includes an explanation and example code to solidify understanding.

36. What is the <details> tag in HTML?

  • Answer: The <details> tag creates a collapsible section on a webpage. 
    <details>
  <summary>More Information</summary>
  <p>This section contains additional details that can be expanded or collapsed.</p>
</details>

    Explanation: The <details> tag is used for content that is hidden by default and can be revealed by clicking the <summary> element.

37. How do you use the <mark> tag in HTML?

  • Answer: The <mark> tag highlights text. 
    <p>This is a <mark>highlighted</mark> word in a paragraph.</p>

    Explanation: The <mark> tag is useful for drawing attention to important text, such as search terms.

38. What is the purpose of the <blockquote> tag?

  • Answer: The <blockquote> tag is used to define a section quoted from another source. 
    <blockquote cite="https://example.com">
  This is a quoted section from an external source.
</blockquote>

    Explanation: The cite attribute specifies the source of the quotation, which can be helpful for referencing.

39. What is the <canvas> element used for?

  • Answer: The <canvas> element is used for drawing graphics on the web using JavaScript. 
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 150, 75);
</script>

    Explanation: The <canvas> element provides a surface for rendering 2D or 3D graphics via JavaScript.

40. How do you define a tooltip in HTML?

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

    Explanation: When the user hovers over the element, the text in the title attribute is displayed as a tooltip.

41. What is the difference between <ol> and <ul>?

  • Answer: <ol> is used for ordered (numbered) lists, and <ul> is used for unordered (bulleted) lists. 
    <ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

    Explanation: Ordered lists are numbered sequentially, while unordered lists use bullets.

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

  • Answer: Displays the result of a calculation or action in a form. 
    <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> tag is often used in forms to show calculated results dynamically.

43. How do you create an accessible <button>?

  • Answer: Use proper labels and ARIA attributes if needed: 
    <button aria-label="Submit the form">Submit</button>

    Explanation: Adding aria-label ensures the button is accessible to screen readers.

44. How do you embed a custom font in HTML?

  • Answer: Use the <style> tag or a linked stylesheet with @font-face: 
    <style>
  @font-face {
    font-family: 'CustomFont';
    src: url('customfont.woff2') format('woff2');
  }
  body {
    font-family: 'CustomFont', sans-serif;
  }
</style>

    Explanation: The @font-face rule allows embedding custom fonts in a webpage.

45. How do you use the <figure> and <figcaption> tags?

  • Answer: These tags group media elements with captions. 
    <figure>
  <img src="image.jpg" alt="Example Image">
  <figcaption>An example image caption.</figcaption>
</figure>

    Explanation: The <figure> element groups media content, and <figcaption> provides a descriptive caption.

46. What is the <kbd> element?

  • Answer: Represents keyboard input. 
    Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.

    Explanation: The <kbd> tag is used to indicate text the user should input via the keyboard.

47. What is the <pre> tag?

  • Answer: Preserves whitespace and formatting in text. 
    <pre>
This text
    is preformatted.
</pre>

    Explanation: The <pre> tag maintains the spacing and line breaks as written in the HTML source.

48. How do you create a multi-line text input?

  • Answer: Use the <textarea> element: 
    <textarea rows="4" cols="50">Default text</textarea>

    Explanation: The <textarea> tag allows users to input multiple lines of text.

49. How do you create a file input in a form?

  • Answer: Use the type="file" attribute: 
    <input type="file" name="upload">

    Explanation: The file input lets users select files for uploading.

50. How do you create a clickable phone number link?

  • Answer: Use the tel: scheme in the href attribute: 
    <a href="tel:+1234567890">Call Us</a>

    Explanation: Phone links initiate a call on mobile devices or supported apps.

Conclusion

This set of 25 questions dives deeper into HTML capabilities and best practices, equipping you with the knowledge needed for challenging interview scenarios.

Related Posts

Scroll to Top