Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 für Webdesigner

Eigenständige inhaltliche Abschnitte mit <article>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Das Element article ist für eigenständige inhaltliche Abschnitte wie etwa Blog-Beiträge gedacht und wird oft mit dem allgemeineren section verwechselt. Dieser Film erklärt sowohl article als auch die Unterschiede zu section.

Transkript

Das Element "article" in HTML5 dient zur Gruppierung von in sich geschlossenen Inhalten. Es ist also recht verwandt mit "section". Ich bin hier wieder bei html5doctor.com im Elementindex und scrolle mal runter bis zum "article". Hier ist er schon. "Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site". Das ist ein Satz. Also: ein "article" ist ein Abschnitt - ein "section", daher die Ähnlichkeit, das wird und gleich noch beschäftigen: "article" und "section" - ein Abschnitt auf einer Seite, der eine Komposition enthält und unabhängig ist, das ist das wichtige Wort. "Independent part of a document or page". Es ist also, halten wir mal fest, sehr ähnlich wie "section". Beispiele sind ein Forumsbeitrag, ein Artikel in einem Magazin oder einer Zeitung, ein Blogbeitrag, ein Kommentar, ein user-submitted-Kommentar unter einem Beitrag z.B. Das wäre laut W3C auch ein "article". Oder "any other independent item of content". Ich gehe mal direkt auch den Artikel hier zur Prognose der Doktoren von Mai 2010 hier und scrolle mal kurz runter. Der Artikel ist relativ lang, das kann man hier am Scrollbar sehr schön sehen. Ich wähle jetzt mal wieder hier in der Web Developer Toolbar "Kontur - eigene Elemente" und lasse mal die "article" anzeigen. Wenig überraschend ist der Artikel über die article-Element ausgezeichnet mit einem "article". Das haben wir schon erwartet hier. Wir rollen runter, oder ich rolle hier ein Stück runter, Sie folgen einfach mit Ihren Augen. Das dauert einen kleinen Moment, bis wir unten ankommen. Hier gibt es alle möglichen "use cases", alle möglichen Beispiele. Jetzt wird es spannend, denn jetzt kommen die Kommentare. Und Sie sehen: tatsächlich, auch die Kommentare sind als "article" ausgezeichnet, also hier im Markup. Da gibt es so viele Kommentare zu, die will ich Ihnen jetzt nicht alle zeigen. Ein "article" ist in sich geschlossen und als "smelltest", wie er das hier nennt, so als Schnifftest - "ist der Pullover noch gut, kann ich den noch anziehen? - als "easy smelltest": "Would this make sense in an RSS feed?" Also könnte man diesen Beitrag, dieses Stück Inhalt, unabhängig von der Seite in einem Feed wieder betrachten? Dann wäre es ein Fall für "article". Ansonsten könnte man auch das etwas neutralere "section" nehmen, wenn die Inhalte einfach nur zusammengehören. Das ist hier unten: "A

containing
s". Sie sehen, das geht. Ein "article" kann auch wiederum "sections" enthalten. Hier kommt der Unterschied zwischen "article" und "section": "There's been a lot confusion and there still is". Es gibt immer noch jede Menge Unterschiede, und das ist auch nicht immer ganz eindeutig. Aber erstens: wenn der Inhalt Sinn ergibt in einem Feedreader, also getrennt von der Seite, dann kann man "article" nehmen. Wenn der "content", der Inhalt, einfach nur zusammengehört, dann nimmt man "section"", und wenn es überhaupt keine semantische Bedeutung gibt, dann nimmt man "div". Also wenn man nur gestalten will, nimmt man das "div", wenn die ein bisschen zusammengehören, nimmt man "section", und wenn die ganz doll zusammengehören, dann nimmt man "article". Um das ein bisschen genauer zu zeigen, gehe ich hier mal auf die Startseite und hebe hier jetzt "article" und "section" hervor. Also "articles" kommen in rot, und "section" in blau. Hier ist ein "article". Das ist die Einleitung, das passt schon. Und jetzt kommt hier die schon gesehenen "sections", und untendrunter wieder "section", diesmal mit mehreren Artikeln. Sie sehen, wie die hier zusammengehören. Das heißt also, ein "section" kann Teil eines Artikels sein, kann aber auch in der Hierarchie über einem Artikel stehen. Hier sehen wir das schon ein bisschen: "article" ist ein spezialisiertes section-Element, wenn man so will. Hier, für diesen Artikel, kann man hier natürlich auf eine "section" nehmen. Da das aber ein Blogbeitrag-Intro ist, könnte man sich das in einem Feed wieder vorstellen. Also nimmt man das etwas spezialisiertere "article". Auf dieser Seite sehen Sie das sehr schön. Hier in blau die ganzen "sections", und rot umrandet die ganzen  "articles". Ich wechsle mal in den Editor. Auf der Beispielseite wird das ganz kurz-- nein nicht im Header, sondern ein Stück weiter unten, in "main", will ich hier einfach diesen Inhalt als "article" auszeichnen. Der bekommt erstmal keine Klasse und keine ID, die braucht er nicht, weil er ist bis jetzt ja der einzige "article", der hier überhaupt erscheint. Ein spezialisiertes "section", wenn man so will, das das Zusammengehören dieses Inhaltes im Markup dokumentiert. Das wäre alles, die "sections" steht hier in der Sidebar. Je mehr Inhalte kommen, kann man das wieder weiter unterteilen. Dann werden wir das noch mal neu bewerten. Hier die Zusammenfassung: "article" ist ein eigenständiger inhaltlicher Abschnitt - während "sections" nicht inhaltlich eigenständig sein müssen - ist also ein spezialisiertes "section" - "article" ist ein spezialisiertes "section". Gilt im Allgemeinen für Blogbeiträge, Artikel, Forenbeiträge usw., gilt auch für Artikel in Shops. Die Namensähnlichkeit ist umwerfend. Gilt aber auch, und da wird es ein bisschen komisch, es gibt kein Element, das heißt "comment". Das würden viele Leute gerne haben, aber das gibt es nicht. Stattdessen soll man "article" benutzen, wobei man dann, wenn da jemand Kommentare drunterschreibt und sagt: "Jo, finde ich auch!" Ob das nun ein eigenständig inhaltlicher Abschnitt auf einer Seite ist, sei mal dahingestellt. Ein Test, ob man "article" benutzt oder doch lieber das etwas allgemeinere "section" könnte sein, wenn es per RSS in einem Feedreader verbreitet werden kann, dann ist es ein "article".

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!