Abschnitt gegen Artikel HTML5

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.

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:

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>

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.

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.

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

Das folgende Flussdiagramm kann bei der Auswahl eines der verschiedenen semantischen HTML5-Elemente hilfreich sein:

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.

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.

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."

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.

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>