Issue 135  January 16th 2026

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

There are a number of reasons it is good practice to do so (which I’ll get to later in this article), but it is not wrong or inherently bad practice not to do so with elements with optional end tags or elements without end tags (believe it or not, these exist — they’re called void elements). Browsers do not treat missing optional end tags as errors that need to be recovered from.

It would seem that many authors who don’t know better have mistakenly believed that these rules carry over to HTML5 as they moved away from XHTML, and the misinformation has been spreading ever since.

HTML-only conditional lazy loading (via preload + media)

The accepted practice is to not add lazy-loading to images above the fold, especially the LCP image, since doing so can delay their loading until the browser has determined they are definitely in the viewport. One problem though is that "above the fold" depends on screen size: an image can be above the fold on desktop and below it on mobile. With native lazy loading and static HTML (e.g., without device detection on the server side or JavaScript), you normally have to pick one behavior and get it wrong for part of your users.

But there's a small workaround that seems to work. Browsers won't delay the loading of an image if it's already been fetched. You can take advantage of that by conditionally preloading the image using a media query, then marking the image as lazy later. I tested it using the HTTP link header, but may also work fine with a <link rel="preload"> tag.

A polyfill for the HTML switch element

In Safari 17.4, the WebKit team at Apple shipped a native HTML switch element. The core idea is that an <input type="checkbox"> can progressively be enhanced to become a switch by adding the switch attribute. Browsers that don't support the switch attribute will just silently ignore it and render the switch as a regular checkbox. At the time of this writing, Safari version 17.4 and later is the only browser to support the new switch element natively. This blog post introduces a polyfill that brings almost native support to browsers that lack it.

You can get the polyfill from npm and find the code on GitHub. The README has detailed usage instructions, including important tips on how to avoid FOUC (Flash of Unstyled Content). You can also play with a demo of the polyfill that shows off more features of the polyfill, like all the various writing modes, and the different ways to style the switch.

Optional HTML: Everything You Need to Know

What HTML code is optional? This article gives an overview over everything optional other than extraneous whitespace and anything standard minifiers already handle. There’s much to omit and omitting is good for us.

SVG Filters are just amazing!

SVG filters are a powerful way to apply graphical effects to SVG elements. They can also be applied to HTML elements using the filter CSS property. Without SVG filters, achieving complex visual effects like the water ripple effect would require using images or complex JavaScript animations.

Introducing the <geolocation> HTML element

From Chrome 144 you can use the new <geolocation> HTML element. This element represents a major shift in how sites request user location data—moving away from script-triggered permission prompts toward a declarative, user-action-oriented experience. It reduces the boilerplate code required to handle permission states and errors, and provides a stronger signal of user intent, which helps avoid browser interventions (like quiet blocks).