Semantisch korrekte Liste von Terminen

[bornstecker]

Hallo,

ich versuche gerade das HTML-Gerüst zu erneuern und frage mich, welche Elemente ich kombinieren sollte, damit ich eine sauber strukturierte Liste bekommen. In der Liste stehen einzelne Termine mit Ortsangaben, Zeiten usw.

Meine Frage ist, ob ich nach html5 jetzt eine Liste mit <main> <section> <article>1. Termin mit Header + Anlauftext + Link auf Detailansicht</article></section> <section> <article>2. Termin mit Header + Anlauftext + Link auf Detailansicht</article> </section> </main>

oder eher <main> <article>1. Termin mit Header + Anlauftext + Link auf Detailansicht</article> <article>1. Termin mit Header + Anlauftext + Link auf Detailansicht</article> </main>

aufbauen sollte. Laut meinem Verständnis soll ja <article> einen abgeschlossenen Artikel kennzeichnen. In der obigen Liste steht allerdings ja nicht der gesamte Artikel.

Vielen Dank für einen kurzen Tipp.

gruß bornstecker

[Tabellenkalk]

Hallo,

In der Liste stehen einzelne Termine mit Ortsangaben, Zeiten usw.

Das klingt nicht nach Liste sondern nach Tabelle!

Gruß
Kalk

[Matthias Apsel]

Hallo bornstecker,

ich versuche gerade das HTML-Gerüst zu erneuern und frage mich, welche Elemente ich kombinieren sollte, damit ich eine sauber strukturierte Liste bekommen.

Die Liste selbst sollte eine ol sein, wenn die Termine voneinander abhängen, anderenfalls eine ul.

Bis demnächst
Matthias

[bornstecker]

Soweit verstanden. Das bedeutet im Umkehrschluss, dass jede "normale" Blog-Übersichtsseite auch eine Liste von Artikeln enthalten sollte und keine reine Aneinanderreihung von "<article>"-Tags?

Vielleicht habe ich die "Liste von Terminen" ja etwas unglücklich ausgedrückt.

Jeder einzelne Termin-Eintrag ist bei mir quasi ein in sich geschlossener Artikel, den ich auf einer Übersichtsseite mit einer Anzahl anderer Termin-Einträge in einer Kurzansicht darstelle.

Ergebnis sollte also sein:

<main>
  <ul>
    <li>1. Termineintrag</li>
    <li>2. Termineintrag</li>
  </ul>
</main>

Korrekt?

gruß bornstecker

[marctrix]

Hej bornstecker,

<main>
  <ul>
    <li>1. Termineintrag</li>
    <li>2. Termineintrag</li>
  </ul>
</main>

Korrekt?

Kommt mir erst mal plausibel vor — ein Link würde helfen…

Marc

[bornstecker]

Hallo Marc,

den Link hatte ich unter "problematische Seite" hinterlegt. Gern auch hier nochmal zum Ansehen.

https://www.kindersachenbasar.net/aktuelle-termine.html

Gruß bornstecker

[marctrix]

Hej bornstecker,

den Link hatte ich unter "problematische Seite" hinterlegt. Gern auch hier nochmal zum Ansehen.

https://www.kindersachenbasar.net/aktuelle-termine.html

Alles klar. Zufrieden mit dem Vorschlag von Rolf?

Marc

[bornstecker]

Hallo Marc,

jo. ist schlüssig und wurde umgesetzt.

gruß bornstecker

[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

[Gunnar Bittersmann]

@@Rolf B

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).

Plus den einen oder anderen Hack, z.B.

ol
{
	list-style: none;
	list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

<p>ABGABEBASAR</p>

„A be ge a be e be a es a er“? Nein. <p>Abgabebasar</p>.

Wenn das in Großbuchstaben dargestellt werden soll, ist es ein Fall für CSS text-transform: uppercase.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

dass Safari (und nur der?!) die list-Semantik entfernt, wenn man list-style:none setzt, muss man aber auch erstmal wissen 😟

Rolf

[bornstecker]

Hallo rolf,

vielen Dank für Deinen Beitrag. Auf so etwas in der Form hatte ich gehofft. Ich habe das jetzt mal umgestellt und schaue weiter, wo ich optimieren kann.

Das mit der Werbung ist so eine Sache. Es ist eine simple Adsense-Einbindung. Je nach Browser bekommst Du welche angezeigt bzw. nicht. Momentan spielt Firefox keine Werbung aus, es sei denn, man erlaubt es. Chrome und Opera schon.

Gruß bornstecker

[Rolf B]

Hallo bornstecker,

ich sehe auch unter Chrome keine Werbung, was aber an meinem Blocker liegt :). Schalte ich den ab, bekomme ich Werbung für Frauenkleidung. Selbst dann, wenn ich die personalisierte Werbung nicht verbiete. Toll gemacht, Google 😂.

Aber was ich nicht so schön finde, ist der Umstand, dass ich ohne diesen Blocker nicht "nein zu Google" sagen kann, sondern nur gehen. Und ich kann nicht mal gehen, ohne bereits mit einem Google-Ad Kontakt bekleckert worden zu sein. Dieses Detail könntest Du freundlicher gestalten.

Und damit höre ich jetzt auf, dazu zu nerven. Deswegen warst Du ja nicht hier.

Rolf

[bornstecker]

Hallo Rolf,

ich denke, wir können das Thema Werbung und korrektes Optout etc. gern in einem neuen Thread weiter besprechen. Ich habe dazu mit Sicherheit Nachholebedarf.

Ich denke für die ursprüngliche Frage ist eine Antwort gefunden.

gruß bornstecker