semantic html

scenes/Layout/components/Footer.tsx

@@ -17,7 +17,7 @@ const Footer: React.FC = () => {
   )[species];
 
   return (
-    <Box mt="auto">
+    <Box as="footer" mt="auto">
       <Image
         src={footerImageSrc}
         bg={themeColor}

scenes/Layout/components/IconNavBar.tsx

@@ -99,7 +99,13 @@ const IconNavBar = () => {
   const isVoting = false;
 
   return (
-    <Flex bg={secondaryBgColor} py={2} justifyContent="center" flexWrap="wrap">
+    <Flex
+      as="nav"
+      bg={secondaryBgColor}
+      py={2}
+      justifyContent="center"
+      flexWrap="wrap"
+    >
       {navIcons.map(({ displayName, code, menuItems }) => {
         const codesTogether =
           "/" +

scenes/Layout/components/TopNav.tsx

@@ -75,6 +75,7 @@ const TopNav = () => {
 
   return (
     <Grid
+      as="header"
       templateColumns={["1fr 1fr", null, "1fr 1fr 1fr"]}
       bg={bgColor}
       w="100%"