HTML Quiz (Advanced) - All Questions

This HTML Advanced Quiz is built for experienced developers who want to test deep, real-world HTML knowledge. It focuses on advanced semantics, accessibility, browser behavior, performance, and edge cases commonly asked in senior-level interviews.

Question 1: What is the primary purpose of the ARIA role attribute?

To apply styles dynamically
To define JavaScript behavior
To improve accessibility for assistive technologies
To optimize SEO rankings

Explanation: ARIA roles provide semantic meaning for assistive technologies.

Question 2: Which HTML element should be used only once per document?

<header>
<main>
<section>
<article>

Explanation: <main> represents the dominant content and should be unique.

Question 3: What happens when multiple elements share the same id?

HTML ignores duplicates
Browser merges them
Results in invalid HTML and unpredictable behavior
Only the last one is rendered

Explanation: IDs must be unique; duplicates cause invalid markup.

Question 4: Which attribute is required for <iframe> sandbox restrictions?

secure
policy
sandbox
isolate

Explanation: sandbox enables security restrictions for iframe content.

Question 5: Which element improves accessibility for dynamic content updates?

aria-live
role-alert
aria-update
data-live

Explanation: aria-live informs screen readers of dynamic changes.

Question 6: Which HTML element should wrap site-wide navigation?

<menu>
<header>
<nav>
<aside>

Explanation: <nav> defines a section of navigation links.

Question 7: What is the main difference between <section> and <div>?

<section> is inline
<div> supports ARIA
<section> has semantic meaning
<div> improves SEO automatically

Explanation: <section> carries semantic meaning; <div> does not.

Question 8: Which element is best for marking a self-contained news article?

<section>
<article>
<main>
<aside>

Explanation: <article> represents independent, reusable content.

Question 9: Which attribute prevents focus on an interactive element?

disabled
hidden
tabindex='-1'
readonly

Explanation: tabindex='-1' removes an element from keyboard navigation.

Question 10: Which HTML element should not contain another <form> element?

<section>
<article>
<form>
<div>

Explanation: HTML does not allow nested forms.

Question 11: Which tag is best for marking time-sensitive content?

<meta>
<data>
<time>
<span>

Explanation: <time> provides machine-readable date/time.

Question 12: What is the effect of the hidden attribute?

Removes element from DOM
Hides element visually and from assistive tech
Applies display:none only
Only hides from screen readers

Explanation: hidden hides content from all users and assistive tools.

Question 13: Which element defines a disclosure widget?

<dialog>
<details>
<summary>
<fieldset>

Explanation: <details> creates expandable disclosure content.

Question 14: Which element must be the first child of <details>?

<header>
<summary>
<caption>
<title>

Explanation: <summary> labels the details content.

Question 15: Which attribute allows an input to accept only numbers?

pattern
numeric
type='number'
inputmode

Explanation: type='number' restricts input to numeric values.

Question 16: Which element defines a dialog box or modal?

<modal>
<popup>
<dialog>
<window>

Explanation: <dialog> represents modal or non-modal dialogs.

Question 17: Which HTML feature improves page load performance for images?

async
defer
loading='lazy'
prefetch

Explanation: Lazy loading defers offscreen images.

Question 18: Which attribute associates a form with an external input?

connect
form
bind
link

Explanation: The form attribute links inputs outside the form.

Question 19: Which HTML element represents machine-readable metadata?

<meta>
<data>
<time>
<info>

Explanation: <meta> provides metadata about the document.

Question 20: Which element improves accessibility for error messages?

role='alert'
aria-error
data-error
aria-warning

Explanation: role='alert' announces important messages.

Question 21: Which tag defines bidirectional text override?

<bdi>
<bdo>
<rtl>
<dir>

Explanation: <bdo> overrides text direction explicitly.

Question 22: Which HTML element isolates user-generated text direction?

<bdo>
<bdi>
<span>
<dir>

Explanation: <bdi> isolates bidirectional text.

Question 23: Which attribute prevents form submission?

disabled
novalidate
readonly
stop

Explanation: novalidate disables browser validation.

Question 24: Which element represents scalar measurement within a range?

<progress>
<range>
<meter>
<output>

Explanation: <meter> represents known scalar values.

Question 25: Which HTML tag represents calculation results?

<value>
<result>
<output>
<calc>

Explanation: <output> displays calculation results.

Question 26: Which element should contain repeated page-level headings?

<main>
<header>
<section>
<article>

Explanation: <header> contains introductory content and headings.

Question 27: Which attribute improves keyboard navigation order?

order
tabindex
focus
accesskey

Explanation: tabindex controls keyboard focus order.

Question 28: Which element represents a group of media content?

<media>
<figure>
<picture>
<source>

Explanation: <figure> groups media with optional captions.

Question 29: Which tag provides a caption for <figure>?

<caption>
<summary>
<figcaption>
<label>

Explanation: <figcaption> describes figure content.

Question 30: Which element enables responsive images?

<img>
<source>
<picture>
<media>

Explanation: <picture> allows responsive image sources.

Question 31: Which attribute specifies image resource candidates?

src
sizes
srcset
media

Explanation: srcset provides multiple image sources.

Question 32: Which attribute defines when a <source> is used?

sizes
media
type
condition

Explanation: media defines the condition for source usage.

Question 33: Which element improves SEO for structured content?

<div>
<span>
<section>
<br>

Explanation: <section> adds semantic structure.

Question 34: Which attribute defines relationship type in links?

type
rel
ref
link

Explanation: rel specifies the relationship to the linked resource.

Question 35: Which element represents supplementary content?

<aside>
<footer>
<header>
<nav>

Explanation: <aside> contains tangential content.

Question 36: Which element should not be used for layout purposes?

<div>
<table>
<section>
<article>

Explanation: Tables should not be used for layout.

Question 37: Which attribute hints browser about resource priority?

importance
fetchpriority
priority
preload

Explanation: fetchpriority hints loading priority.

Question 38: Which tag defines content footer for its nearest section?

<bottom>
<aside>
<footer>
<end>

Explanation: <footer> represents footer content.

Question 39: Which HTML element defines ruby annotations?

<rt>
<ruby>
<rp>
<annotation>

Explanation: <ruby> represents ruby annotations.

Question 40: Which element provides fallback for ruby text?

<rt>
<rp>
<rb>
<rf>

Explanation: <rp> provides fallback parentheses.

Question 41: Which attribute connects labels implicitly?

id
for
name
aria-label

Explanation: Implicit labels wrap inputs using id association.

Question 42: Which element improves document outline in screen readers?

<div>
<span>
<section>
<br>

Explanation: <section> improves accessible document outline.

Question 43: Which attribute prevents autofill?

autocomplete='off'
readonly
secure
no-fill

Explanation: autocomplete='off' disables autofill.

Question 44: Which element represents user interaction output?

<data>
<output>
<samp>
<result>

Explanation: <output> represents user interaction results.

Question 45: Which tag defines machine-readable content mapping?

<meta>
<data>
<time>
<value>

Explanation: <data> maps human-readable content to machine values.

Back to programming Quizzes

HTML Quiz (Advanced)

Questions

~10

Minutes

Min Limit