Abschnitt gegen Artikel HTML5

201

Ich habe eine Seite, die aus verschiedenen "Abschnitten" wie Videos, einem Newsfeed usw. besteht. Ich bin etwas verwirrt, wie ich diese mit HTML5 darstellen soll. Derzeit habe ich sie als HTML5 <section>, aber bei näherer Betrachtung sieht es so aus, als wären sie das korrektere Tag <article>. Könnte mir jemand etwas Licht ins Dunkel bringen?

Keines dieser Dinge sind Blog-Posts oder "Dokumente" im wahrsten Sinne des Wortes, daher ist es schwierig zu erkennen, welches Element angewendet werden soll.

Prost

BEARBEITEN: Ich habe mich für die Verwendung des articleTags entschieden, da es sich anscheinend um ein Container-Tag für nicht verwandte Elemente handelt, bei denen es sich vermutlich um meine "Abschnitte" handelt. Der eigentliche Tagname-Artikel scheint jedoch eher irreführend zu sein, und obwohl sie sagen, dass HTML5 mit größerer Berücksichtigung für Webanwendungen entwickelt wurde , finde ich, dass viele Tags eher blog-zentriert / dokumentbasiert sind.

Trotzdem danke für deine Antworten, es scheint ziemlich subjektiv zu sein.

James Hay
quelle
5
es ist nicht wirklich wichtig. Verwenden Sie alles, was für Sie Sinn macht. Persönlich würde ich section's
Ilia Choly
@illia choly: Ich stimme dir zu, es gibt kein wirkliches Richtig oder Falsch.
Shirgill Farhan
1
Ordentliche

Antworten:

143

Auf der W3-Wiki-Seite zur Strukturierung von HTML5 heißt es:

<section>: Wird verwendet, um entweder verschiedene Artikel in verschiedene Zwecke oder Themen zu gruppieren oder um die verschiedenen Abschnitte eines einzelnen Artikels zu definieren.

Und zeigt dann ein Bild an , das ich aufgeräumt habe:

Geben Sie hier die Bildbeschreibung ein

Außerdem wird beschrieben, wie das <article>Tag verwendet wird (über denselben W3-Link oben):

<article>ist verwandt mit <section>, ist aber deutlich anders. Während <section>zum Gruppieren bestimmter Abschnitte von Inhalten oder Funktionen <article>verwandte einzelne eigenständige Inhalte wie einzelne Blog-Beiträge, Videos, Bilder oder Nachrichten enthalten sind. Stellen Sie sich das so vor: Wenn Sie über eine Reihe von Inhalten verfügen, von denen jedes für sich zum Lesen geeignet ist und die als separate Elemente in einem RSS-Feed syndiziert werden können, <article>ist dies zum Markieren geeignet.

In unserem Beispiel <section id="main">enthält Blogeinträge. Jeder Blogeintrag eignet sich zum Syndizieren als Element in einem RSS-Feed und ist sinnvoll, wenn er für sich allein und außerhalb des Kontexts gelesen wird. Daher <article>ist er perfekt für sie:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Einfach, oder? Beachten Sie jedoch, dass Sie Abschnitte auch in Artikeln verschachteln können, wenn dies sinnvoll ist. Wenn beispielsweise jeder dieser Blog-Beiträge eine konsistente Struktur unterschiedlicher Abschnitte aufweist, können Sie auch Abschnitte in Ihre Artikel einfügen. Es könnte ungefähr so ​​aussehen:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>
Justin
quelle
13
Zusätzlich: <main> kann verwendet werden, um die Elemente zwischen Kopf- und Fußzeile (blaue Blöcke aus dem Bild) zu umschließen. <figure> umschließt die Artikel oder Abschnitte mit Bildern.
Logikeinheit
2
Gut gemacht. Dies sollte die akzeptierte Antwort sein. Ich stimme der Logikeinheit zu, die Sie hinzufügen sollten main.
Chuck Le Butt
1
Sie sollten das Bild mit dem Abschnitt in Artikeln aktualisieren.
K - Die Toxizität in SO nimmt zu.
Ich habe das Gefühl, dass dieser Krieg zwischen Artikel und Abschnitt wegen der Verwirrung jetzt zu einem Krieg führen wird. Aber Justin Im 100% an Bord Ihrer Verwendung von Abschnitt über Artikel als Abschnitt gilt für Teile von Dokumenten (wie Sie gezeigt haben), in denen Artikel eigenständiger, unabhängiger Inhalt INNERHALB des Dokuments (und damit seiner Abschnitte) sind. Semantisch ist der Begriff "Abschnitt" nur als Ersatz für die alten Div-Abschnitte sinnvoller. Gut gemacht!
Stokely
1
Sie können auch <header> und <footer> im <article> verwenden, wenn Sie etwas Spezifischeres als <section> benötigen
Ric
130

Klingt so, als sollten Sie jeden der "Abschnitte" (wie Sie sie nennen) in <article>Tags und Einträge im Artikel in <section>Tags einschließen.

Die HTML5-Spezifikation sagt (Abschnitt):

Das Abschnittselement repräsentiert einen generischen Abschnitt eines Dokuments oder einer Anwendung. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten, normalerweise mit einer Überschrift. [...]

Beispiele für Abschnitte sind Kapitel, die verschiedenen Registerkarten in einem Dialogfeld mit Registerkarten oder die nummerierten Abschnitte einer Arbeit. Die Homepage einer Website kann in Abschnitte für eine Einführung, Nachrichten und Kontaktinformationen unterteilt werden.

Hinweis : Autoren werden aufgefordert, das Artikelelement anstelle des Abschnittselements zu verwenden, wenn es sinnvoll wäre, den Inhalt des Elements zu syndizieren.

Und für Artikel

Das Artikelelement stellt eine in sich geschlossene Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Site dar und ist im Prinzip unabhängig verteilbar oder wiederverwendbar, z. B. bei der Syndizierung. Dies kann ein Forumsbeitrag, ein Magazin- oder Zeitungsartikel, ein Blogeintrag, ein vom Benutzer eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderer unabhängiger Inhalt sein.

Ich denke, was Sie im OP "Abschnitte" nennen, passt zur Definition des Artikels, da ich sehe, dass sie unabhängig voneinander verteilbar oder wiederverwendbar sind .

Update: Einige geringfügige Textänderungen articleim neuesten Editor-Entwurf für HTML 5.1 (Änderungen in Kursivschrift):

Das Artikelelement stellt eine vollständige oder in sich geschlossene Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Site dar und ist im Prinzip unabhängig verteilbar oder wiederverwendbar, z. B. bei der Syndizierung. Dies kann ein Forumsbeitrag, ein Magazin- oder Zeitungsartikel, ein Blogeintrag, ein vom Benutzer eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderer unabhängiger Inhalt sein.

Außerdem Diskussion auf der öffentlichen HTML-Mailingliste über articleim Januar und Februar 2013.

Steveax
quelle
17
Bei der Suche im Internet stieß ich auf ein juristisches Dokument, das lautete Article 1, Section 2, Clause 3. Ich hoffe, das hilft mir, mich an die Logik zu erinnern.
Commonpike
3
Ich bin bis zu einem gewissen Grad anderer Meinung, aber ich glaube auch, dass sie je nach Kontext gewechselt werden könnten. Das Lesen der technischen Beschreibungen legt mir nahe, dass es umgekehrt sein sollte, wenn ein articleals "Widget" fungiert. section: "thematische Gruppierung" und "Abschnitt eines Dokuments". article: "in sich geschlossen" und "Widget". Betrachten Sie ein Homepage-Beispiel wie codepen.io/anon/pen/iDEwf
daleyjem
2
Warum sagen sie, dass ein einzelner Forumsbeitrag einen Artikel enthält? Ein Forumsbeitrag ist ohne den Rest des Threads imho nicht vollständig.
Masterxilo
7
Das ist rückwärts. W3C stellt klar, dass sectiones sich um eine thematische Gruppierung von Inhalten handelt und dass articlees sich um ein eigenständiges Element handelt (dh, das in ein Thema gruppiert werden könnte). Stellen Sie es sich wie eine Zeitung vor: In jedem Abschnitt finden Sie viele Artikel. Zum Beispiel Artikel zur Filmkritik im Bereich Unterhaltung.
Chuck Le Butt
3
Hier mit @Chuck einverstanden sein. In meinem Buch hat diese Antwort es völlig rückwärts. Justins Antwort ist viel passender. Aber na ja, ich denke, die Spezifikation lässt viel Raum für Interpretationen. Ich bin mir jedoch nicht sicher, ob dies eine schlechte oder eine gute Sache ist.
Maryisdead
39

Ich würde <article>für einen Textblock verwenden, der völlig unabhängig von den anderen Blöcken auf der Seite ist. <section>Andererseits wäre es ein Teiler, ein Dokument zu trennen, das miteinander in Beziehung steht.

Ich bin mir nicht sicher, was Sie in Ihren Videos, Newsfeeds usw. haben, aber hier ist ein Beispiel (es gibt kein WIRKLICHES Richtig oder Falsch, nur eine Richtlinie, wie ich diese Tags verwende):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

Wie Sie sehen können, sind die Abschnitte immer noch für einander relevant, aber solange sie sich in einem Block befinden, der sie gruppiert. Abschnitte dürfen NICHT in Artikeln enthalten sein. Sie können sich im Hauptteil eines Dokuments befinden, aber ich verwende Abschnitte im Hauptteil, wenn das gesamte Dokument ein Artikel ist.

z.B

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

Hoffe das macht Sinn.

mnsr
quelle
5
I'd use <article> for a text block that is totally unrelated to the other blocks on the page.Ich weiß, dass Sie dies bereits 2011 geschrieben haben, aber ist das nicht der <aside>Zweck des Tags?
MyDaftQuestions
19

Ich halte mich gerne an die Standardbedeutung der verwendeten Wörter: Ein articlewürde für Artikel gelten. Ich würde Blog-Beiträge, Dokumente und Nachrichtenartikel als definieren articles. Abschnitte hingegen würden sich auf Layout- / UX-Elemente beziehen: Seitenleiste, Kopfzeile, Fußzeile wären Abschnitte. Dies ist jedoch alles meine persönliche Interpretation - wie Sie betont haben, sind die Spezifikationen für diese Elemente nicht genau definiert.

Das w3c unterstützt dies und definiert ein articleElement als einen Inhaltsabschnitt, der unabhängig voneinander stehen kann. Ein Blog-Beitrag kann als wertvoller und konsumierbarer Inhalt für sich allein stehen. Ein Header würde dies jedoch nicht tun.

Hier ist ein interessanter Artikel über den Wahnsinn eines Mannes, wenn er versucht, zwischen den beiden neuen Elementen zu unterscheiden. Der grundlegende Punkt des Artikels, den ich auch für richtig halte, besteht darin, zu versuchen, das Element zu verwenden, von dem Sie glauben, dass es tatsächlich das darstellt, was es enthält.

Problematischer ist, dass Artikel und Abschnitt sehr ähnlich sind. Alles, was sie trennt, ist das Wort "in sich geschlossen". Die Entscheidung, welches Element verwendet werden soll, wäre einfach, wenn es einige feste Regeln gäbe. Stattdessen ist es eine Frage der Interpretation. Sie können mehrere Artikel in einem Abschnitt haben, Sie können mehrere Abschnitte in einem Artikel haben, Sie können Abschnitte in Abschnitten und Artikel in Abschnitten verschachteln. Es liegt an Ihnen, zu entscheiden, welches Element in einer bestimmten Situation semantisch am besten geeignet ist.

Hier ist eine sehr gute Antwort auf die gleiche Frage hier auf SO

Michael Jasper
quelle
8

Das folgende Flussdiagramm kann bei der Auswahl eines der verschiedenen semantischen HTML5-Elemente hilfreich sein: Geben Sie hier die Bildbeschreibung ein

Captain Sensible
quelle
5

Sektion

  • Verwenden Sie diese Option, um einen Abschnitt Ihres Layouts zu definieren. Es könnte sein mid, left, right , etc ..
  • Dies hat die Bedeutung einer Verbindung mit einem anderen Element, einfach gesagt, es ist ABHÄNGIG.

Artikel

  • Verwenden Sie diese Option, wenn Sie unabhängige Inhalte haben, die für sich genommen sinnvoll sind.

  • Artikel hat seine eigene vollständige Bedeutung.

Anand Singh
quelle
3

Ein Abschnitt ist im Grunde ein Wrapper für h1(oder andere hTags) und den Inhalt, der diesem entspricht. An articleist im Wesentlichen ein Dokument in Ihrem Dokument, das wiederholt oder paginiert wird. So kann jeder Blog-Beitrag in Ihrem Dokument ein Artikel sein oder jeder Kommentar in Ihrem Dokument kann ein Artikel sein.

Nick Manning
quelle
1

auch für syndizierten Inhalt "Autoren werden aufgefordert, das Artikelelement anstelle des Abschnittselements zu verwenden, wenn es sinnvoll wäre, den Inhalt des Elements zu syndizieren."

albert
quelle
0

Meine Interpretation lautet: Ich denke, YouTube hat einen Kommentarbereich und im Kommentarbereich gibt es mehrere Artikel (in diesem Fall Kommentare).

Ein Abschnitt ist also wie ein Div-Container, der Artikel enthält.

userX
quelle
-2

Artikel und Abschnitt sind beide semantische Elemente von HTML5. Der Abschnitt ist ein allgemeiner Abschnitt einer Webseite auf Blockebene, der jedoch für den Inhalt unserer Webseite relevant ist. Artikel ist auch Blockebene, aber Artikel bezieht sich auf einen einzelnen Blog-Beitrag, einen Kommentar, einer Webseite.

Sowohl Artikel als auch Abschnitt sollten Überschriftenelemente h2-h6 enthalten.

Verwenden Sie für einen Blog-Beitrag die folgende Syntax für Artikel und Abschnitt.

<article>
         <h1>Heading 1</h1>
         <p>Article Description</p>
         <section id="sec1">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
         <section id="sec2">
                <h2>Section Heading</h2>
                <p>Section Description</p>
         </section>
</article>
Avinash Malhotra
quelle