Wie verwende ich das "section" -Tag in HTML5 richtig?

Ich versuche, ein Layout in HTML5 zu erstellen, und nachdem ich verschiedene Artikel gelesen habe, bin ich nur verwirrt. Ich versuche, einen Input zu bekommen, wie es verwendet werden soll.

Unten sind die Variationen, mit denen ich hin und her gehe:

1)

<section id="content">
      <h1>Heading</h1>
      <div id="primary">
         Some text goes here...
      </div>
   </section>

Können Sie das Abschnitts-Tag verwenden, um sich wie ein Container zu verhalten?

2)

 <div id="content">
      <h1>Heading</h1>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
      <section id="primary">
         <article>
            <h2>Post Title</h2>
            <p>Some text goes here...</p>
         </article>
      </section>
   </div>

Was ist die richtige Methode, um das <section>Tag zu verwenden?

Die Antwort ist in der aktuellen Spezifikation:

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.

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

Das Abschnittselement ist kein generisches Containerelement . Wenn ein Element für Stylingzwecke oder als Annehmlichkeit für die Skripterstellung benötigt wird, wird den Autoren empfohlen, stattdessen das div-Element zu verwenden. Eine allgemeine Regel lautet, dass das Abschnittselement nur dann geeignet ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wird .

Referenz:

• http://www.w3.org/TR/html5/sections.html#the-section-element
• http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

Siehe auch:

• http://html5doctor.com/the-section-element/
• http://www.impressivewebs.com/html5-section/

Es sieht so aus, als ob es viel Verwirrung über den Zweck dieses Elements gegeben hat, aber das eine, worüber man sich einig ist, ist, dass es kein generischer Wrapper ist, wie es <div>ist. Es sollte für semantische Zwecke verwendet werden, und kein CSS oder JavaScript Haken (obwohl es sicherlich kann gestylt oder „scripted“ werden).

Ein besseres Beispiel könnte nach meinem Verständnis ungefähr so ​​aussehen:

<div id="content">
  <article>
     <h2>How to use the section tag</h2>
     <section id="disclaimer">
         <h3>Disclaimer</h3>
         <p>Don't take my word for it...</p>
     </section>
     <section id="examples">
       <h3>Examples</h3>
       <p>But here's how I would do it...</p>
     </section>
     <section id="closing_notes">
       <h3>Closing Notes</h3>
       <p>Well that was fun. I wonder if the spec will change next week?</p>
     </section>
  </article>
</div>

Beachten Sie, dass es <div>, da es vollständig nicht semantisch ist, an einer beliebigen Stelle im Dokument verwendet werden kann, die die HTML-Spezifikation zulässt, jedoch nicht erforderlich ist.

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:

Es ist auch wichtig zu wissen, 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>

Mein Verständnis ist, dass ABSCHNITT einen Abschnitt mit einer Überschrift enthält, die ein wichtiger Teil des "Flusses" der Seite ist (keine Seite). ABSCHNITTE wären Kapitel, nummerierte Teile von Dokumenten und so weiter.

ARTIKEL ist für syndizierte Inhalte gedacht - z. B. Beiträge, Nachrichten usw. ARTIKEL und ABSCHNITT sind völlig getrennt - Sie können einen ohne den anderen haben, da es sich um sehr unterschiedliche Anwendungsfälle handelt.

Eine andere Sache über ABSCHNITT ist, dass Sie es nicht verwenden sollten, wenn Ihre Seite nur einen Abschnitt hat. Außerdem muss jeder Abschnitt eine Überschrift haben (H1-6, HGROUP, HEADING). Überschriften sind mit dem ABSCHNITT "versehen". Wenn Sie also beispielsweise ein H1 auf der Hauptseite (außerhalb eines ABSCHNITTS) und dann ein H1 innerhalb des Abschnitts verwenden, wird letzteres als H2 behandelt.

Die Beispiele in der Spezifikation sind zum Zeitpunkt des Schreibens ziemlich gut.

In Ihrem ersten Beispiel wäre es also richtig, wenn Sie mehrere Inhaltsabschnitte hätten, die nicht als ARTIKEL bezeichnet werden könnten. (Mit einem kleinen Punkt, dass Sie das #primary DIV nicht benötigen würden, es sei denn, Sie wollten es für einen Style-Hook - P-Tags wären besser).

Das zweite Beispiel wäre richtig, wenn Sie alle SECTION-Tags entfernt hätten - die Daten in diesem Dokument wären Artikel, Beiträge oder ähnliches.

ABSCHNITTE sollten nicht als Container verwendet werden - DIV ist immer noch die richtige Verwendung dafür und jede andere benutzerdefinierte Box, die Sie möglicherweise entwickeln.

Sie können das Abschnitts-Tag definitiv als Container verwenden. Es dient dazu, Inhalte semantisch bedeutender zu gruppieren als mit einem div oder wie in der HTML5-Spezifikation angegeben:

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. http://www.w3.org/TR/html5/sections.html#the-section-element

Die richtige Methode ist # 2. Sie haben das Abschnitts-Tag verwendet, um einen Abschnitt Ihres Dokuments zu definieren. Aus den Spezifikationen http://www.w3.org/TR/html5/sections.html :

Das Abschnittselement ist kein generisches Containerelement. Wenn ein Element für Stylingzwecke oder als Annehmlichkeit für die Skripterstellung benötigt wird, wird den Autoren empfohlen, stattdessen das div-Element zu verwenden

Das ist einfach falsch: ist kein Wrapper. Das Element bezeichnet einen semantischen Abschnitt Ihres Inhalts, um die Erstellung eines Dokumentumrisses zu erleichtern. Es sollte eine Überschrift enthalten. Wenn Sie nach einem Seitenumbruchelement suchen (für jede HTML- oder XHTML-Variante), sollten Sie Stile direkt auf das Element anwenden, wie von Kroc Camen beschrieben. Wenn Sie noch ein zusätzliches Element für das Styling benötigen, verwenden Sie a. Wie Dr. Mike erklärt, ist div nicht tot, und wenn es nichts passenderes gibt, möchten Sie wahrscheinlich Ihr CSS wirklich dort anwenden.

Sie können dies überprüfen: http://html5doctor.com/avoiding-common-html5-mistakes/