HTML Section & Article - Jeder sagt was anderes !

[HighTec]

Guten Tag Forumbasegemeinde,

nach langen Jahren der Abstinenz beschäftige ich mich wieder mit dem erstellen von Websiten. Klar muss ich mich nun endlich mal in HTML5 einarbeiten.
Soweit natürlich alles gut zu verstehen (sind ein paar interessante neuerungen), allerdings habe ich immernoch einen mentalen Kampf mit Section & Article.

Bestimmt habe ich bereits 50 Sites über das Thema gelesen, nur um wieder festzustellen dass jede Website etwas anderes sagt.
Und zwar in folgendem Punkt:

Website A schreibt:

Section ist ein Teil eines übergeordneten Article´s.
Das heisst Section Teilt ein Artikel in mehrere Teile auf die thematisch zueinander gehören.

z.B.

<article>
   <section>
      ... Kapitel 1...
   </section>
   <section>
      ...Kapitel 2...
   </secion>
</article>

Website B schreibt:

Section teilt eine gesamte Website in mehrere Teile auf welche mehrere Artikel enthalten kann.
Da wurde öfters das Beispiel einer Tageszeitung genannt.

z.B.

<section>
   ...Politik-Teil...
   <article>
      Politik-Nachricht 1
   </article>
   <article>
      Politik-Nachricht 2
   </article>
</section>
<section>
   Sport-Teil
   <article>
      ...
   </article>
   <article>
      ...
   </article>
</section>

Vielleicht bin ich auch einfach zu engstirning es zu kapieren. Kann mir nun jemand erklären an was ich mich nun halten muss um meine Website HTML5 komform zu Strukturieren?
Welche der Varianten ist nun richtig?

--------------------------

Eine Frage noch so <aside> ;-) :
Was genau hab ich denn nun für Vorteile, wenn ich eine Website nach HTML5, also mit header, footer und co. strukturiere?
Klar ist es dann für mich als Autor einfacher und übersichtlicher als mit hunderten DIV´s aber was hat es noch für vorteile?
Ist es sinnvoll für Suchmaschinen Bots?

Na soweit so gut, Ich hoffe jemand kann mir das ganze nun eindeutig klar machen ;-)

Vielen Dank schonmal.

 

[Sneazel]

würde mich nach der w3c richten
http://www.w3.org/WAI/GL/wiki/Using_HTML5_section_elements

 

[Znrl]

Wie du dorts siehst, wird es dort auch nicht klar, dass <section> nur in <article> vorkommen soll oder andersrum.
Es gibt ja sogar ein:

<article>
<section>
<article>
</article>
</section>
</article>

Die hängen eben nicht direkt zusammen.
Les dir nochmal durch wann <section> bzw. <article> benutzt werden soll und dann kannst du die im Grunde wieder beliebig Verschachteln, wenn das bei dir Sinn macht.

 

[HighTec]

Wie du dorts siehst, wird es dort auch nicht klar, dass <section> nur in <article> vorkommen soll oder andersrum.
Es gibt ja sogar ein:

<article>
<section>
<article>
</article>
</section>
</article>

Die hängen eben nicht direkt zusammen.
Les dir nochmal durch wann <section> bzw. <article> benutzt werden soll und dann kannst du die im Grunde wieder beliebig Verschachteln, wenn das bei dir Sinn macht.

Ja richtig, dass hatte ich auf der Seite von W3C auch bereits gelesen. Allerdings leuchtet mir nicht ein wann ich was benutze. Irgendwie steht beides für ein "für sich selbst stehender" Part der Site.

Ich möchte dies von Anfang an richtig anordnen, falls dies auch wichtig für die Bots von Google und Co sind.

 

[Znrl]

Vermutlich kann das tatsächlich auch gemixt werden und was auf deiner seite ein <article> ist, macht auf einer andern als <section> mehr Sinn.
Grundsätzlich hätte ich gesagt das <section> ein Teil von etwas ist bspw. ein Kapitel eines Buches, der Nachrichtenteil der Website (der dann wieder <article> enthalten kann), der Teil eines <articles> mit den Kommentaren (die wiederum <article> sein können).
Ein <article> steht eher für sich allein. Bspw. bezieht sich ein Kommentar natürllich auf etwas, aber es ist nicht in Teil dessen. Es kann ja auch jemand auf seiner Website ein Kommentar über einen deiner Posts schreiben.

Vtl. fällt dir ja nen (konkretes) Beispiel ein, bei dems dir nicht klar ist.

edit: Was ich meine ist, beide Beispiele aus dem ersten Post sind richtig. Allerdings unterteilt <section> nicht nur <article> auch eine <nav> könnte ein oder mehrere<section> haben. <section> ist aber nicht das allem übergeordnete Element, da es ja sonst nichts teilt.
ein

<body>
<section>
<article>
</article>
</section>
</body>

macht also wohl weniger Sinn als andersrum, sprich <section> im <article>.
Es kommt aber eben auf das Gesamtkonzept an.

edit2:
Das ganze heißt ja auch nicht, dass jetzt <div> verboten ist.
http://stackoverflow.com/questions/...e-which-is-contained-in-which/1789745#1789745
Die Antwort fand ich ganz gut.

 

[Daaron]

Was genau hab ich denn nun für Vorteile, wenn ich eine Website nach HTML5, also mit header, footer und co. strukturiere?
...
Ist es sinnvoll für Suchmaschinen Bots?

Wahrscheinlich, ja. Nichts genaues weiß man nicht. Wenn irgend eine Suchmaschine aktuell solche Techniken überhaupt mit erfasst, dann wohl Google. Selbst Bing ist eher... hinterwäldlerisch.
Aber: Du schreibst die Webseite nicht für heute, sondern für die Zukunft. Mit stärkerer Verbreitung semantischer Strukturen werden Bots auch schärfer auf sie eingepegelt.

Einer der größten Vorteile ist, dass du hinsichtlich der H1-6 - Geschichte nicht mehr so eingeschränkt bist. 5x<h1> auf einer Seite? Warum nicht?

Ja richtig, dass hatte ich auf der Seite von W3C auch bereits gelesen. Allerdings leuchtet mir nicht ein wann ich was benutze. Irgendwie steht beides für ein "für sich selbst stehender" Part der Site.

Die W3C-Spezifizierung sagt doch, was der Sinn dahinter ist: <article> sind etwas, das du problemlos separat publizieren könntest, z.B. als Facebook-Share oder als PDF-Auszug zum Download. Eine <section> ist zwar in sich geschlossen, aber eben nicht für sich allein "lebensfähig".
Der Wirtschaftsteil der Zeitung ist zwar eine <section>, kann aber allein nichts. Es würde nicht bringen, ihm ein "Like" zu geben. Den Like kriegt ein spezifischer Artikel innerhalb des Wirtschaftsteils. Genauso würde es nichts bringen, in einem Artikel über die Bankenkrise nur einen einzelnen Abschnitt über die Wertschöpfung separat zu verbreiten, da er sich sicherlich im Kontext auf den äußeren Artikel bezieht.