My HTML boilerplate in 2026

2 months ago by codeinabox to c/webdev

Every element I use for the basic structure of a HTML document, with explanations why.
Kissaki 5 points 2 months ago

Please add / You really should add <meta name="color-scheme" content="light dark" />, ref

As an aside; my dark reader dark inject breaks the website layout on that website. I've never seen that on any other website.

path: 0 25381942, hotness: undefined, score: 5, children: 4
DarkSirrush 3 points 2 months ago

As someone less experienced but currently learning HTML, if you are trying to do the bare minimum of JavaScript, is there a point in having it in the HTML vs the CSS?

path: 0 25381942 25387578, hotness: undefined, score: 3, children: 3
Thinker 4 points 2 months ago

It's likely a small difference, but the main advantage of having it in the HTML is that it's immediately available, so you don't have to deal with the flash of unstyled content being in the wrong color scheme.

Source: https://css-tricks.com/...

path: 0 25381942 25387578 25391330, hotness: undefined, score: 4, children: 1
DarkSirrush 2 points 2 months ago

Thats definitely a better argument than most of the ones I read, which were always about overly complicated JavaScript setups for switching a million variables for light-dark support, instead of just using the CSS stuff.

Literally the only thing I can understand needing Javascript for is a persistent bit on the toggle so it doesn't constantly change.

path: 0 25381942 25387578 25391330 25394351, hotness: undefined, score: 2, children: 0
Kissaki 1 point 2 months ago

The meta tag makes your browser default to dark for a user's dark preference. That means you don't need additional CSS at all for a baseline. It also means if you forget or miss a dark or light alternative style for some element, the browser defaults already cover them.

Thinker mentioned the separate CSS loading separately. Which can lead to relayouts, in the worst cases flashing like they mentioned, but typically just increased loading time until first render, and less robustness against connection issues (html loads but css doesn't).

path: 0 25381942 25387578 25457774, hotness: undefined, score: 1, children: 0
webdev
webdev

@programming.dev

login for more options
5884
902
336

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

  • Follow the programming.dev site rules
  • Keep content related to web development
  • If what you're posting relates to one of the related communities, crosspost it into there to help them grow
  • If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

go to feed...