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?
<section>es sich um ein semantisches Tag und nicht um einen generischen Wrapper handelt<div>.Antworten:
Die Antwort ist in der aktuellen Spezifikation:
Referenz:
Siehe auch:
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:
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.quelle
Auf der W3-Wiki-Seite zur Strukturierung von HTML5 heißt es:
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):quelle
<main>Tag anstelle von verwenden<section id="main"?<main>wäre ideal.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.
quelle
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:
quelle
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 :
quelle
<article>s), aber es ist unmöglich, nur mit Dummy-Text als Beispiel und zwei Abschnitten mit demid"primären" ...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/
quelle