Semantisch korrekte Liste von Terminen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Semantisch korrekte Liste von Terminen Sat, 23 Feb 19 11:49:52 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743262#m1743262 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743262#m1743262 <p>Hallo,</p> <p>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.</p> <p>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></p> <p>oder eher <main> <article>1. Termin mit Header + Anlauftext + Link auf Detailansicht</article> <article>1. Termin mit Header + Anlauftext + Link auf Detailansicht</article> </main></p> <p>aufbauen sollte. Laut meinem Verständnis soll ja <article> einen abgeschlossenen Artikel kennzeichnen. In der obigen Liste steht allerdings ja nicht der gesamte Artikel.</p> <p>Vielen Dank für einen kurzen Tipp.</p> <p>gruß bornstecker</p> Semantisch korrekte Liste von Terminen Sat, 23 Feb 19 11:52:27 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743263#m1743263 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743263#m1743263 <p>Hallo,</p> <blockquote> <p>In der Liste stehen einzelne Termine mit Ortsangaben, Zeiten usw.</p> </blockquote> <p>Das klingt nicht nach Liste sondern nach Tabelle!</p> <p>Gruß<br> Kalk</p> Semantisch korrekte Liste von Terminen Sat, 23 Feb 19 11:53:58 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743264#m1743264 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743264#m1743264 <p>Hallo bornstecker,</p> <blockquote> <p>ich versuche gerade das HTML-Gerüst zu erneuern und frage mich, welche Elemente ich kombinieren sollte, damit ich eine sauber strukturierte Liste bekommen.</p> </blockquote> <p>Die Liste selbst sollte eine <code>ol</code> sein, wenn die Termine voneinander abhängen, anderenfalls eine <code>ul</code>.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> Semantisch korrekte Liste von Terminen Sat, 23 Feb 19 12:21:01 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743267#m1743267 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743267#m1743267 <p>Soweit verstanden. Das bedeutet im Umkehrschluss, dass jede "normale" Blog-Übersichtsseite auch eine <strong>Liste</strong> von Artikeln enthalten sollte und keine reine Aneinanderreihung von "<article>"-Tags?</p> <p>Vielleicht habe ich die "Liste von Terminen" ja etwas unglücklich ausgedrückt.</p> <p>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.</p> <p>Ergebnis sollte also sein:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>1. Termineintrag<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2. Termineintrag<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> </code></pre> <p>Korrekt?</p> <p>gruß bornstecker</p> Semantisch korrekte Liste von Terminen Sat, 23 Feb 19 18:46:31 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743287#m1743287 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743287#m1743287 <p>Hej bornstecker,</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>1. Termineintrag<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>2. Termineintrag<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> </code></pre> <p>Korrekt?</p> </blockquote> <p>Kommt mir erst mal plausibel vor — ein Link würde helfen…</p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> Semantisch korrekte Liste von Terminen Sun, 24 Feb 19 16:11:32 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743364#m1743364 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743364#m1743364 <p>Hallo bornstecker,</p> <p>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).</p> <p>Ob deine <li> Elemente <section> oder <article> enthalten sollten? Wenn ja, gehört auch ein <h2> Element hinein.</p> <p>Zu <article> schreibt unser Wiki:</p> <blockquote> <p>Das article-Element stellt in sich geschlossene Abschnitte eines Dokuments dar, vergleichbar mit einem Zeitungsartikel.</p> </blockquote> <p>Und das MDN:</p> <blockquote> <p>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.</p> </blockquote> <p>Zu <section> steht im Wiki:</p> <blockquote> <p>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.</p> </blockquote> <p>Und in MDN:</p> <blockquote> <p>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.</p> </blockquote> <p>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, <strong>es sei denn</strong>, 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.</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>basartermine<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>termin4711<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>KinderSachenBasar Neckarsulm<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>ABGABEBASAR<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> übrige Angaben, als p, figure, Liste, whatever. Auf Wunsch mit <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> gegliedert. Unter-<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> sind auch erlaubt, wenn sie eigenständig sein können. <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> </code></pre> <p>Diese Darstellung stellt meine Ansicht dar und kann von anderen ganz anders gesehen werden ;)</p> <p>Was jedenfalls falsch an deiner aktuellen Seite ist:</p> <ul> <li>die li sind nicht in ein ul gehüllt</li> <li>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? </li> </ul> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Semantisch korrekte Liste von Terminen Sun, 24 Feb 19 12:18:47 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743345#m1743345 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743345#m1743345 <p>Hallo Marc,</p> <p>den Link hatte ich unter "problematische Seite" hinterlegt. Gern auch hier nochmal zum Ansehen.</p> <p><a href="https://www.kindersachenbasar.net/aktuelle-termine.html" rel="nofollow noopener noreferrer">https://www.kindersachenbasar.net/aktuelle-termine.html</a></p> <p>Gruß bornstecker</p> Semantisch korrekte Liste von Terminen Sun, 24 Feb 19 18:42:05 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743373#m1743373 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743373#m1743373 <p>Hej bornstecker,</p> <blockquote> <p>den Link hatte ich unter "problematische Seite" hinterlegt. Gern auch hier nochmal zum Ansehen.</p> <p><a href="https://www.kindersachenbasar.net/aktuelle-termine.html" rel="nofollow noopener noreferrer">https://www.kindersachenbasar.net/aktuelle-termine.html</a></p> </blockquote> <p>Alles klar. Zufrieden mit dem Vorschlag von Rolf?</p> <p>Marc</p> <div class="signature">-- <br> Ceterum censeo Google esse delendam </div> Semantisch korrekte Liste von Terminen Sun, 24 Feb 19 17:27:49 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743369#m1743369 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743369#m1743369 <p>@@Rolf B</p> <blockquote> <p>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).</p> </blockquote> <p>Plus <a href="https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html" rel="nofollow noopener noreferrer">den einen oder anderen Hack</a>, z.B.</p> <pre><code class="block language-css"><span class="token selector">ol</span> <span class="token punctuation">{</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p></p> <blockquote> <p><code class="language-html bad"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>ABGABEBASAR<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></p> </blockquote> <p>„A be ge a be e be a es a er“? Nein. <code class="language-html good"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Abgabebasar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code>.</p> <p>Wenn das in Großbuchstaben <em>dargestellt</em> werden soll, ist es ein Fall für CSS <code>text-transform: uppercase</code>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Semantisch korrekte Liste von Terminen Sun, 24 Feb 19 19:55:34 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743379#m1743379 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743379#m1743379 <p>Hallo rolf,</p> <p>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.</p> <p>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.</p> <p>Gruß bornstecker</p> Semantisch korrekte Liste von Terminen Sun, 24 Feb 19 17:52:28 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743370#m1743370 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743370#m1743370 <p>Hallo Gunnar,</p> <p>dass Safari (und nur der?!) die list-Semantik entfernt, wenn man list-style:none setzt, muss man aber auch erstmal wissen </p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Semantisch korrekte Liste von Terminen Mon, 25 Feb 19 15:26:41 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743399#m1743399 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743399#m1743399 <p>Hallo Marc,</p> <p>jo. ist schlüssig und wurde umgesetzt.</p> <p>gruß bornstecker</p> Semantisch korrekte Liste von Terminen Sun, 24 Feb 19 21:59:46 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743381#m1743381 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743381#m1743381 <p>Hallo bornstecker,</p> <p>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 .</p> <p>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.</p> <p>Und damit höre ich jetzt auf, dazu zu nerven. Deswegen warst Du ja nicht hier.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Semantisch korrekte Liste von Terminen Mon, 25 Feb 19 15:25:47 Z https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743398#m1743398 https://forum.selfhtml.org/self/2019/feb/23/semantisch-korrekte-liste-von-terminen/1743398#m1743398 <p>Hallo Rolf,</p> <p>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.</p> <p>Ich denke für die ursprüngliche Frage ist eine Antwort gefunden.</p> <p>gruß bornstecker</p>