HTML
Browse 41 articles in this topic. View all topics.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.
- When CSS Layout Order Stops Matching the HTML
Keep Grid and Flexbox layouts aligned with the HTML order so keyboard focus and screen reader reading do not jump around the page.
- Why Images Need width and height Attributes
Width and height attributes tell the browser an image's aspect ratio early enough to reserve space and prevent layout shifts.
- When to Use fetchpriority on Images
Give a genuinely important image a priority hint without marking every request urgent or combining contradictory loading instructions.
- What You Get With a Real HTML Button
A native HTML button includes keyboard, focus, form, disabled, and accessibility behaviour that a clickable div must rebuild.
- When to Use a Link or a Button
Choose links for navigation and buttons for actions, then style either element to match the interface.
- The Difference Between HTML meter and progress
Use the HTML meter element for a value within a known range and progress for work moving towards completion.
- Showing Calculation Results With HTML output
Use the HTML output element for totals, slider values, estimates, and other results produced by form controls.
- Input Suggestions With HTML datalist
Add native suggestions to an HTML input with datalist while still allowing values outside the provided list.
- HTML autocomplete Values Worth Using
Give browsers useful autocomplete tokens for identity, contact, address, password, and one-time-code fields.
- What the HTML search Element Is For
Use the HTML search element to identify search and filtering controls without changing how the form submits or looks.
- Show Form Errors After Interaction With :user-invalid
Use :user-invalid and :user-valid to style native HTML validation states without marking untouched fields as errors.
- Image Alt Text: When to Use It and When Not To
Write useful image alt text by deciding what an image contributes, including when the right alt value is empty.
- Expandable sections with HTML details and summary
Build simple accordions and disclosure sections with the native HTML details and summary elements.
- Building a modal with HTML dialog
Build modal windows from the native HTML dialog element, including backdrops, forms, Escape handling, and practical examples.
- HTML Popover API: Popovers Without JavaScript
Create menus, help boxes, and other lightweight overlays with the native HTML Popover API and very little code.
- Native HTML and CSS Features That Replaced JavaScript
Replace common JavaScript components with native HTML and CSS, from disclosures and dialogs to container queries and scroll effects.
- How to Hide Content Accessibly
Choose between display none, visibility hidden, opacity, aria-hidden, hidden, and visually hidden text based on behaviour.
- Why You Shouldn't Lazy-Load Every Image
Lazy loading helps below the fold, but adding loading=lazy to every image can delay important content and hurt Largest Contentful Paint.
- When to Use preload, prefetch, and preconnect
Choose between preload, prefetch, and preconnect without turning resource hints into extra work for the browser.