diff --git a/templates/page.tmpl b/templates/page.tmpl
index 41310fb..440538e 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -6,6 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
     <TMPL_IF NAME="META"><TMPL_VAR META></TMPL_IF>
+    <TMPL_IF DYNAMIC>
+    <TMPL_IF FORCEBASEURL><base href="<TMPL_VAR FORCEBASEURL>" /><TMPL_ELSE>
+    <TMPL_IF BASEURL><base href="<TMPL_VAR BASEURL>" /></TMPL_IF>
+    </TMPL_IF>
+    </TMPL_IF>
 
     <title><TMPL_VAR TITLE> - <TMPL_VAR WIKINAME></title>
 
@@ -30,6 +35,12 @@
     <!-- Custom styles for this template -->
     <link href="<TMPL_VAR BASEURL>bootstrap.local.css" rel="stylesheet" />
 
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
     <!-- Custom styles for derivatives -->
     <TMPL_IF LOCAL_CSS>
     <link rel="stylesheet" href="<TMPL_VAR BASEURL><TMPL_VAR LOCAL_CSS>" type="text/css" />
@@ -37,6 +48,23 @@
     <link rel="stylesheet" href="<TMPL_VAR BASEURL>local.css" type="text/css" />
     </TMPL_IF>
 
+    <TMPL_UNLESS DYNAMIC>
+      <TMPL_IF EDITURL>
+        <link rel="alternate" type="application/x-wiki" title="Edit this page" href="<TMPL_VAR EDITURL>" />
+      </TMPL_IF>
+      <TMPL_IF FEEDLINKS><TMPL_VAR FEEDLINKS></TMPL_IF>
+      <TMPL_IF RELVCS><TMPL_VAR RELVCS></TMPL_IF>
+      <TMPL_IF META><TMPL_VAR META></TMPL_IF>
+      <TMPL_LOOP TRAILLOOP>
+        <TMPL_IF PREVPAGE>
+          <link rel="prev" href="<TMPL_VAR PREVURL>" title="<TMPL_VAR PREVTITLE>" />
+        </TMPL_IF>
+        <link rel="up" href="<TMPL_VAR TRAILURL>" title="<TMPL_VAR TRAILTITLE>" />
+        <TMPL_IF NEXTPAGE>
+          <link rel="next" href="<TMPL_VAR NEXTURL>" title="<TMPL_VAR NEXTTITLE>" />
+        </TMPL_IF>
+      </TMPL_LOOP>
+    </TMPL_UNLESS>
   </head>
   <body>
 
@@ -101,18 +129,101 @@
             <TMPL_VAR CONTENT>
 
             <TMPL_IF ENCLOSURE>
-            <section id="enclosure">
+            <TMPL_IF HTML5><section id="enclosure"><TMPL_ELSE><div id="enclosure"></TMPL_IF>
             <a href="<TMPL_VAR ENCLOSURE>">Download</a>
-            </section>
+            <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
             </TMPL_IF>
 
             <TMPL_IF TRAILS>
               <TMPL_VAR TRAILS>
             </TMPL_IF>
 
+            <TMPL_UNLESS DYNAMIC>
+            <!-- legacy Ikiwiki comments.pm section -->
+            <TMPL_IF COMMENTS>
+            <TMPL_IF HTML5><section id="comments"><TMPL_ELSE><div id="comments"></TMPL_IF>
+            <TMPL_VAR COMMENTS>
+            <TMPL_IF ADDCOMMENTURL>
+            <div class="addcomment">
+            <a href="<TMPL_VAR ADDCOMMENTURL>">Add a comment</a>
+            </div>
+            <TMPL_ELSE>
+            <TMPL_UNLESS mastodon_host>
+            <div class="addcomment">Comments on this page are closed.</div>
+            </TMPL_UNLESS>
+            </TMPL_IF>
+            <TMPL_IF HTML5></section><TMPL_ELSE></div></TMPL_IF>
+            </TMPL_IF>
+
+            <!-- Mastodon comments -->
+<TMPL_IF mastodon_host>
+<div class="mastodon-comments comments">
+  <p>You can use your Mastodon account to reply to this <a class="link" href="https://<TMPL_VAR mastodon_host>/@<TMPL_VAR mastodon_username>/<TMPL_VAR mastodon_post>">post</a>.</p>
+  <p id="mastodon-comments-list"><button id="load-comment">Load comments</button></p>
+  <noscript><p>You need JavaScript to view the comments.</p></noscript>
+  <script src="<TMPL_VAR BASEURL>assets/js/purify.min.js"></script>
+  <script type="text/javascript">
+    function escapeHtml(unsafe) {
+      return unsafe
+           .replace(/&/g, "&amp;")
+           .replace(/</g, "&lt;")
+           .replace(/>/g, "&gt;")
+           .replace(/"/g, "&quot;")
+           .replace(/'/g, "&#039;");
+   }
+
+    document.getElementById("load-comment").addEventListener("click", function() {
+      document.getElementById("load-comment").innerHTML = "Loading...";
+      fetch('https://<TMPL_VAR mastodon_host>/api/v1/statuses/<TMPL_VAR mastodon_post>/context')
+        .then(function(response) {
+          return response.json();
+        })
+        .then(function(data) {
+          if(data['descendants'] &&
+             Array.isArray(data['descendants']) && 
+            data['descendants'].length > 0) {
+              document.getElementById('mastodon-comments-list').innerHTML = "";
+              data['descendants'].forEach(function(reply) {
+                reply.account.display_name = escapeHtml(reply.account.display_name);
+                reply.account.emojis.forEach(emoji => {
+                  reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
+                    `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
+                });
+                mastodonComment =
+                  `<div class="mastodon-comment comment">
+                     <div class="avatar">
+                       <img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
+                     </div>
+                     <div class="content">
+                       <div class="author">
+                         <a href="${reply.account.url}" rel="nofollow">
+                           <span>${reply.account.display_name}</span>
+                           <span class="disabled">${escapeHtml(reply.account.acct)}</span>
+                         </a>
+                         <a class="post" href="${reply.uri}" rel="nofollow">
+                           <time datetime="${reply.created_at}" pubdate="pubdate">
+                             ${reply.created_at.replace(/(T\d+:\d+):\d+(\.\d+)?(.*)/, "$1$3")}
+                           </time>
+                         </a>
+                       </div>
+                       <div class="mastodon-comment-content">${reply.content}</div>
+                     </div>
+                   </div>`;
+                document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
+              });
+          } else {
+            document.getElementById('mastodon-comments-list').innerHTML = "<p>Not comments found</p>";
+          }
+        });
+      });
+  </script>
+</div>
+            </TMPL_IF>
+
+	</TMPL_UNLESS>
     </div> <!-- /container -->
 
-    <footer class="footer" role="contentinfo">
+    <TMPL_IF HTML5><footer<TMPL_ELSE><div</TMPL_IF> class="footer" role="contentinfo">
 	<div class="container">
 
     <TMPL_IF FOOTER>
@@ -120,7 +231,7 @@
     </TMPL_IF>
 
 	</div>
-    </footer>
+    <TMPL_IF HTML5></footer><TMPL_ELSE></div></TMPL_IF>
 
 
     <!-- Bootstrap core JavaScript
diff --git a/templates/searchform.tmpl b/templates/searchform.tmpl
index 6b660b7..b64c8c5 100644
--- a/templates/searchform.tmpl
+++ b/templates/searchform.tmpl
@@ -1,4 +1,4 @@
 <form method="get" action="<TMPL_VAR SEARCHACTION>" class="navbar-form navbar-left" role="search">
 <input type="text" class="form-control" name="P" value="" size="16"
-placeholder="search" />
+<TMPL_IF HTML5>placeholder="search"</TMPL_IF> />
 </form>
