diff --git a/package-lock.json b/package-lock.json
index ef48944..fffe459 100644
Binary files a/package-lock.json and b/package-lock.json differ
diff --git a/package.json b/package.json
index 9f708b2..4356d4e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "2.4.1",
+    "version": "2.5.0",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Felix W. Dekker",
     "license": "MIT",
@@ -28,14 +28,14 @@
         "normalize.css": "^8.0.1"
     },
     "devDependencies": {
-        "grunt": "^1.4.0",
-        "grunt-cli": "^1.4.2",
+        "grunt": "^1.4.1",
+        "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.0",
         "grunt-contrib-cssmin": "^4.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-webpack": "^4.0.3",
-        "webpack": "^5.36.0",
-        "webpack-cli": "^4.6.0"
+        "webpack": "^5.38.1",
+        "webpack-cli": "^4.7.2"
     }
 }
diff --git a/src/main/js/main.js b/src/main/js/main.js
index 6fd334e..0d8f34f 100644
--- a/src/main/js/main.js
+++ b/src/main/js/main.js
@@ -193,5 +193,60 @@ const footerLink = function(prefix, text, url, suffix) {
 };
 
 
+/**
+ * Runs the functions `nav`, `header`, and `footer` after the page has loaded using properties defined in the meta tags.
+ *
+ * The remaining functions are invoked only if the corresponding `target` meta property is set to select an existing
+ * element. The HTML element returned by the function is then added as a child to the element specified by the query
+ * selector in the `target` property. The parameters to the function invocation can be set using other meta properties.
+ * The format of meta properties is `fwd:<function>:<property>`, where `property` is the same as the name of the
+ * parameter of that function, except that instead of camelcase words are separated by dashes. For example, `vcsURL`
+ * becomes `vcs-url`.
+ *
+ * Meta properties can be set by including `<meta name="fwd:<function>:<property>" content="<value>" />` in the HTML
+ * page on which this module is included. The `<value>` is then passed without modification as a parameter to the
+ * function. Leaving out the `<value>` by writing `<meta name="fwd:<function>:property" />` instead results in passing
+ * `null` as the value. Not including the meta tag at all corresponds to passing `undefined` to the function. See the
+ * documentation of the respective functions for more details on the parameters that they accept.
+ *
+ * Note that the function is invoked only if `fwd:<function>:target` is a query selector for an existing element. This
+ * means that it is possible to mix how the functions are invoked; for example, one can use meta properties to pass
+ * parameters to `nav`, but also invoke `header` in a separate function manually.
+ */
+doAfterLoad(() => {
+    const getMetaProperty = (name) => {
+        const element = $(`meta[name="${name}"]`);
+        return element === null ? undefined : element.getAttribute("content");
+    };
+
+    const navTarget = $(getMetaProperty("fwd:nav:target"));
+    if (navTarget !== null) {
+        navTarget.appendChild(nav(getMetaProperty("fwd:nav:highlight-path")));
+    }
+
+    const headerTarget = $(getMetaProperty("fwd:header:target"));
+    if (headerTarget !== null) {
+        headerTarget.appendChild(header({
+            title: getMetaProperty("fwd:header:title"),
+            description: getMetaProperty("fwd:header:description"),
+        }));
+    }
+
+    const footerTarget = $(getMetaProperty("fwd:footer:target"));
+    if (footerTarget !== null) {
+        footerTarget.appendChild(footer({
+            author: getMetaProperty("fwd:footer:author"),
+            authorURL: getMetaProperty("fwd:footer:author-url"),
+            license: getMetaProperty("fwd:footer:license"),
+            licenseURL: getMetaProperty("fwd:footer:license-url"),
+            vcs: getMetaProperty("fwd:footer:vcs"),
+            vcsURL: getMetaProperty("fwd:footer:vcs-url"),
+            version: getMetaProperty("fwd:footer:version"),
+            privacyPolicyURL: getMetaProperty("fwd:footer:privacy-policy-url"),
+        }));
+    }
+});
+
+
 // Export to namespace
 fwdekker = {stringToHtml, $, doAfterLoad, nav, header, footer};
diff --git a/src/test/index.html b/src/test/index.html
index b9dcc7e..4de57b2 100644
--- a/src/test/index.html
+++ b/src/test/index.html
@@ -8,6 +8,15 @@
     <meta name="description" content="A test page" />
     <meta name="theme-color" content="#0033cc" />
 
+    <meta name="fwd:nav:target" content="#nav" />
+    <meta name="fwd:nav:highlight-path" content="/Tools/Dice/" />
+    <meta name="fwd:header:target" content="#header" />
+    <meta name="fwd:header:title" content="Test" />
+    <meta name="fwd:header:description" content="A test page" />
+    <meta name="fwd:footer:target" content="#footer" />
+    <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/FWDekker/fwdekker-template/" />
+    <meta name="fwd:footer:version" content="vTEST" />
+
     <title>Tools | FWDekker</title>
 
     <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
@@ -22,7 +31,7 @@
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
-<main class="hidden">
+<main>
     <div id="nav"></div>
     <div id="contents">
         <div id="header"></div>
@@ -38,18 +47,5 @@
 
 <!--suppress HtmlUnknownTarget -->
 <script src="../../dist/template.js"></script>
-<script>
-    const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
-
-    doAfterLoad(() => {
-        $("#nav").appendChild(nav("/Tools/Dice/"));
-        $("#header").appendChild(header({title: "Test", description: "A test page"}));
-        $("#footer").appendChild(footer({
-            vcsURL: "https://git.fwdekker.com/FWDekker/fwdekker-template/",
-            version: "vTEST"
-        }));
-        $("main").classList.remove("hidden");
-    });
-</script>
 </body>
 </html>