My HTML boilerplate

This is the HTML template i use to make my life just a little easier in setting up new pages. I thought i’d put it up here, for both my convenience and yours.

<!DOCTYPE html>
<html lang="en-GB">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page title | The Satyrs’ Forest 🍇</title>
    <link href="/style.css" rel="stylesheet">
    <link href="/fonts/source_sans.css" rel="stylesheet"> <!-- (Sans-serif; default)-->
    <!-- <link href="/fonts/eb_garamond.css" rel="stylesheet"> (Serif) -->
    <!-- <link href="/fonts/cormorant.css" rel="stylesheet"> (Display serif) -->
    <link rel="icon" href="/favicon.png">
    <link rel="license" href="">
    <!-- Sidenotes
    <link href="/sidenotes.css" rel="stylesheet">
    <script src="/sidenotes.js"></script>  -->

    <!-- Comments
    <link href="/comments.css" rel="stylesheet">
    <script src="/comments.js"></script>  -->

    <!-- Social media image stuff -->
    <meta property="og:url" content="">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Page title">
    <meta property="og:image" content="">
    <meta property="og:image:alt" content="">
    <meta property="og:description" content="Ch&aelig;re! I&rsquo;m Marijn...">
    <meta property="og:site_name" content="The Satyrs&rsquo; Forest &#127815;">
    <meta property="og:locale" content="en_GB">

        :root {
            /* --background: #ffdead; 
            --text: #05050f;
            --accent: #1a2b3c;
            --accent_translucent: #1a2b3c88;
            --accent_seethrough: #1a2b3c22; */

        body {
            /* font-family: var(--your-font-stack-goes-here); */

        <h1>Page title</h1>

        <!-- Language variants
        <nav class="languages">
                        <img class="flag" src="/flags/gb.png">
                        <a href="/nederlandstalig" hreflang="nl" lang="nl">
                            <img class="flag" src="/flags/nl.png">

        <p>Text goes here, et cetera, et cetera...</p>

        <!-- PHP Comments
        <div class="comment-section"></div> -->

            <a href="/">← Back to home</a><br>
                Page created: 20XX Sma. 32 <br>
                Page last updated: 20XX Sma. 32
    <script data-goatcounter=""
            async src="//"></script> <!-- Analytics -->


This little bit of Javascript, if needed, can serve as a good-enough replacement for JQuery’s syntax in a pinch:

const $ = sel => document.querySelector(sel);
const $$ = sel => document.querySelectorAll(sel);