Best of HTML — January 2026

  1. 1
    Article
    Avatar of yhf9cpdgtqetokv6d8qhmJohn Liter·18w

    Why W3Schools Became the Foundation of My Coding Journey and Why I’m Passing It On

    W3Schools served as a foundational learning platform that emphasized understanding over memorization through simple explanations, immediate feedback loops, and hands-on experimentation. The platform has evolved to include structured learning paths, in-browser editors, and progress tracking while maintaining its focus on teaching fundamentals. In an era of AI-generated code, understanding how to read code and reason through problems remains crucial, making platforms that teach core concepts more relevant than ever.

  2. 2
    Article
    Avatar of chromeChrome Developers·19w

    Introducing the <geolocation> HTML element

    Chrome 144 introduces the `<geolocation>` HTML element, a declarative alternative to the JavaScript Geolocation API. This element requires user interaction (clicking a button) to request location data, reducing accidental blocks and browser interventions. It evolved from a generic `<permission>` element after origin trial feedback showed improved user trust and success rates. The element simplifies implementation by handling permission states automatically, supports attributes like `autolocate` and `watch`, and includes styling constraints to prevent deceptive patterns. A polyfill and progressive enhancement strategies ensure backward compatibility with browsers that don't support the new element.

  3. 3
    Article
    Avatar of hnHacker News·20w

    A Website To End All Websites

    The modern internet has devolved from a creative, educational space into an attention-extracting machine dominated by algorithmic feeds and corporate platforms. Drawing on Ivan Illich's concept of convivial tools, the piece argues that personal websites—hand-coded, independently owned, and syndicated through protocols like RSS and Webmentions—represent the antidote to platform monopolies. By building small, reducing friction to publishing, and leveraging IndieWeb standards, developers can reclaim autonomy, creativity, and meaningful connection online.

  4. 4
    Article
    Avatar of hnHacker News·20w

    I charged $18,000 for a Static HTML Page

    A contractor shares their experience being hired for what should have been a simple one-day HTML page project. Due to organizational dysfunction, delayed responses, missing assets, and endless email chains, the project stretched from an estimated 20 hours to 7 weeks of on-site work. Despite feeling like an impostor for charging so much for minimal actual coding, the contractor invoiced for their time. The company not only accepted the $18,000 invoice but recalculated it to $21,000, acknowledging the contractor had been available and ready to work throughout the extended timeline.

  5. 5
    Article
    Avatar of css_tricksCSS-Tricks·18w

    I Learned The First Rule of ARIA the Hard Way

    A developer shares their experience of breaking a button's accessibility by adding an ARIA role attribute. The button worked perfectly as native HTML, but adding role="link" caused keyboard navigation and screen reader issues. The fix was simple: remove the ARIA attribute and use CSS classes for styling instead. The key lesson is that semantic HTML already provides robust accessibility features, and ARIA should only be used to communicate missing state information, not to redefine element roles. When you override native semantics with ARIA, you take on responsibility for keyboard interactions, focus management, and cross-platform behavior.

  6. 6
    Article
    Avatar of lobstersLobsters·18w

    The Incredible Overcomplexity of the Shadcn Radio Button

    Modern UI libraries like Shadcn and Radix add significant complexity to simple HTML radio buttons, requiring multiple dependencies, hundreds of lines of React code, and several kilobytes of JavaScript. These libraries rebuild radio buttons from scratch using buttons with ARIA attributes instead of native HTML inputs, despite the fact that radio buttons can be easily styled with basic CSS techniques like `appearance: none`, pseudo-elements, and pseudo-classes. This overcomplexity violates ARIA best practices, increases cognitive load, and degrades performance for a feature browsers have supported natively for 30 years.

  7. 7
    Article
    Avatar of css_tricksCSS-Tricks·20w

    Future CSS: :drag (and Maybe ::dragged-image?)

    A proposed CSS pseudo-class `:drag` would enable styling elements during drag interactions without JavaScript. Currently, developers must use the HTML Drag and Drop API with JavaScript event listeners and class toggling to achieve this effect. The proposal would simplify the process by allowing direct CSS styling when elements are being dragged. The author also suggests a `::drag-image` pseudo-element for customizing the preview image shown during dragging, which currently requires JavaScript's `dataTransfer.setDragImage()` method. Both proposals aim to reduce JavaScript dependencies and improve performance for common drag-and-drop UI patterns.

  8. 8
    Article
    Avatar of hnHacker News·18w

    CSS Web Components for marketing sites

    CSS Web Components are a JavaScript-free approach to building marketing site design systems using custom HTML elements styled entirely with CSS. Unlike traditional web components that require Shadow DOM and JavaScript for registration, this pattern wraps standard HTML in custom element tags and uses CSS attribute selectors to implement component variants and functionality. The approach enables progressive enhancement, minimal dependencies, full SSR support, and leverages modern CSS features like cascade layers, container queries, :has(), and CSS variables for theming and conditional styling.

  9. 9
    Article
    Avatar of simplethreadSimple Thread·20w

    Building Better Buttons

    Buttons require careful consideration for accessibility. Use semantic HTML `<button>` elements instead of `<div>` or links to ensure proper keyboard navigation and screen reader support. Add `aria-label` or visually-hidden text for icon-only buttons, use `aria-pressed` to convey toggle states, and choose between `disabled` and `aria-disabled` attributes based on whether users need to know the button exists. Proper button implementation ensures keyboard users and screen reader users can effectively interact with web applications.

  10. 10
    Article
    Avatar of hnHacker News·19w

    Text-based web browsers

    Text-based browsers like ELinks, Lynx, and w3m struggle with modern HTML features. While they handle basic HTML well, recent additions like disclosure widgets, dialogs, popovers, and the inert attribute are either ignored or improperly rendered. The most problematic issue is the complete lack of support for the hidden attribute, causing hidden content to display visibly. This creates challenges for progressive enhancement techniques that rely on hiding content in HTML before revealing it with CSS or JavaScript. The gap between text-based browsers and modern web standards continues to widen.

  11. 11
    Article
    Avatar of hnHacker News·19w

    You are not required to close your <p>, <li>, <img>, or <br> tags in HTML

    HTML does not require closing tags for certain elements like `<p>`, `<li>`, `<img>`, and `<br>`. This is a common misconception stemming from the XHTML era. In HTML, many elements have optional end tags, and void elements (like `img` and `br`) have no end tags at all. The self-closing `/>`syntax is valid but optional in HTML5, included only for XHTML migration compatibility. While XHTML requires strict tag closure due to its XML basis, HTML has always allowed optional end tags for specific elements. Best practice is consistency: either always close tags explicitly for clarity and team collaboration, or omit optional closures for brevity when you understand the implications for whitespace and layout.

  12. 12
    Article
    Avatar of atomicobjectAtomic Spin·18w

    Why I Use HTML for Planning and Spec-Driven Development

    Using HTML for planning documents and specifications offers rich presentation capabilities without extra tooling. The format supports color coding, visual hierarchy, embedded links, and inline UI prototypes that make specs more scannable and actionable. A typical workflow includes defining scope and constraints in a spec section, creating stepwise plans with checkboxes, and maintaining status areas. While HTML requires more authoring effort and produces noisier diffs, the clarity during execution and ability to serve rendered documents through a browser makes it worthwhile for spec-driven development workflows.

  13. 13
    Article
    Avatar of css_tricksCSS-Tricks·17w

    There is No Need to Trap Focus on a Dialog Element

    The traditional accessibility advice to trap focus within modal dialogs is now outdated when using the native HTML `<dialog>` element with the `showModal` method. According to discussions from accessibility experts like Scott O'Hara and Léonie Watson, and conclusions from the W3C's Accessible Platform Architectures Working Group, allowing users to tab out of a dialog to browser chrome (like the address bar) provides valuable flexibility. This enables keyboard users to open new tabs, change settings, or escape kiosk situations naturally. The old focus-trapping guidance was written before the `<dialog>` element and `inert` attribute were widely supported, and applied primarily to custom scripted modals.

  14. 14
    Article
    Avatar of bennadelBen Bandel·19w

    Opening The Dialog Element As A Fly-out Sidebar

    The native HTML dialog element can be styled as a fly-out sidebar by overriding browser user-agent styles. Key CSS properties like inset, max-height, height, and padding need to be explicitly reset to prevent the default centered positioning. Once these defaults are unset, the dialog can be positioned as a sidebar with custom styling and CSS keyframe animations for smooth entry transitions.

  15. 15
    Article
    Avatar of ffocusFrontend Focus·20w

    Frontend Focus Issue 723: January 7, 2026

    CSS Grid Lanes (display: grid-lanes) has been agreed upon as the approach for Masonry layouts and is now available for testing in Safari Technology Preview. The State of HTML 2025 survey results show developers favor practical, functional features over experimental ones. New CSS scroll-state() query enables directional styling based on scroll behavior. Simon Willison shares patterns for building HTML tools without frameworks using single-file HTML, JavaScript, and CSS. Color.js v0.6.0 released with continued progress toward 1.0. Safe-npm tool helps protect against supply chain attacks by only installing packages available for a specified time period.

See all HTML archives