lista aktualności na stronie (div, table czy inaczej)

Na potrzeby mojej firmy prowadzę małą stronkę WWW. Chciałbym na niej dodać sekcję z aktualnościami.
Na przykład:

03/01/2022 treść A
05/01/2022 treść B
09/01/2022 treść C

Zastanawiam się jak najsprytniej to osiągnąć. Na myśl przychodzą mi 2 opcje:
a) każdy news to nowy DIV
b) każdy news to nowy TR w elemencie TABLE

Całość umieszczona będzie w innym DIV, a ten z kolei odpowiednio ustawiam gridem.

c) Każdy news to nowy <article>

Całość umieszczona w <main> lub <section>

obscurity napisał(a):

c) Każdy news to nowy <article>

Całość umieszczona w <main> lub <section>

Dodatkowo każde section, oraz article powinno mieć własny naglowek

Co powiedzie o tym:

<fieldset>
	<legend>03.01.2022</legend>
	<p class="tytuł newsa">super news!</p>
	<p class="treść newsa">żartowałem xD</p>
</fieldset>

Xarviel napisał(a):

obscurity napisał(a):

c) Każdy news to nowy <article>

Całość umieszczona w <main> lub <section>

Dodatkowo każde section, oraz article powinno mieć własny naglowek

Czy powyższego użylibyście również do sekcji Pytania i Odpowiedzi?

Na MDN możesz sobie sprawdzić do czego służy każdy znacznik (https://developer.mozilla.org/en-US/docs/Web/HTML/Element).

Semantykę w HTML'u możemy interpretować na kilka różnych sposobów, bo niektóre znaczniki nie są dokładnie sprecyzowane kiedy powinny być użyte.
Najlepiej starać się to dopasować do pozostałych elementów na stronie, tak, żeby całość strony była sensownie opisana.

Jeśli pytania składają się z tekstu i opisu to zrobiłbym to w formie listy mniej/więcej w taki sposób

<main>
  <header>
    <h1>Najważniejszy nagłówek na stronie</h1>
    <p>wstępny tekst</p>
  </header>

  <section>
    <h2>Przykładowe artykuły</h2>

    <div>
      <article>
        <h3>Nagłówek artykułu</h3>
        <p>zajawka</p>
        <a href="#">link</a>
      </article>

      <article>
        <h3>Nagłówek artykułu 2</h3>
        <p>zajawka</p>
        <a href="#">link</a>
      </article>
    </div>
  </section>

  <section>
    <h2>Pytania i odpowiedzi</h2>

    <dl>
      <dt>Pytanie nr 1</dt>
      <dd>Odpowiedź numer 1</dd>

      <dt>Pytanie nr 2</dt>
      <dd>Odpowiedź numer 2</dd>
    </dl>
  </section>
</main>

Zrobiłem tę listę pytań i odpowiedzi. Ponieważ jest długa, to elementy <dd> ukryłem z poziomu CSS:

display: none;

Ich odkryciem będzie zajmował się dołączony do strony skrypt JS, który po prostu zmieni widoczność:

display: normal;

Można to zrobić prościej, czy "techniczne" jest to ok i nie wywoła raka?