Verwechslung zwischen <article> oder <section> Tags. Was zu verwenden?

Question

Trotz Seiten auf den Seiten über die <article> und <section> Tags zu lesen, verstehe ich wirklich nicht, wie man sie auf meiner Site anwendet.

Ich habe eine Produktseite mit verwandten Produkten am Ende der Seite. Zuerst dachte ich über so etwas wie dies zu tun:

<section> 
    <header><h1>Product title</h1><header> 
    <img src="image.jpg"/> 
    <p>Description</p> 
    <p>Price</p> 
    <p><a href="...">Order</a></p> 
</section> 

<section> 
    <header><h1>Related products</h1></header> 
    <article> 
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price 
    </article> 
    <article> 
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price 
    </article> 
    <article> 
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price 
    </article> 
</section> 

Aber dann las ich einige andere Blogs und es fiel mir auf, dass vielleicht sollte ich die <section> Tags mit <article> Tags ersetzen.

Welches ist richtig und warum? Vielen Dank.

Answer 1

Abschnitt

Der Abschnitt Element stellt einen generischen Bereich eines Dokuments oder einer Anwendung. Ein Abschnitt ist in diesem Zusammenhang eine thematische Gruppierung von Inhalten. Das Thema jedes Abschnitts sollte identifiziert werden, indem normalerweise eine Überschrift (h1-h6-Element) als untergeordnetes Element des Abschnitts eingefügt wird.

Artikel

Der Artikel Element stellt eine vollständige, oder in sich geschlossene, Zusammensetzung in einem Dokument, Seite, Anwendung oder Website, und das ist im Prinzip unabhängig verteilbar oder wiederverwendbar, z.B in der Syndizierung. Dies kann ein Forenbeitrag, ein Magazin oder ein Zeitungsartikel, ein Blog-Eintrag, ein von Benutzern eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderer unabhängiger Inhalt sein.

Wenn Artikelelemente verschachtelt sind, repräsentieren die inneren Artikelelemente Artikel, die sich im Prinzip auf den Inhalt des äußeren Artikels beziehen. Beispielsweise kann ein Blogeintrag auf einer Website, der von Benutzern übermittelte Kommentare akzeptiert, die Kommentare als Artikelelemente darstellen, die im Artikelelement für den Blogeintrag verschachtelt sind.

Gerade vom W3 http://www.w3.org/html/wg/drafts/html/master/sections.html

---

In ihrem Beispiel, sie haben eine article innerhalb eines article innerhalb eines section verschachtelt. Ich würde sagen, Sie verwenden es definitiv richtig.

<article> 
<header></header> 
<section> 
    <h1></h1> 
    <article></article> 
    <article></article> 
</section> 
</article> 

Answer 2

Im HTML5-Standard, dem <"article"> Element definiert eine vollständige, in sich geschlossene Block der zugehörigen Elemente.

Das Element <"section"> ist als ein Block verwandter Elemente definiert.

Können wir die Definitionen verwenden, um zu entscheiden, wie Elemente verschachtelt werden? Nein Wir können nicht!

Im Internet finden Sie HTML-Seiten mit <"section"> Elementen <"article"> Elemente und <"article"> Elemente enthalten <"sections"> Elemente finden.

Sie werden auch Seiten mit <"section"> Elemente finden <section> Elemente enthält, und <article> Elemente enthält <"article"> Elemente.

Von: http://www.w3schools.com/html/html5_semantic_elements.asp

Answer 3

<article> ist für ein unabhängiges Stück von Inhalten, die auch Sinn machen sollte, wenn all seine Inhalte umgibt, wird abgestreift. <section> ist eher ein generischer Container, der dem div-Tag sehr ähnlich ist und hauptsächlich für die Inhaltsstrukturierung verwendet wird. So sollte der richtige Code so aussehen:

<article> 
    <header><h1>Product title</h1><header> 
    <img src="image.jpg"/> 
    <p>Description</p> 
    <p>Price</p> 
    <p><a href="...">Order</a></p> 
</article> 

<article> 
    <header><h1>Related products</h1></header> 
    <section> 
    <a href="..."><img src="image1.jpg"><br/>Product 1</a><br/>Price 
    </section> 
    <section> 
    <a href="..."><img src="image2.jpg"><br/>Product 2</a><br/>Price 
    </section> 
    <section> 
    <a href="..."><img src="image3.jpg"><br/>Product 3</a><br/>Price 
    </section> 
</article> 

auch HTML 5 Arztes eine große Flowchart bekam, wenn Sie verwirrt für Ihren Bedarf das richtige HTML5 semantische Element Kommissionierung. Sie können es versuchen und sehen, ob es hilft.