Example on front page should use better HTML than just divs and spans

[dmitriid]

Issue:

The frontpage example shows a "div/span-soup" for elements that are clearly titles, subtitles etc. :

<div class="flex flex-col items-center gap-6 p-7 md:flex-row md:gap-8 rounded-2xl">
  <div>
    <img class="size-48 shadow-xl rounded-md" alt="" src="/img/cover.png" />
  </div>
  <div class="flex items-center md:items-start">
    <!-- Card title -->
    <span class="text-2xl font-medium">Class Warfare</span>
    <!-- Card subtitle -->
    <span class="font-medium text-sky-500">The Anti-Patterns</span>
    <!-- Perhaps a list? A definition list? -->
    <span class="flex gap-2 font-medium text-gray-600 dark:text-gray-400">
      <span>No. 4</span>
      <span>·</span>
      <span>2025</span>
    </span>
  </div>
</div>

Perhaps a better example would be maintaining this structure, but replacing

<div class="flex flex-col items-center gap-6 p-7 md:flex-row md:gap-8 rounded-2xl">
  <div>
    <img class="size-48 shadow-xl rounded-md" alt="" src="/img/cover.png"  role="presentation" />
  </div>
  <div class="flex items-center md:items-start">
    <h2 class="text-2xl font-medium">Class Warfare</h2>
    <h3 class="font-medium text-sky-500">The Anti-Patterns</h3>
    <!-- Perhaps a list? A definition list?  <span>·</span> is bad for screen readers -->
    <span class="flex gap-2 font-medium text-gray-600 dark:text-gray-400">
      <span>No. 4</span>
      <span>·</span>
      <span>2025</span>
    </span>
  </div>
</div>

Edit. Additionally, the outer div is better served by an <article>: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article