HTML Tutorials

loading=lazy looks foolproof — one attribute, defer offscreen images. But it produces no error when it fails. It silently delays your LCP if applied to the hero, does nothing on CSS backgrounds, causes layout shift without dimensions, hides images from Googlebot when paired with data-src libraries, and gets overridden silently by preload directives. Six silent failures plus WordPress auto-lazy, framework auto-lazy defaults, content-visibility, fetchpriority=low, NoScript fallback, AdSense iframes, and the picture+srcset+lazy combined pattern.

The complete 2026 responsive images guide — AVIF vs WebP file sizes, where JPEG XL stands now (Chrome 145 flag + Safari 17 default + Firefox 152 pref), the picture element with srcset and sizes done right, the 100vw sizes mistake that doubles your downloads, fetchpriority for LCP with decoding=async, placeholder strategies (BlurHash vs ThumbHash), CSS image-set for backgrounds, and the image CDN auto-format pattern that skips picture entirely.

Most drag-drop tutorials stop before the dragleave flickering bug that breaks every drop zone with child elements. Many still say Fetch can't show upload progress — false since Chrome 105+ (ReadableStream + duplex: 'half'). This guide covers the flicker counter fix, the modern Fetch + XHR upload progress comparison, folder uploads with webkitdirectory, image preview cleanup, magic byte detection, paste-from-clipboard, WCAG 2.5.7 dragging movements, drag-to-reorder, and the input.value reset gotcha.

Every contenteditable tutorial shows bold/italic buttons and stops before the #1 bug: clicking the toolbar destroys the editor selection and formatting applies to nothing. This 2026 guide covers the fix, the modern beforeinput + inputType replacement for execCommand, the brand-new EditContext API (Chrome 121+), CJK composition events, XSS-safe paste sanitization with DOMPurify and the native Sanitizer API, iOS autocorrect destroying inline formatting, image paste handling, caret restoration with TreeWalker, and the complete decision framework for when to ditch contenteditable for TipTap/ProseMirror.

This is the complete HTML input types list with mobile keyboard hints, the pattern regex cookbook, enterkeyhint reference, autocomplete one-time-code for iOS, capture=environment for the rear camera, valueAsNumber/valueAsDate typed access, the datetime-local timezone offset trap, and linked date pickers. Most guides are reference lists — this one explains the decisions.

Over 50% of WCAG failures are form-related. This 2026 guide covers what others miss: the fieldset legend verbosity problem, aria-describedby with multiple IDs, aria-errormessage vs aria-describedby (with real 2026 SR-support data), the 5-step submit error pattern with validation timing, WCAG 2.2 form criteria (Redundant Entry, Accessible Authentication, Target Size), Label in Name + Voice Control, autocomplete + inputmode + enterkeyhint reference, forced-colors mode, role=status for success, when NOT to build a custom select, and a correct accessible password toggle.

Most focus management tutorials still teach a 50-line JavaScript focus trap that the HTML inert attribute replaces in one line. They show skip link patterns with Chrome's bug still in place. They never explain when you still need aria-hidden alongside inert. This is the 2026 guide that covers tabindex 0 vs -1, focus-visible vs focus, the WCAG 2.2 numeric focus indicator rules, aria-hidden vs inert, nested modals, roving tabindex vs aria-activedescendant, enterkeyhint for mobile keyboards, and SPA route focus management.

Every tutorial explains what semantic HTML is. Almost none explain that <address> wrapping a postal address is wrong, that <cite> must not contain author names, that HTML5's heading outline algorithm was never implemented by a single browser, or how the First Rule of ARIA quietly justifies the entire reason you should be reading this. This is the guide that covers what others miss — including <em> vs <i>, the <details> exclusive-accordion pattern, the SPA multi-<main> trick, <kbd>/<samp>/<var>, <progress> vs <meter>, and <lang> on subtrees.

79.4% of websites use ARIA — and those sites have 2× more accessibility errors than sites without it. ARIA is the most powerful accessibility tool in HTML and the most dangerous. This guide shows the patterns that go catastrophically wrong, the role=menu trap, the aria-live timing pitfall, the aria-hidden + focus silent-screen-reader footgun, role=presentation cascading, mobile screen reader divergence, and the DevTools tree-debug workflow nobody documents.

Most datalist tutorials show three lines of HTML and stop. Nobody explains how to detect when a user actually picked from the list, how to show a friendly label while submitting a hidden ID, or which iOS Safari versions silently break the whole feature. This is that tutorial.

Every tutorial shows you required and pattern then stops. Nobody explains why :invalid turns inputs red before the user touches them, how to fix it with :user-invalid, how autofill silently breaks validation, or how to validate all 11 ValidityState conditions. This is that tutorial.

Most developers use details for a one-off toggle and move on. But the native details element has exclusive accordion behavior built into HTML, smooth animation via a pure CSS grid trick, and direct SEO impact through FAQ rich results. Here's everything it can do — zero JavaScript required.