Beim aktuellen Simplequiz (von html5doctor.com) Simplequiz #7: Pinterest soll ein Post auf pinterest.com mit HTML5 ausgezeichnet werden.
<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>
Von den vorgeschlagenen fünf Antwortmöglichkeiten halte ich keine für angemessen.
article
für die Angabe des AutorsBei 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.
figure
(mit figcaption
) für den HauptinhaltBei 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.
section
als ContainerAntwort 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.
div
als ContainerAntwort 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.
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.
Woraus besteht so ein einzelner Pinterest-Post? Ich denke, man kann ihn in fünf Bereiche einteilen:
Cats Cats Cats!! :-))
1 like,
2 repins)
me), Quelle (nicht im Beispiel enthalten) und Kategorie (
here)
Repin,
Like,
Comment)
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
.
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.
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
enthält. Der Hauptunterschied: aside
element, and which could be considered separate from that contentaside
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
.
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).
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 innerarticle
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 asarticle
elements nested within thearticle
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.
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).
div
entferntDas 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.
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>
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>
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>
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>
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.