My HTML boilerplate in 2026 - Manuel Matuzović
-->
Every element I use for the basic structure of a HTML document, with explanations why.
Five years ago, I shared the HTML boilerplate I use for most of my projects. Since then, a lot has happened in HTML. It's time to give it an update.
My boilerplate
This is the final document. Scroll down for details.
Unique page title - My Site
document.documentElement.classList.replace('no-js', 'js');
[Launch generator](https://boilerplate.htmhell.dev)
--><br>Line by line explanation
Doctype required
Since HTML is a living standard, we no longer need different doctypes, but we still have to define one for compatibility.
Natural language required
The lang attribute is one of the most important attributes in HTML, because it’s powerful and responsible for many things. You can read more about it in On Use of the Lang Attribute and The lang attribute: browsers telling lies, telling sweet little lies. Applied to the html element, it defines page's natural language. It contains a single “language tag” in the format defined in Tags for Identifying Languages (BCP47), for example, en for English, de for German, or fr for French.
lang Language tag syntax MDN
Selector for no JavaScript environments optional
I use the no-js class in case I want to apply styling to specific components in browsers that don’t support JavaScript or in browsers where the user has disabled JavaScript. This class will be removed in browsers that support and execute JavaScript. Even if you don't believe that websites should work without JavaScript in 2026, this class can still be useful for optimizing the rendering of web components before they're defined.
Character encoding required
This attribute declares the document’s character encoding. Leaving it off might cause specific characters to display incorrectly in some browsers.
It must come before the element to avoid faulty characters in the page title.
Viewport essential
The viewport meta tag allows us to adjust the viewport width, which is necessary for responsive web design. width=device-width sets the viewport width to the device's width. (That's a simplified explanation. For details, see the MDN page for this meta tag.)
Setting initial-scale=1, which controls the zoom level when the page is first loaded, shouldn't be necessary anymore. We only needed it for older versions of iOS and Android. The thing is, though, people keep telling me they think there are still edge cases where it's needed, but they don't remember which ones. Anyway, I don't think it's necessary, but if you want to play it safe, it doesn't hurt to add it.
The viewport meta tag should come as early as possible in the document to ensure proper document rendering.
Text scaling optional
By default, mobile browsers don't respect the text size set in the operating system. This new meta tag changes that.
Don't just copy and paste this line. It might break your layouts. You have to test whether the content still looks okay when you increase the text size on your mobile operating system.
Try text scaling support in Chrome Canary - Josh Tumath
A new meta tag for respecting text scaling on mobile
The page title required
Unique page title - My Site<br>The unique title of the page. It’s displayed in many places, for example, on the browser tab, in search engine results, when you save a page as a bookmark, etc.
Provide informative, unique page titles
Accessible page titles in a Single Page App
General render-blocking JS optional
Render-blocking JavaScript for the site. It comes before synchronous CSS because CSS blocks loading of the JavaScript. Put JavaScript without async, defer, or type="module" only in the head if you need the JavaScript parsed and ready before the rest of the page loads.
JavaScript support optional
document.documentElement.classList.replace('no-js', 'js');
As mentioned earlier, I use this technique to create a dedicated class for the page state when JavaScript is disabled or unsupported. This solution is more reliable than the scripting meta tag and can be used alongside .
General CSS optional
Render-blocking CSS for the site.
Print CSS optional
People still print web pages, and I consider serving a print style sheet good UX. A good print stylesheet also saves paper and ink.
I totally forgot about print style sheets
General non-render-blocking JS optional
type=module implicitly defers the execution of the script after the document has been parsed, but before firing DOMContentLoaded event. For good performace try to default to this instead of adding render-blocking scripts.
Favicon essential
A 32×32px favicon for legacy browsers (Safari supports SVG favicons starting with 26.0). The favicon.ico should be located at the root of your website. Usually that's enough for browsers to pick it up automatically. You don't need the link element, but based on my tests with iOS 18, as soon as you define an SVG icon, the browser no longer falls...