{"id":340403,"date":"2021-05-14T07:13:07","date_gmt":"2021-05-14T14:13:07","guid":{"rendered":"https:\/\/css-tricks.com\/?p=340403"},"modified":"2021-05-14T07:13:09","modified_gmt":"2021-05-14T14:13:09","slug":"html-boilerplates","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/html-boilerplates\/","title":{"rendered":"HTML Boilerplates"},"content":{"rendered":"\n

Manuel Matuzovi\u0107 goes line-by-line<\/a> 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<\/em> this kind of thing can be. Dang near every line! Not the DOCTYPE<\/code>, not the <title><\/code>, but nearly everything else. <\/p>\n\n\n\n\n\n\n\n

\n \n The HTML <\/summary>\n \n\n
<!DOCTYPE html>\n<html lang=\"en\" class=\"no-js\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width\">\n\n  <title>Unique page title - My Site<\/title>\n\n  <script type=\"module\">\n    document.documentElement.classList.remove('no-js');\n    document.documentElement.classList.add('js');\n  <\/script>\n\n  <link rel=\"stylesheet\" href=\"\/assets\/css\/styles.css\">\n  <link rel=\"stylesheet\" href=\"\/assets\/css\/print.css\" media=\"print\">\n\n  <meta name=\"description\" content=\"Page description\">\n  <meta property=\"og:title\" content=\"Unique page title - My Site\">\n  <meta property=\"og:description\" content=\"Page description\">\n  <meta property=\"og:image\" content=\"https:\/\/www.mywebsite.com\/image.jpg\">\n  <meta property=\"og:image:alt\" content=\"Image description\">\n  <meta property=\"og:locale\" content=\"en_GB\">\n  <meta property=\"og:type\" content=\"website\">\n  <meta name=\"twitter:card\" content=\"summary_large_image\">\n  <meta property=\"og:url\" content=\"https:\/\/www.mywebsite.com\/page\">\n  <link rel=\"canonical\" href=\"https:\/\/www.mywebsite.com\/page\">\n\n  <link rel=\"icon\" href=\"\/favicon.ico\">\n  <link rel=\"icon\" href=\"\/favicon.svg\" type=\"image\/svg+xml\">\n  <link rel=\"apple-touch-icon\" href=\"\/apple-touch-icon.png\">\n  <link rel=\"manifest\" href=\"\/my.webmanifest\">\n  <meta name=\"theme-color\" content=\"#FF00FF\">\n<\/head>\n\n<body>\n  <!-- Content -->\n  <script src=\"\/assets\/js\/xy-polyfill.js\" nomodule><\/script>\n  <script src=\"\/assets\/js\/script.js\" type=\"module\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n<\/details>\n\n\n
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\u2009\u2014\u2009it’s meant to be changed.<\/p>\n\n\n\n
There was a time when HTML5 Boilerplate was a huge project in this space. It has a whole GitHub Org<\/a>! The boilerplate has 50,000 stars<\/a>! Personally, I feel like the project lost its way when it started to have a src<\/code> and dist<\/code> 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<\/a> is also quite opinionated. It assumes Normalize<\/a> and Modernizr<\/a>, which are certainly not deprecated projects, but also not things I see developers reaching for much anymore. It even assumes Google Analytics usage!<\/p>\n\n\n\n
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><\/code> (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<\/a> project is pretty cool.<\/p>\n","protected":false},"excerpt":{"rendered":"
Manuel Matuzovi\u0107 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, […]<\/p>\n","protected":false},"author":3,"featured_media":340449,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1054,479],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-11-at-4.43.59-PM.png?fit=1834%2C1028&ssl=1","jetpack-related-posts":[{"id":305566,"url":"https:\/\/css-tricks.com\/emergency-website-kit\/","url_meta":{"origin":340403,"position":0},"title":"Emergency Website Kit","date":"March 27, 2020","format":false,"excerpt":"Here\u2019s an outstanding idea from Max B\u00f6ck. He\u2019s created a boilerplate project for building websites that fit within a single HTTP request. This is extremely important for websites that contain critical information for public safety. As Max writes: In cases of emergency, many organizations need a quick way to publish\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/toolbox-frameworks-scaled.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":155634,"url":"https:\/\/css-tricks.com\/modular-future-web-components\/","url_meta":{"origin":340403,"position":1},"title":"A Guide to Web Components","date":"November 11, 2013","format":false,"excerpt":"The following is a guest post by Rob Dodson (@rob_dodson). Rob and I were going back and forth in CodePen support getting Polymer (a web components polyfill, kinda) working on a demo of his. We did get it working, and things kind of evolved into this article. Take it away\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":316670,"url":"https:\/\/css-tricks.com\/eleventy-starter-with-tailwind-css-alpine-js\/","url_meta":{"origin":340403,"position":2},"title":"An Eleventy Starter with Tailwind CSS and Alpine.js","date":"July 10, 2020","format":false,"excerpt":"When I decided to try to base my current personal website on Eleventy, I didn't want to reinvent the wheel: I tested all the Eleventy starters built with Tailwind CSS that I could find in Starter Projects from the documentation. Many of the starters seemed to integrate Tailwind CSS in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/eleventy-tailwind-alpine.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338296,"url":"https:\/\/css-tricks.com\/creating-an-editable-textarea-that-supports-syntax-highlighted-code\/","url_meta":{"origin":340403,"position":3},"title":"Creating an Editable Textarea That Supports Syntax-Highlighted Code","date":"April 16, 2021","format":false,"excerpt":"When I was working on a project that needed an editor component for source code, I really wanted a way to have that editor highlight the syntax that is typed. There are projects like this, like CodeMirror, Ace, and Monaco, but they are all heavy-weight, full-featured editors, not just editable\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/complex-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":359055,"url":"https:\/\/css-tricks.com\/add-a-service-worker-to-your-site\/","url_meta":{"origin":340403,"position":4},"title":"Add a Service Worker to Your Site","date":"December 28, 2021","format":false,"excerpt":"One of the best things you can do for your website in 2022 is add a service worker, if you don't have one in place already. Service workers give your website super powers. Today, I want to show you some of the amazing things that they can do, and give\u2026","rel":"","context":"In "2021 End-of-Year Thoughts"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/cog-pattern.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363079,"url":"https:\/\/css-tricks.com\/nextjs-chrome-extension-starter\/","url_meta":{"origin":340403,"position":5},"title":"Helpful Tips for Starting a Next.js Chrome Extension","date":"February 10, 2022","format":false,"excerpt":"I recently rewrote one of my projects \u2014 Minimal Theme for Twitter \u2014 as a Next.js Chrome extension because I wanted to use React for the pop-up. Using React would allow me to clearly separate my extension\u2019s pop-up component and its application logic from its content scripts, which are the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/s_EC3F93C336EF3FAA64B8384642A6F175FADA3A235447EC3A34E69E391074F1AA_1642397608126_CleanShot2022-01-17at00.32.342x.png?fit=1200%2C796&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-11-at-4.43.59-PM.png?fit=1024%2C574&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340403"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=340403"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340403\/revisions"}],"predecessor-version":[{"id":340588,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/340403\/revisions\/340588"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/340449"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=340403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=340403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=340403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}