Manuel Matuzović goes line-by-line through a boilerplate HTML document. I like it. It’s a good reference and has a lot of the same type of stuff I tend to put in the main HTML template. It makes me think about how opinionated this kind of thing can be. Dang near every line! Not the DOCTYPE, not the <title>, but nearly everything else.
The HTML
<!DOCTYPE html>
<html lang="en" class="no-js">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Unique page title - My Site</title> <script type="module"> document.documentElement.classList.remove('no-js'); document.documentElement.classList.add('js'); </script> <link rel="stylesheet" href="/assets/css/styles.css"> <link rel="stylesheet" href="/assets/css/print.css" media="print"> <meta name="description" content="Page description"> <meta property="og:title" content="Unique page title - My Site"> <meta property="og:description" content="Page description"> <meta property="og:image" content="https://www.mywebsite.com/image.jpg"> <meta property="og:image:alt" content="Image description"> <meta property="og:locale" content="en_GB"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:url" content="https://www.mywebsite.com/page"> <link rel="canonical" href="https://www.mywebsite.com/page"> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/my.webmanifest"> <meta name="theme-color" content="#FF00FF">
</head> <body> <!-- Content --> <script src="/assets/js/xy-polyfill.js" nomodule></script> <script src="/assets/js/script.js" type="module"></script>
</body>
</html>Maybe my site doesn’t use any JavaScript or have no-JavaScript fallbacks so I don’t need any of the class name dancing. Maybe my site doesn’t need print styles, but I do need link prefetching. Maybe I don’t care about social images, but I do want critical CSS in the head. It’s a boilerplate, not a prescription — it’s meant to be changed.
There was a time when HTML5 Boilerplate was a huge project in this space. It has a whole GitHub Org! The boilerplate has 50,000 stars! Personally, I feel like the project lost its way when it started to have a src and dist folder and a 200-line Gulp build process, ya know? It worked best as a reference for what stuff any given web project might need, but now I feel like it is intimidating in a way it doesn’t need to be. The boilerplate index file is also quite opinionated. It assumes Normalize and Modernizr, which are certainly not deprecated projects, but also not things I see developers reaching for much anymore. It even assumes Google Analytics usage!
I have no problem with people having and sharing boilerplate documents, but considering how unavoidable being opinionated it is with them, I also like the reference guide approach. Just show me every possible thing that can go in the <head> (a lot of the value of these boilerplates), and I’ll pick and choose what I need (or may have forgotten). To that end, Josh Buchea’s HEAD project is pretty cool.
The post HTML Boilerplates appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.