Tagged “html”
-
Declarative Focus Trapping and Background Locking with the HTML inert Attribute
Removing background DOM trees from tab order pointer events and the accessibility tree simultaneously when a modal drawer opens using inert. -
Accessible Inline Form Error Messaging with aria-invalid and aria-errormessage
Connecting form validation feedback to assistive technologies using Constraint Validation API events aria-invalid and live error summaries. -
Refining Editorial Link Typography with CSS text-underline-offset
Replacing bottom-border link hacks with native CSS text-underline-offset text-decoration-thickness and text-decoration-skip-ink. -
Publishing Machine-Readable Dates and Durations with the HTML time Element
Using the semantic HTML time element and ISO 8601 datetime attributes to improve search engine indexing and assistive technology clarity. -
Implementing the WAI-ARIA Tabs Pattern with Roving Tabindex
Building a keyboard-accessible tablist tab and tabpanel component with Left and Right arrow navigation and semantic fallback markup. -
Theming Native Checkboxes and Radio Inputs with CSS accent-color
Applying brand colors to native checkbox radio range and progress elements with a single line of CSS while preserving contrast and accessibility. -
Optimizing Critical Network Paths with HTML Resource Hints
Eliminating DNS lookup TLS handshake and font discovery delays using link rel preconnect preload and prefetch in the document head. -
Building Accessible Tooltips with aria-describedby and Keyboard Triggers
Designing supplementary tooltip popovers that work seamlessly across hover focus and Escape key dismissal with role tooltip. -
Structuring Key-Value Metadata with HTML Description Lists
Using semantic dl dt and dd elements paired with CSS Grid to present product specifications glossaries and summary cards. -
Designing Skip Navigation Links and Page Landmarks for Keyboard Users
Combining visually hidden focus-triggered skip links with semantic header main and nav landmarks for rapid keyboard navigation. -
Reusable Markup Fragments with the Native HTML template Element
Declaring inert HTML fragments in markup and instantiating them efficiently at runtime with content cloneNode and DocumentFragment. -
Writing Accessible Inline SVG Icons with Semantic ARIA Attributes
Distinguishing decorative and interactive inline SVG graphics using aria-hidden focusable title elements and accessible button labels. -
Accessible Modal Dialogs with the Native HTML Dialog Element
Building accessible modal overlays focus management and backdrop styling with semantic HTML dialog markup and minimal JavaScript. -
CSS Logical Properties for Multi-Directional Layouts
Replacing physical top right bottom and left declarations with flow-relative inline and block CSS Logical Properties for effortless RTL and LTR support. -
Optimizing HTML and CSS for Core Web Vitals LCP FID and CLS
Google recently introduced Core Web Vitals as a unified set of real-world user experience metrics focusing on loading speed, interactivity, and visual stability. Here is how clean HTML and CSS directly improve Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. -
Grouping Media and Code Snippets Semantically with Figure and Figcaption
Many developers only reach for the HTML figure element when embedding photographs, yet the specification defines it for any self-contained unit of content referenced from the main prose including code listings, SVG diagrams, and attributed quotations. -
Zero JavaScript Image Deferral with the Native HTML loading Attribute
For years deferring offscreen images required either scroll listeners or IntersectionObserver scripts coupled with data-src attributes. With the native HTML loading attribute now shipping in Chromium and Firefox, browsers can defer below-the-fold images and iframes automatically without a single line of JavaScript. -
Accessible Breadcrumb Navigation with Semantic HTML and aria-current
Breadcrumb trails orient users within deep site hierarchies, but generic div containers and hard-coded slash characters create noisy output for screen readers. Wrapping an ordered list in a labeled nav landmark with aria-current delivers clean, accessible navigation. -
Announcing Dynamic UI Changes with ARIA Live Regions
In single-page applications and AJAX forms, updating DOM text without a full page reload is invisible to screen-reader users unless the container is marked as an ARIA live region. Using aria-live and role status bridges the gap cleanly. -
Structuring Accessible Data Tables with Caption Scope and Thead
While HTML tables should never be used for page layout, they remain the only semantically correct way to present tabular data. Adding caption, thead, tbody, and explicit th scope attributes transforms a visual grid into an accessible data table. -
Zero JavaScript Accordions with HTML5 Details and Summary
Expandable FAQ sections and disclosure widgets are among the most over-engineered components on the web. Native HTML5 details and summary elements provide keyboard support, aria-expanded states, and toggle behavior without a single line of JavaScript. -
Responsive Images Done Right with Picture and Srcset
Serving a single large JPEG image to both desktop monitors and 3G mobile devices wastes bandwidth and slows down First Contentful Paint. Native HTML5 picture, srcset, and sizes attributes let the browser pick the optimal image format and resolution automatically. -
Clean CSS Architecture with BEM Naming Conventions
As stylesheets grow across large frontend projects, deeply nested selectors and specificity wars make CSS fragile to change. Adopting the Block Element Modifier methodology keeps selector specificity flat and makes component structure self-documenting. -
Building Accessible HTML Forms with Native Validation
Forms are the primary interaction boundary on the web, yet they are frequently broken by missing labels and fragile validation scripts. Using explicit label associations, aria-describedby hints, and HTML5 constraint attributes gives you resilient forms out of the box. -
Writing Semantic HTML5 for Accessible Document Structure
Clean markup starts with choosing HTML elements for their meaning rather than their default visual appearance. Replacing generic div containers with semantic HTML5 landmarks makes your pages immediately more accessible to screen readers and search engines.
See all tags.