Semantisch korrekte Liste von Terminen

[Rolf B]

Hallo bornstecker,

das als Liste aufzufassen ist semantisch ok. Wenn Du möchtest, dass assistive Technologien Dir so etwas sagen wie "Liste mit 5 Einträgen, 3. Eintrag" oder so, nimm eine ol ohne visuelle Darstellung der Nummer (also list-style-type:none).

Ob deine <li> Elemente <section> oder <article> enthalten sollten? Wenn ja, gehört auch ein <h2> Element hinein.

Zu <article> schreibt unser Wiki:

Das article-Element stellt in sich geschlossene Abschnitte eines Dokuments dar, vergleichbar mit einem Zeitungsartikel.

Und das MDN:

Das HTML <article> Element stellt eine in sich geschlossene Struktur innerhalb eines Dokuments, einer Seite, Anwendung oder Webseite dar, welches dazu bestimmt ist, unabhängig verteilbar oder wiederverwendbar zu sein, z. B. in einer Syndikation.

Zu <section> steht im Wiki:

Das section-Element enthält laut Spezifikation eine thematische Gruppierung von Inhalten, typischerweise mit einer Überschrift. Dies dient dazu, den Inhalt oder auch einen article in semantische Abschnitte zu gliedern.

Und in MDN:

The HTML <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document.

Demnach würde ich empfehlen, deine Listeneinträge als <article> zu markieren und das, was derzeit rot ist, als <h2> aufzufassen. Den Basartyp als <h3> zu markieren halte ich dagegen für falsch, es sei denn, es gibt einen Termin der aus mehreren Basaren besteht. Das ist einfach ein <p>. Du kannst <h2> und <p> zu einem <header> zusammenfassen (innerhalb des article), um das Styling korrekt zu steuern.

<main>
  <ul class="basartermine">
    <li>
      <article id="termin4711">
        <header>
          <h2>KinderSachenBasar Neckarsulm</h2>
          <p>ABGABEBASAR</p>
        </header>
        übrige Angaben, als p, figure, Liste, whatever. Auf Wunsch mit <section> gegliedert. Unter-<article> sind auch erlaubt, wenn sie eigenständig sein können.
      </article>
    </li>
  </ul>
</main>

Diese Darstellung stellt meine Ansicht dar und kann von anderen ganz anders gesehen werden ;)

Was jedenfalls falsch an deiner aktuellen Seite ist:

• die li sind nicht in ein ul gehüllt
• zwischen den li steckt ein div, in dem sich Google Ads verstecken. Warum, zum grundgütigen Geier? Da ist doch gar keine Werbung auf deiner Seite. Soll Google erfahren, dass ich mich für Babybasare interessiere und mich auf anderen Seiten mit Werbung zuschmeißen? Herzlichen Dank für den Spam! Was bekommst Du von Google dafür? 😠

Rolf