An updated, exhaustively annotated HTML boilerplate for 2026, walking line by line through every element and meta tag used to structure a basic document. Covers required essentials like doctype, charset, viewport, and title, plus optional additions such as text-scaling meta tags, SVG/ICO favicon fallbacks, Open Graph and fediverse attribution tags, Markdown alternate links, RSS, preload hints, and notch/viewport-resize handling for mobile keyboards. Includes practical browser-testing notes (Safari, iOS, Chromium) and links to further reading on each topic.

13m read timeFrom matuzo.at
Post cover image
Table of contents
My boilerplateLine by line explanationOther noteworthy elements

Questions this post answers

Do I still need favicon.ico if I have an SVG favicon for Safari?

Yes, if you want to support older browsers alongside newer ones. Safari only supports SVG favicons starting with version 26.0, and based on tests with iOS 18, once an SVG icon link is defined, the browser stops falling back to favicon.ico and shows no icon at all. Defining both link elements ensures older Safari versions still get the ICO file while newer browsers use the SVG. daily.dev helps developers keep favicon and browser compatibility notes handy while building sites.

Does the theme-color meta tag still work in Safari 26?

No, Safari changed its behavior starting with version 26. From Safari 15 through 25 it respected the theme-color meta tag, but as of version 26 it instead uses the page body's background color or the color from a position-fixed element at the very top of the page to customize the surrounding UI, ignoring the meta tag. Track browser-specific meta tag quirks like this on daily.dev before they break your mobile UI.

How do I control what happens when the mobile keyboard opens on a fixed-position element?

Use the viewport meta tag with interactive-widget=resizes-content, which makes both the visual and layout viewport resize when the on-screen keyboard appears. This fixes the common problem where sticky or fixed elements at the bottom of the screen disappear behind the keyboard, though effects on UX, performance, and accessibility should be tested per use case. daily.dev keeps developers current on emerging viewport and mobile layout techniques like this.

61.2K Impressions2 Comments