Ashura: Korrekte Semantik (ul / dl)

Hallo.

Ich habe eine Frage, ob sie eine triviale Antwort beherbergt, vermag ich nicht zu erkennen.

Ich möchte meine Neugkeiten-Seite wie den Rest meiner HP generalüberholen, d.h. XHTML Strict mit korrekter Semantik um den Sinn der Struktur nicht zu verfälschen.

Aber momentan gerate ich bei der Auflistung der Neuigkeiten ins Stocken.
Vom Sinn der Struktur wäre ja eine <ul> am sinnvollsten. Der Titel des News-Eintrages entspräche dann einem <li>, doch was ist mit dem Text selbst? Hier ebenfalls ein <li> zu verwenden (was wohl oder übel das einzige ist, was innerhalb von <ul> erlaubt ist) wäre unter Umständen korrekt, würde aber zu einer unübersichtlichen Struktur führen. Zudem müsste ich zur Formatierung per CSS eine Menge Klassen einbauen, was den Source weiter aufbläht.

Lange Rede, kurzer Sinn: ist es "legitim", für meinen Fall <dl>,<dt> und <dd> zu verwenden?

Gruß, Ashura

--

Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
  1. Hallo,

    Lange Rede, kurzer Sinn: ist es "legitim", für meinen Fall <dl>,<dt> und <dd> zu verwenden?

    Warum nicht so:

    <ul>
     <li><h2>Tittel des Posts</h2>
         <p>Viel Text</p>
         <p>Noch mehr Text und so weiter</p>
     </li>
    </ul>

    Es streiten sich aber viele ob das egentich eine Liste ist, oder "nur" eine einfache Abfolge von Überschriften mit darauf folgendem Text, die dann mittels <div> zu gruppieren sind.

    Grüße
    Jeena Paradies

    1. Hallo.

      Warum nicht so:

      <ul>
      <li><h2>Tittel des Posts</h2>
           <p>Viel Text</p>
           <p>Noch mehr Text und so weiter</p>
      </li>
      </ul>

      Es streiten sich aber viele ob das egentich eine Liste ist, oder "nur" eine einfache Abfolge von Überschriften mit darauf folgendem Text, die dann mittels <div> zu gruppieren sind.

      Hm... Das wäre eine Idee. Zumal ich da

      (1) eine sinnvollere Struktur als mit der bisherigen <li>-Suppe hätte
      (2) die Gestaltung per CSS vereinfachen könnte.

      Von mir aus kann sich da streiten, wer will, mich interessiert nur, ob es der Struktur dienlich und valide ist. Und dein Vorschlag sieht mir sehr danach aus, dankeschön!

      Gruß, Ashura

      --

      Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
    2. Hallo,

      Warum nicht so:

      <ul>
      <li><h2>Tittel des Posts</h2>
           <p>Viel Text</p>
           <p>Noch mehr Text und so weiter</p>
      </li>
      </ul>

      Weil ein h2-Element bereits implizit die Information »Überschrift, die sich mit dem folgenden Text bis zur nächsten Überschrift in einer Sequenz befindet« vermittelt.
      Oder ganz konkret: Wenn ein Benutzer eine Abfolge von Überschriften gefolgt von Textabsätzen wahrnimmt, dann versteht er die Struktur, auch ohne dass ihm noch einmal explizit Anfang und Ende dieses Abschnitts durch den Listenpunkt vermittelt werden. Denke an andere Rezeptionsarten als die visuelle mit deinem (Ashuras) Screen-Stylesheet, dass die letztgenannte Information vermutlich durch Umformatierung des ul-Elements abschaltet.

      Es streiten sich aber viele ob das egentich eine Liste ist, oder "nur" eine einfache Abfolge von Überschriften mit darauf folgendem Text, die dann mittels <div> zu gruppieren sind.

      Diese Gruppierung existiert implizit bereits. Mit einem div kann man sie herausarbeiten, wie in XHTML 2 mit dem section-Element. Muss man aber nicht, wenn man den Abschnitt nicht als Abschnitt etwa im Stylesheet referenzieren will.

      Mathias

      1. Hallo.

        Oder ganz konkret: Wenn ein Benutzer eine Abfolge von Überschriften gefolgt von Textabsätzen wahrnimmt, dann versteht er die Struktur, auch ohne dass ihm noch einmal explizit Anfang und Ende dieses Abschnitts durch den Listenpunkt vermittelt werden. [...]

        Auch das wäre eine Überlegung wert, zumal auch hier wieder der Quellcode verkürzt würde...

        Ich experimentiere einmal etwas, ob man in einer Ansicht ohne CSS dennoch intuitiv die Struktur erfassen kann.

        Dankeschön.

        Gruß, Ashura

        --

        Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
  2. Moin!

    Lange Rede, kurzer Sinn: ist es "legitim", für meinen Fall <dl>,<dt> und <dd> zu verwenden?

    Zitat aus SELFTML ( http://de.selfhtml.org/html/text/listen.htm#definition):

    Definitionslisten sind für Glossare gedacht. Glossare bestehen aus einer Liste von Einträgen. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.

    tschüssi
    ichen

    1. Hallo.

      Definitionslisten sind für Glossare gedacht. Glossare bestehen aus einer Liste von Einträgen. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.

      Ich bin mir des eigentlichen strukturellen Zweckes diverser Elemente durchaus bewusst.

      Aber in meiner Lage sah ich kaum noch einen Ausweg.
      Das hat sich aber dank Jeena und Gernot's Tipp erledigt.

      Nochmals danke an beide!

      Gruß, Ashura

      --

      Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
      1. Moin!
        ich wollte damit sagen, was Gernot auf den Punkt gebrcht hat. Die semantik wäre nicht richtig.
        tschüssi
        ichen

        1. Hallo.

          ich wollte damit sagen, was Gernot auf den Punkt gebrcht hat. Die semantik wäre nicht richtig.

          Dachte ich mir ja auch schon von Anfang an. Und ich danke dir auch nochmals für den Hinweis. Da ich wie gesagt eine sinnvolle Struktur anstrebe, sind Tipps immer willkommen.

          Gruß, Ashura

          --

          Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
  3. Hallo Ashura,

    Aber momentan gerate ich bei der Auflistung der Neuigkeiten ins Stocken.
    Vom Sinn der Struktur wäre ja eine <ul> am sinnvollsten. Der Titel des News-Eintrages entspräche dann einem <li>, doch was ist mit dem Text selbst? Hier ebenfalls ein <li> zu verwenden (was wohl oder übel das einzige ist, was innerhalb von <ul> erlaubt ist) wäre unter Umständen korrekt, würde aber zu einer unübersichtlichen Struktur führen. Zudem müsste ich zur Formatierung per CSS eine Menge Klassen einbauen, was den Source weiter aufbläht.

    Das wäre aber von der Semantik her nicht korrekt.

    Es spricht aber nichts dagegen, innerhealb deines Listenpunktes eine mit Überschriften-Element ausgezeichnete Überschrift zu haben und einen News-Text in einem oder mehreren P-Elementen.

    Gruß Gernot

    1. Hallo.

      Das wäre aber von der Semantik her nicht korrekt.

      Ich weiß -> Verzweiflung...

      Es spricht aber nichts dagegen, innerhealb deines Listenpunktes eine mit Überschriften-Element ausgezeichnete Überschrift zu haben und einen News-Text in einem oder mehreren P-Elementen.

      Dies wurde mir schon geraten, weshalb ich nun darauf setzen werde.

      Dankeschön!

      Gruß, Ashura

      --

      Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
  4. Hi,

    Ich möchte meine Neugkeiten-Seite wie den Rest meiner HP generalüberholen, d.h. XHTML Strict mit korrekter Semantik um den Sinn der Struktur nicht zu verfälschen.

    Und was vermitteln die Neuigkeiten? Eine Art Tagebucheinträge? Hierfür könnte ich mir Hx und P noch recht sinnvoll vorstellen.

    freundliche Grüße
    Ingo

  5. Hallo Ashura,

    Aber momentan gerate ich bei der Auflistung der Neuigkeiten ins Stocken.
    Vom Sinn der Struktur wäre ja eine <ul> am sinnvollsten. Der Titel des News-Eintrages entspräche dann einem <li>, doch was ist mit dem Text selbst? Hier ebenfalls ein <li> zu verwenden (was wohl oder übel das einzige ist, was innerhalb von <ul> erlaubt ist) wäre unter Umständen korrekt, würde aber zu einer unübersichtlichen Struktur führen. Zudem müsste ich zur Formatierung per CSS eine Menge Klassen einbauen, was den Source weiter aufbläht.
    Lange Rede, kurzer Sinn: ist es "legitim", für meinen Fall <dl>,<dt> und <dd> zu verwenden?

    Ein schoenes Beispiel dafuer, wie der ganze neumodische Tanz um die "Semantik" (vor ein paar Jahrens kannten dieses Wort nur ein paar Sprachwissenshaftler) innerhalb von HTML ad absurdum fuehrt. Mensch, pack das Zeug in eine ordentliche div-Struktur. Dann hast du gleich neutrale Blockelemente ohne unbekannte Browser-Defaults fuer margin und padding. Um die Sache "semantisch" auszuzeichnen, kannst du mit Klassennamen arbeiten, z.B.:
    <div class="news">
      <div class="news_title">...</div>
      <div class="news_text">...</div>
    </div>

    ul-Listen sind fuer Aufzaehlungen, und dl-Listen sind fuer Glossare. HTML hat nun mal keine Elemente fuer alle Faelle. Also ist es sinnvoller, in den Faellen, wo man - semantisch gesehen - ein nicht abgedecktes Element verwenden will, auf neutrale divs oder spans auszuweichen, statt irgendwelche Elemente mit konkreter semantischer Bedeutung "zurechtzuinterpretieren". Das untergraebt am Ende naemlich den ganzen Semantikgedanken, statt ihn zu foerdern.

    Oder - wenn du die radikale XHTML-Schiene fahren willst - bastel dir eine XML-DTD fuer die Newsliste, und arbeite in der XHTML-Datei zusaetzlich mit dem Namensraum der eigenen DTD. Oder erweitere dir die oeffentliche XHTML-DTD um die benoetigten Elemente und referenziere sie lokal. Alles sauberer, als aus einem Apfel eine halbe Birne zu machen ...

    viele Gruesse
      Stefan Muenz

    1. Hi!

      dl-Listen sind fuer Glossare.

      Sorry, das stimmt so nicht. Die HTML-Recommendation ist, was das die Bedeutung von dl-Listen betrifft, recht schwammig und beschränkt diese mitnichten auf Glossare.

      Gruß!

      1. Hallo Gagamehl,

        Sorry, das stimmt so nicht. Die HTML-Recommendation ist, was das die Bedeutung von dl-Listen betrifft, recht schwammig und beschränkt diese mitnichten auf Glossare.

        Du spielst vermutlich auf diesen Satz an: "Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."

        Aber muss ich alles, was das W3C schreibt, fuer gut befinden? Nein, muss ich nicht. "Definition list", "definition term" und "definition description" sind eindeutige Termini. Warum sollte man diese aufweichen? Dann haetten sie HTML halt mit allgemeineren Elementen ausstatten sollen, und nicht nur vorzugsweise mit solchen, die fuer wissenschaftliche Publikationen oder fuer Software-Dokumentation geeignet sind.

        Wenn Sprache lauter "schwammige" Bedeutungen transportiert, verliert sie ihre Praezision und damit viel von ihrem Wert. Bei natuerlichen Sprachen wird Vieldeutigkeit noch durch kommunikativen Kontext abgefangen, aber Markupsprachen sollen ja gerade den Zweck haben, Inhalte klar und praezise auszuzeichnen.

        viele Gruesse
          Stefan Muenz

        1. Hallo Stefan,

          Aber muss ich alles, was das W3C schreibt, fuer gut befinden? Nein, muss ich nicht. "Definition list", "definition term" und "definition description" sind eindeutige Termini. Warum sollte man diese aufweichen? Dann haetten sie HTML halt mit allgemeineren Elementen ausstatten sollen, und nicht nur vorzugsweise mit solchen, die fuer wissenschaftliche Publikationen oder fuer Software-Dokumentation geeignet sind.

          Wenn Sprache lauter "schwammige" Bedeutungen transportiert, verliert sie ihre Praezision und damit viel von ihrem Wert. Bei natuerlichen Sprachen wird Vieldeutigkeit noch durch kommunikativen Kontext abgefangen, aber Markupsprachen sollen ja gerade den Zweck haben, Inhalte klar und praezise auszuzeichnen.

          wenn Sprache zuwenig Umfang hat, verliert sie ebenso ihre Praezision.

          Die Unschärfe kommt dann eben durch die Hintertür, DIV ist da auch kein Allheilmittel.

          Allerdings könnte auch die womöglich angestrebte Quelltextästhetik hinterfragt werden.

          Dir geht es ja darum "Inhalte klar und praezise auszuzeichnen", und da soll die Verwendung
          von DIV die stimmigen Elemente entlasten.
          Kann es (DIV) m.E. wie schon geschrieben nicht hinreichend, aber die Abneigung gegen eine
          DIV-Suppe hat natürlich dort wo sie nicht mehr durch Wartbarkeit, Lesbarkeit begründet
          werden kann vielleicht auch scheinbar irrationale Komponenten.

          Auch bei der Antwort von molily "Es erscheint mir viel intuitiver, hier hX-Elemente zu verwenden."
          wird es vielleicht deutlich.
          Welchen Zusammenhang die Zwischenüberschriften der News zum übrigen Gesamtdokument haben
          ist vielleicht ähnlich problematisch wie die Frage welchen Zusammenhang Navigationen zum
          übrigen Text haben. Da ein DIV die Teile ja nicht aus dem Kontext herausnimmt führt (auch)
          ein DIV zu einer geringeren Präszision der sonstigen Elemente.

          Dass nun eine Liste (ohne jetzt ul/dl zu differenzieren) noch problematischer sein soll als
          ein DIV scheint mir erstmal nicht nachvollziehbar, dass aber im jeweiligen Abschnitt (DIV kann
          das wohl nicht leisten, also p oder li?) ein Hx fehlen könnte scheint mir schonmal plausibel.

          Grüsse

          Cyx23

          1. Hi,

            Auch bei der Antwort von molily "Es erscheint mir viel intuitiver, hier hX-Elemente zu verwenden."
            wird es vielleicht deutlich.
            Welchen Zusammenhang die Zwischenüberschriften der News zum übrigen Gesamtdokument haben
            ist vielleicht ähnlich problematisch wie die Frage welchen Zusammenhang Navigationen zum
            übrigen Text haben.

            Wieso? Eine Überschrift bezieht sich ganz klar auf den/die folgenen Absatz/Absätze. Die Struktur wird somit allein mit HTML deutlich hervorgehoben.

            freundliche Grüße
            Ingo

            1. Hallo Ingo,

              Auch bei der Antwort von molily "Es erscheint mir viel intuitiver, hier hX-Elemente zu verwenden."
              wird es vielleicht deutlich.
              Welchen Zusammenhang die Zwischenüberschriften der News zum übrigen Gesamtdokument haben
              ist vielleicht ähnlich problematisch wie die Frage welchen Zusammenhang Navigationen zum
              übrigen Text haben.

              Wieso? Eine Überschrift bezieht sich ganz klar auf den/die folgenen Absatz/Absätze. Die Struktur wird somit allein mit HTML deutlich hervorgehoben.

              die von mir da auch unterstellte Abbildung einer weitergehenden, etwa hirarchischen, Struktur
              durch die Überschriften ist wohl erstmal so gar nicht gegeben und wäre indirekt die Aufgabe
              von gruppierenden Elementen (die gibt es wohl schon als Entwurf?).
              Dann ist aber vielleicht noch unklarer wieweit sich eine Überschrift auf folgende Absätze
              beziehen mag, oder was aus der Wichtigkeit einer Überschrift abgeleitet werden kann.

              Grüsse

              Cyx23

    2. Hallo,

      Mensch, pack das Zeug in eine ordentliche div-Struktur. Dann hast du gleich neutrale Blockelemente ohne unbekannte Browser-Defaults fuer margin und padding. Um die Sache "semantisch" auszuzeichnen, kannst du mit Klassennamen arbeiten, z.B.:
      <div class="news">
        <div class="news_title">...</div>
        <div class="news_text">...</div>
      </div>

      Das Dokument enthält News-Einträge. Es hat vermutlich den Titel »Aktuelles«, »Neuigkeiten« oder ähnlich. Es stellt wahrscheinlich eine Sequenz von chronologisch geordneten Meldungen dar, bestehend aus Titel und mehreren zugehörigen Textabsätzen. Das ist für mich die klassische Dokumentstruktur, für die HTML prädestiniert ist: Die Titel sind Zwischenüberschriften, die sich wie in wissenschaftlichen Dokumenten auf den darauffolgenden Abschnitt beziehen. Es erscheint mir viel intuitiver, hier hX-Elemente zu verwenden.

      HTML hat nun mal keine Elemente fuer alle Faelle. Also ist es sinnvoller, in den Faellen, wo man - semantisch gesehen - ein nicht abgedecktes Element verwenden will, auf neutrale divs oder spans auszuweichen, statt irgendwelche Elemente mit konkreter semantischer Bedeutung "zurechtzuinterpretieren".

      Das Grundvokabular, mit der sich ein HTML-Dokument strukturieren lässt, ist tatsächlich klein, kann naturgemäß nicht alle Anforderungen abdecken und verführt die Webseitenschreiber zu metonymischer oder metaphorischer Verwendung.
      Es geht hier aber nicht nur um optimale Semantik (bestmögliche Datenstrukturierung und -speicherung) - denn dann würde man, wie du schreibst, nicht HTML verwenden -, sondern eher um die praktische Notwendigkeit, die Inhaltsstruktur über die vorhandenen Elemente abzubilden, weil diese von Clients und Browsern direkt verstanden werden. Neutrale Elemente mit Klassen ermöglichen es, eigene Begrifflichkeiten zu erfinden. Eigentümlichkeit und Unterscheidbarkeit bekommen sie durch ein Stylesheet, welches eine unterschiedliche Ausgabe vorschreibt.
      Der springende Punkt in der Semantikdebatte ist gerade die Einigung auf das HTML-Vokabular. Eine Überschrift als div mit einer Klasse auszuzeichnen, ist problematisch, weil die Vermittlung der Information vom Stylesheet (für eine ganz bestimmte visuelle Ausgabe) abhängt. Bei einem hX-Element ist kann mir jeder noch so eigenartige Browser ohne Notwendigkeit des Stylesheets vermitteln, dass es sich um eine Überschrift handelt. Man kann von Überschrift zu Überschrift springen, man kann sich eine Inhaltsübersicht generieren lassen usw. Die »unbekannten Browser-Defaults« sind gerade die Stärke von HTML: Unabhängigkeit des Ausgabemediums und Vielfalt der Rezeptions- und Verarbeitungsformen. Jeder Client, zum Beispiel auch eine Suchmaschine, kann diese Information einfach nutzen, weil sich die Seite in den Grundzügen an das vorgegebene Vokabular hält. Deshalb ist »semantische« Auszeichnung dieser Art überhaupt das Fundament der Accessibility, und darum dreht sich die »Trennung von Struktur und Layout«. Div-Suppe, bei der alle Bedeutung in selbst definierten Klassen steckt, kann prinzipiell nicht leisten, was Auszeichnung mit den vordefinierten Elementen vermag. Eine Auszeichnung, die allein im Code ersichtlich ist und zum Benutzer nicht (hinreichend zuverlässig) durchdringt, ist für den Benutzer (in vielen Fällen) wertlos.

      Oder - wenn du die radikale XHTML-Schiene fahren willst - bastel dir eine XML-DTD fuer die Newsliste

      Damit verzichtet man gleichzeitig auf die Zugänglichkeit von HTML-Auszeichnung.

      Mathias

      1. Hi molily,

        Es erscheint mir viel intuitiver, hier hX-Elemente zu verwenden.

        Einverstanden.

        HTML hat nun mal keine Elemente fuer alle Faelle.
        Das Grundvokabular, mit der sich ein HTML-Dokument strukturieren lässt, ist tatsächlich klein, kann naturgemäß nicht alle Anforderungen abdecken und verführt die Webseitenschreiber zu metonymischer oder metaphorischer Verwendung.

        Als "metaphorische Verwendung" könnte ich die Verwendung von Tags für Inhalte verstehen, die teilweise ähnliche Inhalte erfassen. Was aber verstehst Du hier unter "Metonymie"? Die (unbewusst oder konventionell motivierte) Verschiebung von Referenzen auf andere Inhalte?

        Der springende Punkt in der Semantikdebatte ist gerade die Einigung auf das HTML-Vokabular. .... Man kann von Überschrift zu Überschrift springen, man kann sich eine Inhaltsübersicht generieren lassen usw.

        Es gibt nur wenige Tags, die wirklich einen solchen Nutzen haben, vielleicht title, das aber in zwei Funktionen auftaucht, vielleicht einige Metatags, vielleicht p und Listentags. Das Vokabular von HTML reicht für eine sehr grobere formale Strukturierung, es wird überstrapaziert, wenn man glaubt, damit wirklich differenziert Inahlte beschreiben will.

        Oder - wenn du die radikale XHTML-Schiene fahren willst - bastel dir eine XML-DTD fuer die Newsliste
        Damit verzichtet man gleichzeitig auf die Zugänglichkeit von HTML-Auszeichnung.

        Das HTML-Markup dient für mich hauptsächlich als Anker für externe Formatierungen, die Rede von der Semantik ist für mich unglaubwürdig, weil der Informationswert gegen Null tendiert. Der Nutzen einer möglichst einheitlichen Verwendung bestimmt sich für mich vor allem in der zentralen Verwaltung von Formatvorlagen.

        Viele Grüße
        Mathias Bigge