HTML Assessment: Sample Questions | Bryq
Beginner
Intermediate
Advanced
These are three sample questions from Bryq’s HTML assessment, a coding test for hiring front-end developers, web developers and UI engineers. The full assessment covers three levels: beginner, intermediate and advanced, from core elements and attributes to HTML5 semantics, multimedia, web components and client-side APIs. Each question is multiple choice, with one correct answer out of four options.
Beginner
Intermediate
Question
Which markup correctly connects a label to a text input, so that clicking the label places the cursor in the field?
Select your answer
<label for="email">Email</label> <input id="email">
<label name="email">Email</label> <input name="email">
<label>Email</label> <input id="email">
<label id="email">Email</label> <input for="email">
WHY IS THIS THE CORRECT ANSWER
A label’s for attribute must match the input’s id, which links the two so that clicking the label focuses the field and screen readers announce the label. Matching name attributes doesn’t create this link. Wrapping the input inside the label is the other valid way to connect them.
Intermediate
Intermediate
Question
Why should a clickable control be built with <button> rather than a <div> with a click handler?
Select your answer
Buttons can be reached by keyboard and are recognized by assistive technologies by default.
Buttons load faster than <div> elements.
<div> elements can’t respond to click events.
Search engines ignore <div> elements.
WHY IS THIS THE CORRECT ANSWER
A native button can be reached with the Tab key, activated with Enter or Space and is announced as a button by screen readers, all without extra code. A <div> needs a role, a tabindex and keyboard handlers added manually to match that behavior, which is easy to get wrong.
Advanced
Intermediate
Question
Which tag tells the browser to download a critical web font early, before it finds the font referenced in the CSS?
Select your answer
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="font.woff2">
<link rel="dns-prefetch" href="font.woff2">
<script async src="font.woff2"></script>
WHY IS THIS THE CORRECT ANSWER
rel="preload" tells the browser to fetch a resource needed for the current page at high priority, so a font referenced deep in a stylesheet starts downloading straight away. prefetch is a low-priority hint for future pages, and dns-prefetch only looks up the domain. Preloaded fonts also need the crossorigin attribute, or the browser will download them twice.
