--- title: My HTML boilerplate in 2026 | daily.dev description: An updated, exhaustively annotated HTML boilerplate for 2026, walking line by line through every element and meta tag used to structure a basic document.... canonical: https://daily.dev/posts/my-html-boilerplate-in-2026-sba9xvade twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: My HTML boilerplate in 2026 | daily.dev og:description: An updated, exhaustively annotated HTML boilerplate for 2026, walking line by line through every element and meta tag used to structure a basic document.... og:url: https://daily.dev/posts/my-html-boilerplate-in-2026-sba9xvade og:image: https://api.daily.dev/og/posts/SbA9xVADE.png og:image:alt: My HTML boilerplate in 2026 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # My HTML boilerplate in 2026 **[Manuel Matuzović](https://daily.dev/sources/matuzo)** · 13 min read · 40 upvotes · 4 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Does Safari support SVG favicons and starting from which version? Safari supports SVG favicons starting with version 26.0. Before that, browsers relied on the traditional favicon.ico file. On iOS 18, once an SVG icon link is defined, the browser no longer falls back to favicon.ico if the SVG fails to load correctly, so both link elements are needed for broad compatibility. _developers weighing favicon compatibility across browser versions can track these platform quirks on daily.dev._ ### Does Safari 26 still support the theme-color meta tag? No, as of Safari version 26 the theme-color meta tag is no longer used the way it was from version 15 through 25. Instead, Safari now derives the browser UI color either from the page body's background color or from a color value on a position-fixed element pinned to the top of the page. _anyone tuning cross-browser UI theming can follow browser behavior changes like this on daily.dev._ ### How does the interactive-widget=resizes-content viewport meta option affect mobile keyboard behavior? Setting interactive-widget=resizes-content on the viewport meta tag makes both the visual and layout viewport resize when the on-screen keyboard appears, rather than just the visual viewport. This fixes the common issue where sticky or fixed elements pinned to the bottom of the screen disappear behind the keyboard, though it should be tested carefully since its effects on UX, performance, and accessibility aren't fully established. _teams debugging mobile keyboard layout issues can dig into viewport options like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@andradei** · 0 upvotes > This is one of those articles that are worth bookmarking. **@agustinbarrientos** · 0 upvotes > I'd keep charset and viewport literal **@friedrich** · 0 upvotes > Excellent checklist. > > I've met most of them and often they are generated by frameworks like Astro/Next.js but there are definitely some that were new to me ## Similar posts on daily.dev - [My HTML Boilerplate](https://daily.dev/posts/my-html-boilerplate-hwmlvdvzg) · Lobsters · 12 upvotes · 2 comments - [Issue \#757: What's new in HTML for 2026 — Frontend Focus](https://daily.dev/posts/issue-757-what-s-new-in-html-for-2026-frontend-focus-k8xkpqeew) · Frontend Focus · 5 upvotes · 0 comments - [Don’t Forget These Tags to Make HTML Work Like You Expect](https://daily.dev/posts/don-t-forget-these-tags-to-make-html-work-like-you-expect-nerfii7s6) · Hacker News · 3 upvotes · 0 comments - [New Things You Should Know About HTML Here in Mid 2026 – Master.dev Blog](https://daily.dev/posts/new-things-you-should-know-about-html-here-in-mid-2026-master-dev-blog-exp0rgmog) · Frontend Masters · 10 upvotes · 0 comments - [Antiquated HTML Snippets and Artefacts](https://daily.dev/posts/antiquated-html-snippets-and-artefacts-oaojgodsy) · Lobsters · 2 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility), [#seo](https://daily.dev/tags/seo) [View this post on daily.dev](https://daily.dev/posts/my-html-boilerplate-in-2026-sba9xvade) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"My HTML boilerplate in 2026","url":"https://daily.dev/posts/my-html-boilerplate-in-2026-sba9xvade","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/my-html-boilerplate-in-2026-sba9xvade"},"datePublished":"2026-08-17T09:47:49.526Z","dateModified":"2026-09-14T07:42:57.867Z","description":"An updated, exhaustively annotated HTML boilerplate for 2026, walking line by line through every element and meta tag used to structure a basic document....","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5ad25ef26b8f190e6820fbd97dd4f0d2?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/5ad25ef26b8f190e6820fbd97dd4f0d2?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Manuel Matuzović","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Manuel Matuzović","logo":"https://media.daily.dev/image/upload/s--EstFG5yE--/f_auto,q_auto/v1782139307/logos/matuzo","url":"https://daily.dev/sources/matuzo"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/my-html-boilerplate-in-2026-sba9xvade","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":40},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"webdev,html,accessibility,seo","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Manuel Matuzović","item":"https://daily.dev/sources/matuzo"},{"@type":"ListItem","position":3,"name":"My HTML boilerplate in 2026"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/my-html-boilerplate-in-2026-sba9xvade","comment":[{"@type":"Comment","text":"This is one of those articles that are worth bookmarking.","datePublished":"2026-08-31T17:07:47.552Z","url":"https://daily.dev/posts/SbA9xVADE#c-3d13G8LCn","author":{"@type":"Person","name":"Isaac de Andrade","url":"https://daily.dev/andradei","image":"https://avatars.githubusercontent.com/u/2653546?v=4"}},{"@type":"Comment","text":"I’d keep charset and viewport literal","datePublished":"2026-08-21T04:40:10.067Z","url":"https://daily.dev/posts/SbA9xVADE#c-bMXw8a64h","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}},{"@type":"Comment","text":"Excellent checklist.\nI’ve met most of them and often they are generated by frameworks like Astro/Next.js but there are definitely some that were new to me","datePublished":"2026-08-20T00:52:08.953Z","url":"https://daily.dev/posts/SbA9xVADE#c-Z3Fj25yOt","author":{"@type":"Person","name":"Friedrich WT","url":"https://daily.dev/friedrich","image":"https://avatars.githubusercontent.com/u/136119888?v=4"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/my-html-boilerplate-in-2026-sba9xvade#faq","mainEntity":[{"@type":"Question","name":"Does Safari support SVG favicons and starting from which version?","acceptedAnswer":{"@type":"Answer","text":"Safari supports SVG favicons starting with version 26.0. Before that, browsers relied on the traditional favicon.ico file. On iOS 18, once an SVG icon link is defined, the browser no longer falls back to favicon.ico if the SVG fails to load correctly, so both link elements are needed for broad compatibility. developers weighing favicon compatibility across browser versions can track these platform quirks on daily.dev."}},{"@type":"Question","name":"Does Safari 26 still support the theme-color meta tag?","acceptedAnswer":{"@type":"Answer","text":"No, as of Safari version 26 the theme-color meta tag is no longer used the way it was from version 15 through 25. Instead, Safari now derives the browser UI color either from the page body's background color or from a color value on a position-fixed element pinned to the top of the page. anyone tuning cross-browser UI theming can follow browser behavior changes like this on daily.dev."}},{"@type":"Question","name":"How does the interactive-widget=resizes-content viewport meta option affect mobile keyboard behavior?","acceptedAnswer":{"@type":"Answer","text":"Setting interactive-widget=resizes-content on the viewport meta tag makes both the visual and layout viewport resize when the on-screen keyboard appears, rather than just the visual viewport. This fixes the common issue where sticky or fixed elements pinned to the bottom of the screen disappear behind the keyboard, though it should be tested carefully since its effects on UX, performance, and accessibility aren't fully established. teams debugging mobile keyboard layout issues can dig into viewport options like this on daily.dev."}}]} ```