fix: use some more semantic elements

components/conversation/ConversationCard.vue

@@ -7,11 +7,11 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div flex flex-col gap-2>
+  <article flex flex-col gap-2>
     <div flex gap-2 flex-wrap text-sm px-2>
       with
       <AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
     </div>
     <StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
-  </div>
+  </article>
 </template>

components/nav/NavFooter.vue

@@ -4,7 +4,7 @@ const buildTimeAgo = useTimeAgo(buildTime)
 </script>
 
 <template>
-  <div p4 text-sm text-secondary-light flex="~ col">
+  <footer p4 text-sm text-secondary-light flex="~ col">
     <div flex="~ gap2">
       <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
       <button
@@ -13,8 +13,10 @@ const buildTimeAgo = useTimeAgo(buildTime)
         @click="toggleZenMode()"
       />
     </div>
-    <a cursor-pointer hover:underline @click="openPreviewHelp">Show intro</a>
+    <button cursor-pointer hover:underline @click="openPreviewHelp">
+      Show intro
+    </button>
     <div>A Mastodon client made with 🧡</div>
     <div>Built <time :datetime="buildTime" :title="buildTime">{{ buildTimeAgo }}</time> · <a href="https://github.com/elk-zone/elk" target="_blank">GitHub</a></div>
-  </div>
+  </footer>
 </template>

components/notification/NotificationCard.vue

@@ -7,7 +7,7 @@ const { notification } = defineProps<{
 </script>
 
 <template>
-  <div flex flex-col>
+  <article flex flex-col>
     <template v-if="notification.type === 'follow'">
       <div flex ml-4 items-center>
         <div i-ri:user-follow-fill mr-3 color-primary />
@@ -57,5 +57,5 @@ const { notification } = defineProps<{
         [DEV] MISSING notification.type: '{{ notification.type }}'
       </div>
     </template>
-  </div>
+  </article>
 </template>

components/timeline/TimelinePaginator.vue

@@ -11,7 +11,7 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator :paginator="paginator" virtual-scroller>
     <template #default="{ item, active }">
-      <DynamicScrollerItem :item="item" :active="active">
+      <DynamicScrollerItem :item="item" :active="active" tag="article">
         <StatusCard
           :status="item"
           border="b base" py-3