Q: What’s the purpose of the `srcset` attribute?

The `srcset` attribute on ` ` lists multiple image sources for different screen resolutions or sizes, like ` `. Browsers pick the best one—great for responsive design.

Question 1

What are ARIA roles?

Accepted Answer

ARIA roles add accessibility info to elements, like `role="alert"` on a `

` to signal it’s a notification. They’re vital for dynamic content when standard HTML isn’t enough—use them to help screen readers but don’t overdo it.

Question 2

How do you add structured data with HTML?

Accepted Answer

Use attributes like `itemscope`, `itemtype`, and `itemprop` for microdata, or JSON-LD in a `

Question 3

What’s the `<dialog>` tag for?

Accepted Answer

The `<dialog>` tag creates a modal or popup, like `<dialog><p>Hi</p></dialog>`. Use it with JS (`showModal()`) for native dialogs—simpler than custom divs for alerts or forms.

Question 4

What’s the purpose of the `draggable` attribute?

Accepted Answer

The `draggable` attribute makes an element movable with drag-and-drop, like `

Drag me

`. Pair it with JS events (`ondragstart`)—it’s part of HTML5’s interactive toolkit.

Question 5

What is the Shadow DOM?

Accepted Answer

The Shadow DOM is a way to encapsulate a mini DOM tree inside an element, keeping its styles and structure separate from the main page. It’s great for components like custom widgets, avoiding style conflicts. You create it with JavaScript, not raw HTML.

Question 6

What’s the difference between `<script>` with `async` and `defer`?

Accepted Answer

Both `async` and `defer` load scripts without halting HTML parsing, but `async` runs the script as soon as it’s ready (out of order), while `defer` waits until the HTML is fully parsed (in order). Use `defer` for external scripts that need the DOM, `async` for independent ones.

Question 7

What’s the `<template>` tag for?

Accepted Answer

The `<template>` tag holds HTML content that isn’t rendered until JavaScript activates it, like `<template><p>Hi</p></template>`. It’s perfect for reusable snippets or dynamic cloning—no display until you need it.

Question 8

What’s the purpose of the `contenteditable` attribute?

Accepted Answer

The `contenteditable` attribute makes an element editable by users, like `

Edit me

`. It’s a quick way to enable inline editing—great for dynamic apps.

Question 9

What’s the purpose of the `srcset` attribute?

Accepted Answer

The `srcset` attribute on `` lists multiple image sources for different screen resolutions or sizes, like `

`. Browsers pick the best one—great for responsive design.

Question 10

What’s the purpose of the `tabindex` attribute?

Accepted Answer

The `tabindex` attribute controls keyboard navigation order, like `

`. Set it to `0` for natural order, positive numbers for custom order, or `-1` to exclude—essential for accessibility.

DeVlt

Hard Html Interview Questions

Unlock All Interview Questions

Why Practice Hard Html Questions?

DeVlt