Html
38 bites tagged Html — interview questions with model answers, and 60-second explainers.
WAI-ARIA Roles: Semantics for Custom Components
WAI-ARIA roles are job titles for HTML elements, telling assistive tech what a generic `<div>` is meant to be, like a tab or button. Use them for custom UI components that lack a native HTML equivalent.
tabindex: Control Element Focus and Tab Order
The `tabindex` attribute lets you control an element's keyboard focus. Use `tabindex="0"` to make custom components tabbable in document order, or `tabindex="-1"` to make an element focusable only by script, like for a modal.
Semantic HTML: Describe Meaning, Not Just Looks
Semantic HTML uses tags that describe the content's role (e.g., `<article>`), not just its appearance. This helps screen readers and search engines understand your page, improving accessibility and SEO. The footgun is using `<div>` for everything.
Form-Associated Custom Elements: Your Own Inputs
Make your custom elements behave like native inputs within a `<form>`. This lets them carry a value, be validated, and submit with the form. Use it for custom widgets like tag inputs. The footgun: its state won't submit if you don't call `setFormValue()`.
HTML Slots: Making Web Components Customizable
The `<slot>` element is a placeholder inside a Web Component, letting you inject your own markup. It makes components flexible, like a card with customizable header and body sections. The footgun: content without a `slot` attribute goes to the default slot.
The HTML <template> Element: Inert, Reusable Markup
Think of `<template>` as a blueprint for HTML. It holds markup that's invisible and inactive until you need it, perfect for creating reusable chunks like list items that you can stamp out with JavaScript.
Custom Elements: Create Your Own HTML Tags
Think of Custom Elements as creating your own Lego bricks for the web, defining new HTML tags with custom logic. Use them to build reusable components like a `<product-card>`. Be wary of extending built-in elements, as Safari does not support this.
srcset and sizes: Responsive Images in HTML
Give the browser a menu of images with `srcset` and tell it how much screen space the image will take with `sizes`. The browser then picks the most efficient option for the user's device. The footgun is forgetting `sizes`, which makes the browser assume 100vw.
The <picture> Element: Art Direction for Images
The <picture> element provides art-direction for images, letting the browser pick the best source file. It's used to serve different images for various screen sizes, resolutions, or formats, improving performance and user experience.
Flexible Images: More Than Just `max-width`
Flexible images adapt to the device by providing different resolutions or crops. Use `srcset` for high-DPI screens and `<picture>` for art direction. The footgun is relying only on CSS `max-width`; this forces mobile users to download unnecessarily large…
The Viewport Meta Tag: Your First Responsive Step
The viewport meta tag tells mobile browsers not to fake a desktop screen. It sets the page width to the device's width, enabling responsive design. It's essential for any modern site. The footgun: disabling user zoom (`user-scalable=no`) harms accessibility.
Accessible Writing: Structure is Meaning
Accessible writing structures content for both humans and assistive tech. It applies to page titles, headings, and link text. The footgun is faking structure with visual styles instead of using semantic HTML, which leaves screen reader users lost.
HTML Header Tags: More Than Just Big Text
Header tags (<h1>-<h6>) are your page's skeleton, creating a navigable outline for users and search engines. Use a single <h1> for the main title, then nest <h2>, <h3>, etc., for sections.
Meta Description: Your Sales Pitch on Google
A meta description is the ~155-character sales pitch for your webpage in search results. It's your chance to convince a user to click your link over others. The footgun: Google may ignore it and show a different snippet if it better matches the query.
Get Html bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.