it-swarm.com.de

Abschnitt gegen Artikel HTML5

Ich habe eine Seite, die aus verschiedenen "Abschnitten" besteht, wie Videos, einem Newsfeed usw. Ich bin etwas verwirrt, wie man diese mit HTML5 darstellt. Momentan habe ich sie als HTML5 <section>s, aber bei näherer Betrachtung sieht es aus, dass das korrekte Tag <article> wäre. Könnte jemand für mich etwas Licht ins Dunkel bringen? 

Keines dieser Dinge sind Blogbeiträge oder "Dokumente" im wahrsten Sinne des Wortes, daher ist es schwer zu erkennen, welches Element angewendet werden soll.

Prost

BEARBEITEN: Ich habe mich für die Verwendung des Tags article entschieden, da es sich scheinbar um ein Container-Tag für nicht zusammenhängende Elemente handelt, bei denen es sich wahrscheinlich um meine "Abschnitte" handelt. Der eigentliche Tagname-Artikel scheint jedoch eher irreführend zu sein, und obwohl HTML5 mit mehr Rücksicht auf web applications entwickelt wurde, finde ich, dass viele der Tags eher auf Blog zentriert bzw. auf Dokumenten basieren.

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

161
James Hay

Klingt so, als müssten Sie jeden der "Abschnitte" (wie Sie sie nennen) in <article>-Tags und Einträge im Artikel in <section>-Tags einpacken.

Die HTML5-Spezifikation sagt (Abschnitt):

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

Beispiele für Abschnitte sind Kapitel, die verschiedenen Registerkarten in ein Dialogfeld mit Registerkarten oder die nummerierten Abschnitte einer Doktorarbeit. Ein Netz Die Homepage der Website könnte für eine Einführung in Abschnitte unterteilt sein. Nachrichten und Kontaktinformationen.

Note: Autoren sollten das Artikelelement anstelle von .__ verwenden. section -Element, wenn es sinnvoll wäre, den Inhalt von .__ zu syndizieren. das Element.

Und für Artikel

Das Artikelelement repräsentiert eine in sich geschlossene Komposition in einer Dokument, Seite, Anwendung oder Site, und das ist im Prinzip unabhängig verteilbar oder wiederverwendbar, z. in Syndikation. Diese könnte ein Forumseintrag, ein Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, .__ sein. ein vom Benutzer übermittelter Kommentar, ein interaktives Widget oder Gadget oder ein beliebiges anderer unabhängiger Gegenstand.

Ich denke, was Sie als "Abschnitte" im OP bezeichnen, passt zur Definition des Artikels, da ich sie als unabhängig verteilbar oder wiederverwendbar sehen kann.

Update: Einige kleinere Textänderungen für article im latest Editor-Entwurf für HTML 5.1 (Änderungen in Kursivschrift):

Das Artikelelement repräsentiert einen vollständigen oder in sich abgeschlossenen Zusammensetzung in einem Dokument, einer Seite, einer Anwendung oder einer Site und das heißt in grundsätzlich unabhängig vertreibbar oder wiederverwendbar, z. im Syndikation. Dies kann ein Forumseintrag, eine Zeitschrift oder eine Zeitung sein Artikel, ein Blogeintrag, ein vom Benutzer übermittelter Kommentar, ein interaktives Widget oder ein Gadget oder einen anderen unabhängigen Inhalt.

Auch Diskussion in der öffentlichen HTML-Mailingliste über article in Januar und Februar von 2013.

112
steveax

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

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

Und dann ein Bild das ich aufgeräumt habe:

enter image description here

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

<article> ist mit <section> verwandt, unterscheidet sich jedoch deutlich . Während <section> für die Gruppierung verschiedener Inhaltsbereiche oder Funktionalität, <article> dient dazu, verwandte Personen zu enthalten eigenständige Inhalte wie einzelne Blogbeiträge, Videos, Bilder oder Nachrichten. Stellen Sie es sich so vor - wenn Sie eine Anzahl von .__ haben. Inhalte, von denen jedes geeignet ist, auf ihrem .__ zu lesen. eigene, und wäre sinnvoll, als separate Elemente in einem RSS zu syndizieren Feed, dann ist <article> geeignet, um sie zu kennzeichnen.

In unserem Beispiel enthält <section id="main"> Blogeinträge. Jeder Blog der Eintrag wäre geeignet, um als Artikel in einem RSS-Feed zu syndizieren, und würde Sinn machen, wenn sie alleine gelesen wird, also außerhalb des Zusammenhangs <article> ist perfekt für sie:

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

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

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

Einfach nicht wahr? Beachten Sie jedoch, dass Sie auch Abschnitte in .__ verschachteln können. Artikel, wo es sinnvoll ist. Wenn beispielsweise Diese Blogbeiträge haben eine konsistente Struktur aus verschiedenen Abschnitten, dann Sie könnten auch Abschnitte in Ihre Artikel einfügen. Es könnte aussehen etwas wie das:

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

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

  <section id="summary">
  </section>
</article>
109
Justin

Ich würde <article> für einen Textblock verwenden, der keinerlei Beziehung zu den anderen Blöcken auf der Seite hat. <section> wäre andererseits ein Teiler, um ein Dokument zu trennen, das in Beziehung zueinander steht.

Nun, ich bin 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, sind die Abschnitte immer noch relevant für einander, aber solange sie sich in einem Block befinden, der sie gruppiert. Abschnitte müssen 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.

39
jzm

Ich bleibe gerne bei der Standardbedeutung der verwendeten Wörter: Eine article würde gut auf Artikel zutreffen. Ich würde Blogbeiträge, Dokumente und Nachrichtenartikel als articles definieren. Abschnitte hingegen beziehen sich auf Layout-/ux-Elemente: Seitenleiste, Kopfzeile und Fußzeile wären Abschnitte. Dies ist jedoch alles meine persönliche Interpretation - wie Sie darauf hingewiesen haben, sind die Spezifikationen für diese Elemente nicht genau definiert.

Unterstützt dies, definiert das w3c ein article -Element als einen Inhaltsbereich, der unabhängig voneinander stehen kann. Ein Blog-Post kann als wertvoller und konsumierbarer Inhaltsstoff für sich allein stehen. Eine Kopfzeile würde jedoch nicht.

Hier ist ein interessanter Artikel über den Wahnsinn eines Mannes beim Versuch, zwischen den beiden neuen Elementen zu unterscheiden. Der grundlegende Punkt des Artikels, von dem ich denke, dass er auch richtig ist, besteht darin, zu versuchen, das zu verwenden, was immer am besten für das steht, was es enthält.

Problematischer ist, dass der Artikel und der Abschnitt so sehr sind ähnlich. Alles, was sie voneinander trennt, ist das Wort „in sich geschlossen“ . Die Entscheidung, welches Element verwendet werden soll, wäre einfach, wenn es einige schwierige und schnelle Regeln. Es ist vielmehr eine Frage der Interpretation. Du kannst haben Mehrere Artikel in einem Abschnitt können mehrere Abschnitte enthalten Innerhalb eines Artikels können Sie Abschnitte innerhalb von Abschnitten und Artikeln verschachteln innerhalb von Abschnitten. Es liegt an Ihnen, zu entscheiden, welches Element am meisten ist semantisch in jeder Situation angemessen.

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

17
Michael Jasper

Sektion

  • Verwenden Sie dies zum Definieren eines Abschnitts Ihres Layouts. Es könnte mid, left, right Usw. sein.
  • Dies hat eine Bedeutung für die Verbindung mit einem anderen Element, einfach gesagt, es ist ABHÄNGIG.

Artikel

  • Verwenden Sie dies, wenn Sie unabhängige Inhalte haben, die für sich selbst sinnvoll sind.

  • Artikel hat seine eigene vollständige Bedeutung.

5
Anand Singh

Ein Abschnitt ist im Wesentlichen ein Wrapper für h1 (oder andere h-Tags) und den entsprechenden Inhalt. Eine article ist im Wesentlichen ein Dokument in Ihrem Dokument, das wiederholt oder paginiert wird ... So wie jeder Blogeintrag in Ihrem Dokument ein Artikel oder jeder Kommentar in Ihrem Dokument ein Artikel sein kann.

3
Nick Manning

Stellen Sie sich das wie eine Zeitung vor: Abschnitt A - Weltnachrichten, Abschnitt B - Lokale Nachrichten, Abschnitt C - Sport, Abschnitt D - Finanzen usw. Jeder Abschnitt enthält mehrere Artikel. Dieselbe Analogie gilt für HTML 5: Ein Abschnitt ist ein größerer Teil einer Seite, der einen oder mehrere Artikel enthalten kann: Storys oder Inhaltsstücke .  enter image description here

2
Aamir Kalimi

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

1
albert

DIV

Wenn die eingeschlossenen Elemente nicht miteinander zusammenhängen, __. semantisch und ohne generische Überschrift, dann ist div dein Mann.

SEKTION

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

ARTIKEL 

Das Artikelelement repräsentiert eine in sich geschlossene Komposition in einer Dokument, Seite, Anwendung oder Site, und das ist im Prinzip unabhängig verteilbar oder wiederverwendbar, z. in Syndikation.

1
Raja Alam

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

1

Meine Interpretation ist: Ich denke, bei YouTube gibt es einen Kommentarbereich. Innerhalb des Kommentarbereichs befinden sich mehrere Artikel (in diesem Fall Kommentare).

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

0
userX