LCWD LogoLCWD
H

HTML Handbook

Clean • Professional

Intermediate Level

4 minute

HTML Interview Questions – Intermediate Level (2025

1. What are the advantages of using HTML5 over HTML4?

HTML5 introduces semantic tags (<header>, <footer>, <article>, <section>), built-in multimedia support with <video> and <audio>, drawing via <canvas>, enhanced forms, APIs like Web Storage and Geolocation, and better mobile responsiveness using <meta name="viewport">.

2. What are semantic and non-semantic elements in HTML?

Semantic elements clearly describe their meaning (e.g., <article>, <nav>, <header>).

Non-semantic elements like <div> and <span> do not convey meaning.

Semantic elements improve accessibility and SEO.

3. Explain the role of the data-* attribute in HTML5.

data-* attributes store custom data in HTML elements for use with JavaScript.

Example:

<div data-user-id="101" data-role="admin">User Info</div>
<script>
  console.log(document.querySelector('div').dataset.userId);
</script>

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

<article> represents self-contained, independent content like a blog post.

<section> groups related content thematically, like chapters or sections in a document.

5. How does the contenteditable attribute work?

When contenteditable="true" is applied to an element, users can edit its text directly in the browser.

<div contenteditable="true">Edit this text!</div>

6. What are HTML5 form validation attributes?

  • required – Field must not be empty
  • pattern – Defines regex for input
  • min, max, maxlength – Restrict values or length
  • type – Enforces format (e.g., email, number)
<input type="email" required>
<input type="text" pattern="[A-Za-z]{3,}">

7. What is the purpose of <figure> and <figcaption>?

They group and describe visual or code elements.

<figure>
  <img src="chart.png" alt="Sales Chart">
  <figcaption>Quarterly Sales Report</figcaption>
</figure>

8. How does the <meta name="viewport"> tag make a page responsive?

It adjusts the layout for mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

9. What are ARIA attributes in HTML?

ARIA (Accessible Rich Internet Applications) improves accessibility by defining roles and labels for assistive technologies.

Example:

<button aria-label="Close">X</button>

10. Difference between defer and async in <script> tags

AttributeExecution TimeOrder Maintained
asyncExecutes as soon as loaded❌ No
deferExecutes after HTML parsing✅ Yes
<script async src="analytics.js"></script>
<script defer src="app.js"></script>

11. What is the difference between localStorage and sessionStorage?

StoragePersistenceCapacity
localStorageUntil manually cleared~10MB
sessionStorageUntil tab closed~5MB
localStorage.setItem('user', 'John');
sessionStorage.setItem('theme', 'dark');

12. What is the purpose of the <canvas> element?

It provides a 2D drawing surface for graphics using JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  const c = document.getElementById("myCanvas");
  const ctx = c.getContext("2d");
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 50, 50);
</script>

13. Difference between <canvas> and <svg>

Feature<canvas><svg>
TypePixel-basedVector-based
ScalabilityLoses quality on zoomInfinite scaling
Use CaseGames, animationsCharts, logos

14. How to handle cross-browser compatibility in HTML?

  • Use <!DOCTYPE html>
  • Apply CSS prefixes (webkit-, moz-)
  • Test on multiple browsers
  • Use Modernizr for feature detection
  • Provide fallbacks and polyfills

15. What are void elements in HTML?

Void (self-closing) elements don’t have closing tags.

Examples: <br>, <img>, <hr>, <meta>, <input>, <link>

16. What are global attributes?

Attributes usable on any HTML element:

id, class, style, title, lang, hidden, tabindex, draggable, contenteditable

17. What is the difference between <script>, <link>, and <style>?

TagPurpose
<script>Adds or links JavaScript
<link>Links external CSS or files
<style>Embeds internal CSS

18. What is the <details> and <summary> element?

They create collapsible sections.

<details>
  <summary>Show More</summary>
  <p>Hidden content here.</p>
</details>

19. What is the <picture> tag used for?

It helps serve responsive images for different devices.

<picture>
  <source srcset="large.jpg" media="(min-width:800px)">
  <img src="small.jpg" alt="Example Image">
</picture>

20. Difference between relative and absolute URLs

  • Relative: Based on current path → images/pic.jpg
  • Absolute: Includes full domain → https://example.com/images/pic.jpg

21. What is the difference between <button> and <input type="button">?

<button> can contain HTML inside (e.g., icons or styled text).

<input type="button"> is self-closing and text-only (via value).

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

Used to group related form fields and provide labels.

<fieldset>
  <legend>Personal Info</legend>
  <input type="text" placeholder="Name">
</fieldset>

23. What is the <template> tag?

It stores HTML markup that is not rendered immediately and can be cloned dynamically using JavaScript.

<template id="card">
  <div class="card">Hello</div>
</template>

24. What are custom elements in HTML5?

Developers can define new tags using Web Components.

class MyCard extends HTMLElement {}
customElements.define('my-card', MyCard);

25. What are microdata attributes in HTML5?

They add structured data for SEO using Schema.org.

<div itemscope itemtype="<https://schema.org/Person>">
  <span itemprop="name">John</span>
</div>

26. What is the <noscript> tag?

It displays fallback content when JavaScript is disabled.

<noscript>Your browser does not support JavaScript.</noscript>

 

Article 0 of 0