diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx
index e378bccee..c2d35414c 100644
--- a/quartz/components/ContentMeta.tsx
+++ b/quartz/components/ContentMeta.tsx
@@ -1,4 +1,4 @@
-import { Date, getDate } from "./Date"
+import { formatDate, getDate } from "./Date"
 import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import readingTime from "reading-time"
 import { classNames } from "../util/lang"
@@ -30,7 +30,7 @@ export default ((opts?: Partial<ContentMetaOptions>) => {
       const segments: (string | JSX.Element)[] = []
 
       if (fileData.dates) {
-        segments.push(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />)
+        segments.push(formatDate(getDate(cfg, fileData)!))
       }
 
       // Display reading time if enabled
diff --git a/quartz/components/Date.tsx b/quartz/components/Date.tsx
index 0a92cc4c3..26b59647c 100644
--- a/quartz/components/Date.tsx
+++ b/quartz/components/Date.tsx
@@ -27,5 +27,5 @@ export function formatDate(d: Date, locale: ValidLocale = "en-US"): string {
 }
 
 export function Date({ date, locale }: Props) {
-  return <time datetime={date.toISOString()}>{formatDate(date, locale)}</time>
+  return <>{formatDate(date, locale)}</>
 }
diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index ec7c48ef7..7f8369f46 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -113,10 +113,10 @@ export default ((userOpts?: Partial<Options>) => {
           </svg>
         </button>
         <div id="explorer-content">
-          <ul class="overflow" id="explorer-ul">
+          <menu class="overflow" id="explorer-ul">
             <ExplorerNode node={fileTree} opts={opts} fileData={fileData} />
             <li id="explorer-end" />
-          </ul>
+          </menu>
         </div>
       </div>
     )
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index e57d67715..a22da547f 100644
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -216,7 +216,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
           )}
           {/* Recursively render children of folder */}
           <div class={`folder-outer ${node.depth === 0 || isDefaultOpen ? "open" : ""}`}>
-            <ul
+            <menu
               // Inline style for left folder paddings
               style={{
                 paddingLeft: node.name !== "" ? "1.4rem" : "0",
@@ -233,7 +233,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
                   fileData={fileData}
                 />
               ))}
-            </ul>
+            </menu>
           </div>
         </li>
       )}
diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx
index eba17ae09..c58aecfa2 100644
--- a/quartz/components/Header.tsx
+++ b/quartz/components/Header.tsx
@@ -9,7 +9,7 @@ header {
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin: 2rem 0;
+  padding: 1rem 2rem;
   gap: 1.5rem;
 }
 
diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx
index 8b9755518..e7bb3596d 100644
--- a/quartz/components/Search.tsx
+++ b/quartz/components/Search.tsx
@@ -18,7 +18,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
     const opts = { ...defaultOptions, ...userOpts }
     const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder
     return (
-      <div class={classNames(displayClass, "search")}>
+      <search class={classNames(displayClass, "search")}>
         <button class="search-button" id="search-button">
           <p>{i18n(cfg.locale).components.search.title}</p>
           <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.9 19.7">
@@ -42,7 +42,7 @@ export default ((userOpts?: Partial<SearchOptions>) => {
             <div id="search-layout" data-preview={opts.enablePreview}></div>
           </div>
         </div>
-      </div>
+      </search>
     )
   }
 
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 3914411ac..0bd6d2fd6 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -221,19 +221,19 @@ export function renderPage(
   const Body = BodyConstructor()
 
   const LeftComponent = (
-    <div class="left sidebar">
+    <aside class="left sidebar">
       {left.map((BodyComponent) => (
         <BodyComponent {...componentData} />
       ))}
-    </div>
+    </aside>
   )
 
   const RightComponent = (
-    <div class="right sidebar">
+    <aside class="right sidebar">
       {right.map((BodyComponent) => (
         <BodyComponent {...componentData} />
       ))}
-    </div>
+    </aside>
   )
 
   const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
@@ -242,29 +242,31 @@ export function renderPage(
       <Head {...componentData} />
       <body data-slug={slug}>
         <div id="quartz-root" class="page">
+          <Header {...componentData}>
+            {header.map((HeaderComponent) => (
+              <HeaderComponent {...componentData} />
+            ))}
+          </Header>
           <Body {...componentData}>
             {LeftComponent}
-            <div class="center">
+            <section class="center">
               <div class="page-header">
-                <Header {...componentData}>
-                  {header.map((HeaderComponent) => (
-                    <HeaderComponent {...componentData} />
-                  ))}
-                </Header>
                 <div class="popover-hint">
                   {beforeBody.map((BodyComponent) => (
                     <BodyComponent {...componentData} />
                   ))}
                 </div>
               </div>
-              <Content {...componentData} />
+              <main>
+                <Content {...componentData} />
+              </main>
               <hr />
               <div class="page-footer">
                 {afterBody.map((BodyComponent) => (
                   <BodyComponent {...componentData} />
                 ))}
               </div>
-            </div>
+            </section>
             {RightComponent}
             <Footer {...componentData} />
           </Body>
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 397fd0241..b15e1af9d 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -60,7 +60,7 @@ button#explorer {
   grid-template-rows: 1fr;
 }
 
-.folder-outer > ul {
+.folder-outer > menu {
   overflow: hidden;
 }
 
@@ -83,7 +83,7 @@ button#explorer {
     visibility: hidden;
   }
 
-  & ul {
+  & menu {
     list-style: none;
     margin: 0.08rem 0;
     padding: 0;
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 438949108..c44b36e6e 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -125,6 +125,7 @@ a {
 .page {
   max-width: calc(#{map.get($breakpoints, desktop)} + 300px);
   margin: 0 auto;
+
   & article {
     & > h1 {
       font-size: 2rem;
@@ -235,7 +236,7 @@ a {
     }
 
     & .page-header {
-      grid-area: grid-header;
+      grid-area: grid-page-header;
       margin: $topSpacing 0 0 0;
       @media all and ($mobile) {
         margin-top: 0;
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
index f61adfcdd..4247636b8 100644
--- a/quartz/styles/variables.scss
+++ b/quartz/styles/variables.scss
@@ -30,7 +30,7 @@ $mobileGrid: (
   columnGap: "5px",
   templateAreas:
     '"grid-sidebar-left"\
-      "grid-header"\
+      "grid-page-header"\
       "grid-center"\
       "grid-sidebar-right"\
       "grid-footer"',
@@ -41,7 +41,7 @@ $tabletGrid: (
   rowGap: "5px",
   columnGap: "5px",
   templateAreas:
-    '"grid-sidebar-left grid-header"\
+    '"grid-sidebar-left grid-page-header"\
       "grid-sidebar-left grid-center"\
       "grid-sidebar-left grid-sidebar-right"\
       "grid-sidebar-left grid-footer"',
@@ -52,7 +52,7 @@ $desktopGrid: (
   rowGap: "5px",
   columnGap: "5px",
   templateAreas:
-    '"grid-sidebar-left grid-header grid-sidebar-right"\
+    '"grid-sidebar-left grid-page-header grid-sidebar-right"\
       "grid-sidebar-left grid-center grid-sidebar-right"\
       "grid-sidebar-left grid-footer grid-sidebar-right"',
 );