untief.org

Simplequiz #7: ein Pinterest-Pin in HTML5

veröffentlicht
2013-01-28
verschlagwortet
HTML

Beim aktuellen Simplequiz (von html5doctor.com) Simplequiz #7: Pinterest soll ein Post auf pinterest.com mit HTML5 ausgezeichnet werden.

Ausgangsmarkup für dieses Quiz


<div class="pin">

  <div class="pin-holder">
    <div class="actions">
      <a href="#repin">Repin</a>
      <a href="#like">Like</a>
      <a href="#comment">Comment</a>
    </div>

    <a href="me/cat/">
      <img src="cat.jpg" alt="My awesome cat">
    </a>

  </div>

  <p>Awesome cat description.</p>

  <p class="stats">
    <span>25 likes</span>
    <span>2 comments</span>
    <span>100 repins</span>
  </p>

  <div class="convo">
    <a href="/me/">
      <img src="me.jpg" alt="Profile picture of me">
    </a>
    <p><a href="/me/">Me</a> onto <a href="/here/">here</a></p>
  </div>

</div>

Zu den vorgeschlagenen Antwortmöglichkeiten

Von den vorgeschlagenen fünf Antwortmöglichkeiten halte ich keine für angemessen.

Kein article für die Angabe des Autors

Bei Antwort A, B und C wurde die Angabe des Autoren (und der Kategorie) in ein article-Element gepackt. Bei dem abgebildeten Beispiel ist das völlig unverständlich. Wenn man jedoch (wie Pinterest das wohl macht) Kommentare und Repins anderer Nutzer unterhalb der Autorenangabe auflistet und zudem auch noch identisch gestaltet, wird klar, warum man hier auf die Idee kommen könnte, article zu verwenden. In meinen Augen ist das jedoch falsch. Die beiden Parts, also die Angabe des Autoren und folgende Repins und Kommentare, befinden sich nicht auf einer inhaltlich gleichen Ebene (sie sehen bloß so aus). Ein analoges Beispiel bei Weblogs wäre, wenn der Autor eines Eintrags sowie Kategorien/Tags im ersten Kommentar dieses Eintrags stehen würden. Es spielt dabei keine Rolle, dass bei Pinterest der Content nicht wirklich von dem angegebenen Autor stammt, sondern vermutlich von ihm gerepinnt wurde. Das hat keinen Einfluss auf die Auszeichnung.

Kein figure (mit figcaption) für den Hauptinhalt

Bei Antwort C und D wird für den Hauptinhalt ein figure-Element mit einem figcaption-Element verwendet. Diese Verwendung ist jedoch nicht durch die Spezifikation gedeckt. figure stellt zwei Bedingungen an den Inhalt: er muss self-contained sein (trifft zu) und er muss typically referenced as a single unit from the main flow of the document sein (trifft nicht zu). Nun könnte man argumentieren, dass typically eben auch andere Fälle zuließe. Im zweiten Satz der Definition heißt es jedoch:

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.

Ich denke, es ist klar, worauf die Definition abzielt. Auf der Pinterest-Startseite (die die populärsten Pins auflistet) oder auf einer Pin-Detailseite lässt sich dieses figure-Element weder entfernen, ohne den flow of the document zu beeinflussen, noch wird auf diese Postings im main content verwiesen, denn es gibt in diesen Fällen ja gar keinen anderen Main-Content der verweisen könnte, denn stellen ihn ja selber dar.

Jedoch ist diese zweite Bedingung wohl nicht normativ, das heißt, man könnte nach dieser Argumentation figure für jeden Inhalt verwenden, der self-contained ist.

Keine section als Container

Antwort D verwendet ein section- statt einem article-Element. Dabei trifft die Definition von article in allen Punkten perfekt auf dieses Beispiel zu. section wäre hier nicht falsch, jedoch gibt es mit article ein Element, das besser passt.

Kein div als Container

Antwort E verwendet gar kein Sectioning-Element als Container, sondern ein div. Wäre per se nicht falsch, jedoch ergibt sich ein Fehler im Outline, da dieses div Sectioning-Elemente enthält: das aside-Element mit den Statistiken befindet sich nicht innerhalb des article-Elements. Dadurch stehen diese Statistiken nicht in Relation zum article (und zum div ja sowieso nicht), sondern zum gesamten Dokument (bzw. zur nächsthöheren Section). Es geht also flöten, dass dieses Statistiken zu einem bestimmten Pin gehören.

Mein Vorschlag

Ich fange beim Groben an und ende bei den Details. Daher behandele ich im ersten Schritt, wie ich das Beispiel in Sections (section, article, aside oder nav) einteile und wie ich den Hauptinhalt jeder Section herausstelle, indem ich die „Metadaten“ der Section auszeichne (header, footer oder address). Im zweiten Schritt begebe ich mich an das „kleinteilige“ Markup und zeichne den eigentlichen Inhalt aus. Am Ende gibt es mein Ergebnis.

Das Grobe

Woraus besteht so ein einzelner Pinterest-Post? Ich denke, man kann ihn in fünf Bereiche einteilen:

Container: article oder section?

Es ist klar, dass für einen einzelnen Pinterest-Post ein umschließendes Sectioning-Element verwendet werden sollte. In Frage kämen article oder section. Ich denke, das article-Element ist hier die richtige Wahl. Jeder Post ist eine eigenständige Komposition, die einen eigenen Autor, ein eigenes Veröffentlichungsdatum, eine eigene URL etc. hat (bzw. haben könnte). In einem Feed würde man jeden Post als separaten Eintrag ausliefern. In einem Blog wären es die einzelnen Blogposts, in einem Webshop die Artikel. Das bedeutungslose div (mit der Klasse pin) ersetzen wir also mit einem article.

Hauptinhalt

Das Bild und die Beschreibung stellen den Hauptinhalt eines Posts dar. Eine gesonderte Auszeichnung ist dafür nicht nötig, schließlich haben wir dafür das article-Element verwendet. Wir müssen nur dafür sorgen, dass alles, was nicht zum Hauptinhalt gehört, „abgesondert“ wird, indem man es in eigene Sections packt oder mit address, footer oder header auszeichnet.

Statistiken: aside oder footer

Die Statistiken sind Metadaten dieses Posts. Da kommen zwei Elemente in Frage: aside oder footer. Von der Definition her scheinen beide zu passen. Ein footer-Element typically contains information about its section, während ein aside-Element content that is tangentially related to the content around the aside element, and which could be considered separate from that content enthält. Der Hauptunterschied: aside ist ein Sectioning-Element und erzeugt somit einen Eintrag im Outline des Dokuments, footer nicht. Das footer-Element passt in meinen Augen hier besser, denn Statistiken sind wohl mehr als nur tangentially related.

Autor/Quelle/Kategorie: footer

Der untere Bereich, der u. a. Avatar und Namen (beides verlinkt mit dem Profil) des Autors enthält, gehört in ein footer-Element. Hier ist die Spezifikation eindeutig: A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like..

Man könnte diesen Part innerhalb des footer-Elements in ein address-Element stecken, da es sich insofern um Kontaktinformationen für diesen article handelt, als das Profil des Autors verlinkt ist. Jedoch enthält der Satz auch einen Link zur Kategorie, die ja nicht für eine Kontaktaufnahme relevant sein dürfte (must not contain information other than contact information). Außerdem bietet Pinterest (zumindest Gästen) gar keine Möglichkeit an, einen User über sein Profil zu kontaktieren. Damit hätte sich address eh erledigt (und könnte ggf. nur dann hinzugefügt werden, wenn der Besucher eingeloggt ist).

Kommentare: article

Für die Auflistung von Kommentaren und Repins bieten sich eigene article-Elemente an, wie eindeutig in der Spezifikation angeführt wird:

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Die Angabe des Autors sieht bei Pinterest wie ein Repin aus, semantisch handelt es sich dabei aber ja nicht um einen Repin, sondern um die Autorenschaftangabe (auch falls es nur gerepinnt wurde). Daher verbleibt der eigentliche Autor im footer, während folgende Repins/Kommentare in jeweils eigene article-Elemente kommen.

Aktionen: aside, menu (in aside oder footer) oder

Nun zum Bereich mit den drei Aktionen. Hier kommen drei Elemente in Frage: aside, nav oder menu (in aside oder footer).

Das header-Element kommt hier nicht in Frage, da diese drei Aktionen kaum als introductory or navigational aids gelten dürften.

nav und aside sind beides Sectioning-Elemente. Wenn die Wahl darauf fiele, welches würde ich nehmen? Es stellt sich die Frage: Führen die Links zu Abschnitten auf der Seite bzw. zu anderen Seiten? Dann wäre das nav-Element die richtige Wahl. Das vielzitierte for sections that consist of major navigation blocks ist übrigens nur eine Note, hat also keinen normativen Charakter. Aber abgesehen davon, es würde sich hier durchaus um die major navigation dieses article-Elements handeln, wenn es denn tatsächlich klassische Links und nicht doch eher typische Buttons wären. Ohne den tatsächlichen Workflow von Pinterest zu kennen, vermute ich, dass es sich bei »Like« um eine sofortige Aktion handelt, bei der keine andere Seite geladen oder keine weitere Nutzereingabe erforderlich ist. Demnach wäre es kein guter Kandidat für nav. »Comment« hingegen schon, denn da dürfte ja vermutlich ein Kommentarformular auf einer gesonderten Seite (bzw. in einem Abschnitt auf der Seite) aufgerufen werden. »Repin« befindet sich womöglich irgendwo dazwischen. Ich würde diese drei Aktionen aber nur ungerne trennen. Daher würde ich hier eher zum aside-Element tendieren.

Aber was ist mit dem menu-Element? Die Definition represents a list of commands hört sich passend für diese drei Aktionen an. Da wir hier weder ein Kontextmenü noch eine Toolbar benötigen, kommen wir mit dem Defaulttype list aus (und dürften uns somit keine großartigen Sorgen um Browsersupport machen müssen). Wir ersetzen das div (mit der Klasse actions) also mit menu. Damit es vom Hauptinhalt getrennt wird, sollte man das menu innerhalb von aside verwenden (innerhalb von footer ginge vielleicht auch, passt aber in meinen Augen nicht ideal, da es sich bei den Aktionen ja nicht wirklich um Metadaten des article-Elements handelt).

Die Details

div entfernt

Das div mit der Klasse pin-holder dient im Beispiel-Markup wohl nur als Hook für CSS/JS. Da es für die Frage der Auszeichnung nicht relevant ist, lasse ich es hier weg. Falls es als Hook benötigt wird, kann man es natürlich wieder hinzufügen.

Liste für Aktionslinks

Jede Aktionslink innerhalb des menu-Elements wird in ein li-Element gepackt:


    <menu class="actions">
      <li><a href="#repin">Repin</a></li>
      <li><a href="#like">Like</a></li>
      <li><a href="#comment">Comment</a></li>
    </menu>
Statistiken sind kein Paragraph

Die Statistiken (im p mit der Klasse stats) stellen keinen paragraph dar (a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic). Hier greifen wir zu einem div. Die enthaltenen einzelnen Statistiken sollten statt mit span besser mit div umschlossen werden, denn sonst würden sie (z. B.) in Textbrowsern in einer Zeile ohne Abstand zueinander dargestellt werden. Eine Liste (ul) wäre aber auch möglich.


    <ul class="stats">
      <li>25 likes</li>
      <li>2 comments</li>
      <li>100 repins</li>
    </ul>
Link-Type bookmark

Das Bild ist mit dem Permalink des Postings verlinkt. Daher bekommt dieser Link den rel-Wert bookmark:


    <a href="me/cat/" rel="bookmark">
      <img src="cat.jpg" alt="My awesome cat">
    </a>
Link-Type author

Den beiden Links zum Profil des Autoren würde ich den rel-Wert author geben. Das ist möglich, da wir article als Sectioning-Element verwendet haben, denn andernfalls würde sich die Autorenschaft auf das gesamte Dokument beziehen, so nur auf den Inhalt des jeweiligen article.


      <a href="/me/" rel="author">
        <img src="me.jpg" alt="Profile picture of me">
      </a>
      <p><a href="/me/"  rel="author">Me</a> onto <a href="/here/">here</a></p>

Endergebnis

Nach all den beschriebenen Änderungen ergibt sich also folgendes Markup:



<article class="pin">

  <aside>
    <menu class="actions">
      <li><a href="#repin">Repin</a></li>
      <li><a href="#like">Like</a></li>
      <li><a href="#comment">Comment</a></li>
    </menu>
  </aside>

  <a href="me/cat/" rel="bookmark">
    <img src="cat.jpg" alt="My awesome cat">
  </a>

  <p>Awesome cat description.</p>

  <footer>

    <ul class="stats">
      <li>25 likes</li>
      <li>2 comments</li>
      <li>100 repins</li>
    </ul>

    <div class="convo">
      <a href="/me/" rel="author">
        <img src="me.jpg" alt="Profile picture of me">
      </a>
      <p><a href="/me/" rel="author">Me</a> onto <a href="/here/">here</a></p>
    </div>

  </footer>

</article>

Falls auch die Reihenfolge der einzelnen Bereiche im Markup geändert werden darf, würde ich das aside hinter den Hauptinhalt (img und p) setzen.