Wie verwendet man 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, einige Informationen darüber zu erhalten, wie es verwendet werden sollte.

    Nachfolgend sind die Variationen aufgeführt, mit denen ich vor und zurück gehe:

    1)

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

    Können Sie das section-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?

    12 January 2014
    PeeHaaPedro Bezunartea López
6 answers
  • Die Antwort ist in der aktuellen Spezifikation enthalten:

    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 Doktorarbeit. Die Startseite einer Website kann in Abschnitte für eine Einführung, Neuigkeiten und Kontaktinformationen unterteilt werden.

    Autoren sollten den Artikel verwenden Element anstelle des Abschnittselements , wenn es sinnvoll wäre, den Inhalt von des Elements zu syndizieren.

    Das Abschnittselement nicht ein generisches Containerelement . Wenn ein -Element zum Gestalten oder zur Vereinfachung des Skripts benötigt wird, wird Autoren empfohlen, stattdessen das div-Element zu verwenden. Eine allgemeine Regel ist, dass das Abschnittselement nur dann geeignet ist, wenn der Inhalt des Elements explizit in der Gliederung des Dokuments aufgeführt wird.

    Blockquote >

    Referenz:

    Siehe auch:

    Es scheint, dass es eine Menge Verwirrung über den Zweck dieses Elements gegeben hat, aber man ist sich einig, dass es nicht ein generischer Wrapper wie [

    29 October 2012
    Wesley MurchAlon Shmiel
  • In der W3-Wiki-Seite zur Strukturierung von HTML5 heißt es:

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

    Zeigt dann ein Bild , das ich bereinigt habe:

    Wie verwendet man das "section" -Tag in HTML5 richtig?

    Es ist auch wichtig zu wissen So verwenden Sie das <article> -Tag (über denselben W3-Link oben):

    <article> ist mit <section> verwandt, unterscheidet sich jedoch deutlich . Während <section> zum Gruppieren verschiedener Inhaltsbereiche oder -Funktionalität dient, <article> dazu, verwandte, individuelle Einzelinhalte wie einzelne Blogbeiträge, Videos, Bilder oder Nachrichten. Stellen Sie sich das so vor - wenn Sie über eine Reihe von Inhalten verfügen, von denen jedes für sich allein lesbar ist und sinnvoll wäre, als separate Elemente in einem RSS - Feed zu syndizieren dann eignet sich <article> zum Markieren.

    In unserem Beispiel enthält <section id="main"> Blogeinträge. Jeder Blog -Eintrag eignet sich für die Syndizierung als Artikel in einem RSS-Feed, und wäre sinnvoll, wenn er alleine gelesen wird, außerhalb des Kontexts. Daher ist <article> ideal 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 auch Abschnitte in Artikeln schachteln können, wenn dies sinnvoll ist. Wenn z. B. jeder dieser Blog-Posts eine konsistente Struktur aus verschiedenen Abschnitten 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>
     
    04 March 2014
    Justin
  • Sie können das Section-Tag definitiv als Container verwenden. Es ist dazu da, Inhalte semantisch bedeutsamer zu gruppieren als mit einem div oder wie die html5-Spezifikation sagt:

    Das Abschnittselement repräsentiert einen generischen Abschnitt von ein Dokument oder eine 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

    25 August 2011
    Christian Treppo
  • Die korrekte 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 das Styling oder zur Vereinfachung der Skripterstellung benötigt wird, wird Autoren empfohlen, stattdessen das div-Element

    zu verwenden
    25 August 2011
    Kilmazing
  • Ich verstehe, dass SECTION einen Abschnitt mit einer Überschrift enthält, die einen wichtigen Teil des "Flusses" der Seite darstellt (nicht nebenbei). SEKTIONEN wären Kapitel, nummerierte Teile von Dokumenten usw.

    ARTIKEL ist für syndizierten Inhalt - z. Beiträge, Nachrichten usw. Artikel und Abschnitt sind völlig getrennt - Sie können einen ohne den anderen haben, da sie sehr unterschiedliche Anwendungsfälle sind.

    Eine andere Sache von SECTION ist, dass Sie dies nicht tun sollten Verwenden Sie es nicht, wenn Ihre Seite nur einen Abschnitt enthält. Außerdem muss jeder Abschnitt eine Überschrift haben (H1-6, HGROUP, HEADING). Überschriften sind innerhalb der SECTION "bereichsspezifisch", so z. Wenn Sie ein H1 auf der Hauptseite (außerhalb eines SECTION) und dann ein H1 innerhalb des Abschnitts verwenden, wird dieser als H2 behandelt.

    Die Beispiele in Die Spezifikationen sind zum Zeitpunkt des Schreibens ziemlich gut.

    In Ihrem ersten Beispiel wäre es also korrekt, wenn Sie mehrere Inhaltsbereiche hätten, die nicht als ARTIKEL bezeichnet werden könnten. (Mit einem kleinen Punkt, dass Sie die #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 korrekt Wenn Sie alle SECTION-Tags entfernt haben - die Daten in diesem Dokument wären Artikel, Beiträge oder ähnliches.

    SECTIONs sollten nicht als Container verwendet werden - DIV ist immer noch das korrekte Verwendung dafür und jede andere benutzerdefinierte Box, mit der Sie möglicherweise auftauchen.

    02 March 2012
    GG00
  • das ist einfach falsch: ist kein Wrapper. Das Element bezeichnet einen semantischen Abschnitt Ihres Inhalts, der beim Erstellen einer Dokumentgliederung helfen soll. Es sollte eine Überschrift enthalten. Wenn Sie nach einem Seitenumbruchelement suchen (für beliebige HTML- oder XHTML-Varianten), ziehen Sie in Betracht, Stile direkt auf das Element anzuwenden, wie von Kroc Camen beschrieben. Wenn Sie noch ein zusätzliches Element zum Gestalten benötigen, verwenden Sie a. Wie Dr. Mike erklärt, ist div nicht tot, und wenn es nichts passenderes gibt, sollten Sie Ihr CSS wirklich anwenden.

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

    16 January 2014
    Medhat