2025-04-16

Example HTML document

<!DOCTYPE html>
<html lang="en">
		<head>

        <!-- First things first -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="color-scheme" content="light dark">

        <!-- Upgrade http to https -->
        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

        <!-- Preconnect to required origins -->
        <link rel="preconnect" href="https://republic.imgix.net" />

        <!-- Asynchronous JS -->
        <script src="/assets/js/lazysizes.min.js" async></script>

        <!-- Synchronous JS -->
        <script>
            console.log('synchronous code');
        </script>

        <!-- Critical CSS + Load CSS files asynchronous -->
        <style>
            body{background:#000;color:#fff;}
        </style>
        <link href="/styles.css" rel="stylesheet" media="print" onload="this.media='all'">

        <!-- Preloads -->
        <link rel="preload" href="/assets/fonts/foreday/ForedayVarGX.woff2" as="font" crossorigin="anonymous" />

        <!-- Deferred JS -->
        <script src="/assets/js/script.min.js" defer></script>
        <script src="/assets/js/stimulus.min.js" defer></script>	

        <!-- Icons // https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs -->
        <link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
				<link rel="icon" href="/icon.svg" type="image/svg+xml">
				<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
				<link rel="manifest" href="/manifest.webmanifest">

        <!-- Manifest -->
        <meta name="mobile-web-app-capable" content="yes">

        <!-- Splash screens -->
        <link href="/assets/meta/splashscreens/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
				<!-- … -->

    </head>
    <body>
        <h1>Main title</h1>

        <!-- 
        Keep a tag and its attributes on one line for an easier overview.
        But, if there are a lot of attributes like classes, data
        attributes, etc., we write each attribute on an individual line.
        This is often the case when using Stimulus in the project.
        -->
        <header 
            class="header"
            data-grid-structure="true"
            data-controller="mobile-navigation"
            data-mobile-navigation-template-value="mobile-nav"
            data-mobile-navigation-class-value="mobile-navigation"
            data-mobile-navigation-target="header"
        >
            <nav>
                <a href="/">Home</a>
                <a href="/about">About</a>
                <a href="/contact">Contact</a>
            </nav>
        </header>
      
    </body>
</html>

manifest.webmanifest

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}