Html
38 bites tagged Html — interview questions with model answers, and 60-second explainers.
Associating a label with a form input
Explicit association via for and id, implicit by wrapping the input, and why this gives screen readers an accessible name and larger click target. Foundational accessibility for forms. using a placeholder as the label.
Reusable Button with hover, focus, disabled
Use a real <button>, style :hover, a visible :focus-visible ring, and the [disabled] attribute that also blocks interaction. semantic, accessible button states. a clickable <div> or removing focus outlines.
Which ARIA attribute fixes an icon-only button missing its screen reader name?
Tests knowledge of accessible names for interactive elements lacking visible text. Answer: aria-label on the button describing its function, plus aria-hidden on the decorative icon. Red flag: suggesting alt text on the SVG or title attributes as the fix.
How does affordance guide choosing a native button over a styled div?
This tests if you see affordance as built-in behavior, not only looks. A strong answer picks the native button for free keyboard, focus, and reader support, noting a div needs tabindex, role, and keydown logic. A red flag is treating it as purely visual.
How would you use srcset and sizes for responsive image performance?
This tests responsive image selection in the browser. A strong answer covers srcset with w or x descriptors, sizes for layout width hints, and the browser picking before CSS loads. Red flag: suggesting JS detection or CSS backgrounds instead.
What is the viewport meta tag and what does width=device-width, initial-scale=1.0 do?
This tests mobile viewport behavior and CSS pixels. The tag instructs browsers how to size the viewport; width=device-width sets width to screen CSS pixels; initial-scale=1.0 sets a 1:1 zoom ratio. A red flag is confusing viewport width with physical pixels.
What HTML attributes and elements make a banner accessible to screen readers?
This tests semantic HTML for decorative and informative images. A strong answer names img alt, heading levels, and a landmark region such as aside with aria-label. A red flag is relying on CSS or divs without text alternatives.
Accessible Form Design: A Conversation, Not an Interrogation
Think of a form not as a data bucket, but a structured conversation. Every field is a question needing a clear prompt. This is vital for logins and checkouts, especially for users with screen readers. The footgun: using placeholder text as a label.
Semantic HTML: Use the Right Element for the Job
Think of HTML tags as pre-built components, not just style containers. Using `<button>` instead of a styled `<div>` gives you keyboard navigation and screen reader support for free. The biggest mistake is using generic `<div>`s for interactive elements.
Focus Order: The Keyboard's Path Through Your UI
Focus order is the path a user takes through your UI using only a keyboard. It's crucial for accessibility, letting users navigate forms and menus without a mouse.
Alt Text: Giving Images a Voice for Everyone
Alt text gives an image a voice when it can't be seen. It's read by screen readers for accessibility and displayed if an image breaks. The footgun is writing "image of..." or leaving it blank; instead, describe the image's content and purpose.
HTMLMediaElement: The Remote Control for Browser Media
HTMLMediaElement is the shared "remote control" API for `<audio>` and `<video>` tags, letting you programmatically play, pause, and seek. Use it for custom players or syncing animations. Footgun: Browsers often block `autoplay`, so never assume it will work.
Accessing data-* Attributes with `dataset`
The `dataset` property is a live map of an element's `data-*` attributes. It automatically converts HTML `data-user-id` to `element.dataset.userId` in JS, perfect for storing state. The footgun: name conversion is lossy; HTML attributes are always lowercased.
The DOM: Your HTML as a Live Object Tree
The DOM is the browser's live model of a webpage, represented as a tree of objects. JavaScript uses it to find elements, change content, and react to clicks. The footgun: DOM changes are in-memory; they don't edit the original HTML file on the server.
FastAPI: Returning HTML with HTMLResponse
Override FastAPI's default JSON output by using `HTMLResponse` to return a raw HTML string directly from an endpoint. It's for simple status pages or server-side rendered components.
Theming with CSS data-* Attributes
Think of `data-` attributes as labels for UI state, like `data-theme='dark'`. CSS uses attribute selectors (`[data-theme='dark']`) to apply styles directly, avoiding complex class logic.
Image Alt Text: What Screen Readers Say About Pictures
Alt text tells screen readers what to say when an image can't be seen. For a photo, describe the scene. For a button, describe its action ("Submit form"). For pure decoration, use an empty alt="" to tell screen readers to skip it.
Keyboard Focus Order: Navigating by Tab
Keyboard focus order is the path a user takes through your UI using only the Tab key. It must follow a logical sequence that preserves meaning, especially in forms and modals. The footgun is when CSS creates a visual layout that diverges from the HTML.
WAI-ARIA: A Script for Custom UI Accessibility
WAI-ARIA gives custom UI a voice for assistive tech. It's the script telling a screen reader what a `<div>` acting as a button is and if it's "pressed." Use it for custom widgets when native HTML can't.
HTML Parsing: Turning Web Pages into Data
Think of HTML parsing as X-ray vision for web pages, revealing the underlying data structure. It's used for web scraping and automated testing. The main footgun is using regex; a real parser is robust against markup changes.
The Popover API: Native Tooltips and Menus
The Popover API creates tooltips and menus with just HTML, placing them in a top layer above all other content without `z-index` hacks. Use it for action menus or notifications.
The `inert` Attribute: Making UI Sections Unreachable
The `inert` attribute makes a part of the DOM non-interactive and inaccessible. It's like a glass pane over a UI section: you can see it, but can't click, focus, or use a screen reader on it. Use it for off-screen menus or inactive dialogs.
The Accessibility Tree: The DOM for Assistive Tech
The accessibility tree is the DOM's sibling, built for assistive tech. Browsers derive it from your HTML, exposing each element's name, role (e.g., 'button'), and state (e.g., 'checked') to screen readers.
Accessible Name Computation: The UI Naming Algorithm
Browsers follow a strict algorithm to find a name for UI elements to announce to screen readers. It runs on every interactive element, creating the data source for assistive tech.
Get Html bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.