Marc: Semantik-Tick

Hallo zusammen,

folgendes Konstrukt finde ich immer noch schwer in semantisch korrektes HTMl umzustzen. Daher meine Frage an Euch alle:

Wie würdet Ihr so etwas auszeichnen (Die h2 habe ich immerhin schon)?

<h2>Informationen</h2>  
<container>  
  <heading>Title</heading</>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
</container>  
<container>  
  <heading>Title</heading</>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
</container>  
<container>  
  <heading>Title</heading</>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
  <label>Description</label>: <content>DB-Ausgabe</content>  
</container>  

Beispiel:

Faust, erster Teil

  • Autor: Goethe
  • Genre: Drama
  • Einordnung: Klassiker

Die Glocke

  • Autor: Schiller
  • Genre: Lyrik
  • Einordnung: Klassiker

Die Geschichte der N.

  • Autor: Haunschild
  • Genre: Erzählung
  • Einordnung: Moderne

Viele Grüße,
Marc.

--
Und immer schön
validieren (http://validator.w3.org/)
  1. Für mich wäre das klar eine Definitionsliste:

    <dl class="book">  
      <dt class="title">Titel</dt><dd class="title">Faust, erster Teil</dd>  
      <dt class="author">Autor</dt><dd class="author">Goethe, Johann Wolfgang von</dd>  
      <dt class="genre">Genre</dt><dd class="genre">Drama</dd>  
      <dt class="classification">Einordnung</dt><dd class="classification">Klassiker</dd>  
    </dl>
    

    Gruß, LX

    --
    RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)
    1. Hallo LX,

      Für mich wäre das klar eine Definitionsliste:

      Du hast recht. Ich hatte immer gedacht, eine dl ist eine Definitionsliste - nachdem ich nun mal die Specs gelesen habe, ist mir klar. Dass das Quatsch ist. Daher wird es eine dl...

      Danke Dir!

      Viele Grüße,
      Marc.

      --
      Und immer schön
      validieren (http://validator.w3.org/)
      1. Gern geschehen. Ich entscheide in Sachen Semantik nach einem einfachen Schema:

        • Haben die Daten eine strukturelle oder logische Zusammengehörigkeit?
            - dann gehört ein Tag darum (bspw. div, p, span).

        • Heben sich die Daten in ihrer impliziten Bedeutung von anderen Daten innerhalb der gleichen Struktur ab?
            - dann gehört ebenfalls ein Tag darum (bspw. h1, blockquote, code, em, strong).

        • Hat diese Zusammengehörigkeit mehrere Dimensionen?
            - Wenn sich diese nicht durch key-value-Gruppen abbilden lassen, dann (und nur dann) braucht es eine Tabelle, ansonsten ist dl das richtige Tag.

        • Spielt die Reihenfolge eine Rolle?
            - ol, ansonsten ul.

        • Läßt sich das Datenmodell nicht in einer einzelnen Struktur abbilden?
            - Kombiniere die vorhandenen Strukturen.

        Ergebnis: Semantik :-)

        Gruß, LX

        --
        RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)
        1. Ergebnis: Semantik :-)

          Was muss ich jemandem Antworten, der mich nach dem Sinn einer solchen Strukturierung fragt?
          Man könnte ja auch alles mit <div>, <span> und entsprechenden CSS-Klassen machen. Dann hat man keine "HTML-Semantik", aber am Ende wird es gleich aussehen.

          1. Hallo,

            Man könnte ja auch alles mit <div>, <span> und entsprechenden CSS-Klassen machen. Dann hat man keine "HTML-Semantik", aber am Ende wird es gleich aussehen.

            das mag schon sein, aber nach Aussehen ist ja nicht gefragt. Sondern nach einer semantischen (d.h. strukturell sinnvollen) Auszeichnung des Inhalts.
            Wenn es ums Aussehen ginge, wären wir beim Thema CSS.

            Ciao,
             Martin

            --
            F: Was macht ein Offizier, der in der Nase bohrt?
            A: Er holt das Letzte aus sich heraus.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Hallo,

              vielen Dank für die vielen Antworten. Die Lösung lautet: eine Beschreibungsliste (dl) muss hier verwendet werden.

              Nein, das war mir von Anfang nicht klar. Und wie LX schon andeutete, kommt es wie immer drauf an, was richtig ist.

              In meinem Fall hatte ich ein Problem damit, in den wiederkehrenden "Labels" Titel, Autor usw einen zu definierenden Begriff (Term) zu sehen, der eine Definitonsliste rechtfertigen würde. Aber dann habe ich die Specs noch mal nachgelesen un etwas verwundert festgestellt, dass sich da etwas in meinem Kopf entweder von der Wahrheit wegentwickelt hat oder dass in HTML5 dl neuerdings für description list steht. Ich habe jetzt in den HTML4-Standards nicht mehr nachgelesen. Jedenfalls steht dl für eine Beschreibungsliste und: mit dt wird nciht unbedingt ein zu defienierender begriff ausgezeichnet. Dafür müsste noch zusätzlich das Element dfn verwendet werden. Ansonsten sind dt und dd eigentlich nur Pärchen, die etwas beschreiben und als solche für meinen speziellen Fall wunderbar geeignet, meine Inhalte semantisch sinnvoll darzustellen.

              Ich persönlich finde es schade, dass es kein Element für diesen Zweck gibt, so etwas wie label für inputs - ein Äquivalent für die Datenausgabe, dass man auch vor output setzen könnte...

              Viele Grüße,
              Marc.

              --
              Und immer schön
              validieren (http://validator.w3.org/)
              1. Hallo,

                hier noch mal zum nachlesen:
                HTML% -Description List

                Ich bin übrigens nicht der einzige, der denkt, dass dl für definition list steht:
                www.w3schools.com/html5/tag_dl.asp

                Aber das soll keine Entschuldigung sein...

                :-)

                Viele Grüße,
                Marc.

                --
                Und immer schön
                validieren (http://validator.w3.org/)
                1. [latex]Mae  govannen![/latex]

                  Ich bin übrigens nicht der einzige, der denkt, dass dl für definition list steht:
                  www.w3schools.com/html5/tag_dl.asp

                  w3schools ist in etwa so, als würde jemand mit gerade einem Tag Programmier-Erfahrung hier Tipps geben: Es kann durchaus korrekt sein, aber oft ist es falsch und/oder veraltet. ;)

                  w3schools hat seinen schlechten Ruf hart erarbeitet. Die Gegenbewegung hat zwar zur teilweisen Verbesserung in einigen Beschreibungen geführt, dennoch stimmt vieles nicht. Wobei ich sagen muß, daß für mein Verständnis ein paar Kritik-Punkte etwas überzogen und pedantisch sind.

                  Ein Beispiel:
                  www.w3schools.com/html/html_frames.asp.
                  Again, frames are considered among the very worst of practices in modern Web development. In fact, they are considered so bad, they are no longer valid in HTML5.

                  Das liest sich für mich wie eine generelle Kritik daran, daß Frames _überhaupt_ noch erwähnt werden. Zum Einen gibt es ein paar wenige(!) Anwendungsfälle, wo sie zumindest durchaus noch brauchbar sind, zum Anderen würde ich eine Dokumentation, die Frames überhaupt nicht erwähnt, mindestens genauso schlecht finden wie eine, die Frames ohne Warnung empfiehlt.

                  Leider ist das statische SelfHTML zumindest teilweise diesbezüglich inzwischen genauso wenig brauchbar, insofern darf man nicht _zu_ laut über andere schimpfen.

                  Stur lächeln und winken, Männer!
                  Kai

                  --
                  Dank Hixies Idiotenbande geschieht grade eben wieder ein Umdenken
                  in Richtung "Mess up the Web".(suit)
                  SelfHTML-Forum-Stylesheet
          2. Hallo!

            Semantik macht auf mehreren Ebenen Sinn:

            1. Entwicklung

            Wenn Markup semantisch eingesetzt wird, führt das normalerweise zu einer Diversität der jeweils verwendeten Tags, so dass schließende Tags leichter zu finden sind:

            vgl.
            <div><div><div></div><div></div><div></div></div></div>

            mit
            <div><ul><li></li><li></li><li></li></ul></div>

            Des weiteren sagt ein semantisches Markup auch etwas über den jeweiligen Inhalt aus, wodurch die Frage, welche Inhalte an welcher Stelle stehen sollten, leichter zu beantworten wird.

            2. CSS-Formatierung

            Ergänzen wir das oben gezeigte div-Beispiel mal in Gedanken mit class-Attributen, so dass wir die Tags gezielt formatieren können.

            Wenn wir jetzt die inneren div-Tags gezielt formatieren wollen, muss jedes von ihnen eine Klasse haben.

            Bei der Lösung mit dem ul können wir diesem die Klasse geben und die li-Tags gezielt mit ul.xy li selektieren (solange wir darin keine weitere ul verschachteln). Es gibt eine ganze Reihe derartiger Lösungen, die zu schlankerem, formatierbareren Code führen können, wenn man sie geschickt einsetzt.

            3. Barrierefreiheit

            Screenreader, wie sie von Sehbehinderten eingesetzt werden, nutzen semantisches Markup, um die Sprachausgabe gezielt zu steuern; gleichzeitig kann die semantische Schachtelung von Elementen zu einer besseren Navigierbarkeit für deren Nutzer führen.

            4. Suchmaschinenoptimierung

            Natürlich habe ich dafür keine handfesten Beweise (SEO ist zu großen Teilen der Versuch, der "Black Box" eines Suchalgorythmus ein bestimmtes Verhalten zu unterstellen), aber es geht in SEO-Kreisen das Gerücht, dass semantisches Markup angeblich Plus-Punkte beim Page-Rank geben soll.

            5. Support

            Wenn Du hier auf dem SelfHTML-Forum mit unsemantischem Code vorbeischaust, wird man Dich zwangsläufig mindestens darauf aufmerksam machen (semantischer Code liest sich einfach besser), wenn nicht sogar weniger bereitwillig helfen (je nachdem, wie unsemantisch Dein Code ist). Mit semantischem Code kann man auch anderen helfen, einem zu helfen.

            Gruß, LX

            --
            RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)
        2. @@LX:

          nuqneH

          - dann gehört ein Tag darum (bspw. div, p, span).

          Nein.

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. Entschuldige die fehlerhafte umgangssprachliche Nutzung dieser Begrifflichkeit und ersetze den fraglichen bitte gedanklich mit "Dann gehört der entsprechende Bereich in genau das Markup, dessen Bedeutung der Aussage des Inhalt am Nächsten kommt."

            Ich hoffe außerdem sehr, dass unser Fragesteller nicht von diesem Fehler davon abgehalten wurde, denn Sinn der Aussage zu verstehen - und dass er von der Neigung mancher Forenteilnehmer, an derartigen Ausrutschern notwendige Kritik zu üben, nicht verschreckt wird.

            Gruß, LX

            --
            RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. Allerdings ist das nicht notwendigerweise auch eine gute Idee...
  2. Faust, erster Teil

    • Autor: Goethe
    • Genre: Drama
    • Einordnung: Klassiker

    <h2>
    <table>
      <tr><th>Autor</th><td>Goethe</td>

    oder der Einfachheit halber auch

    <h2>
    <ul>
      <li>Autor: Goethe

    Man sollte sich vor Augen führen, dass HTML nicht wie etwa RDF/XML dazu gedacht ist, Aussagen zu formulieren. Wenn ich kein Interesse daran habe, »Autor:« irgendwie gesondert im DOM adressierbar zu machen, so würde ich es auch nicht entsprechend auszeichnen. Offenbar hast du schon eine Art XML-Rohformat, auf dem die Daten stammen. Die evtl. daraus maschinell generierte HTML-Repräsentation würde ich in dem Fall als flüchtig erachten.

    Mathias