Frage

Der Versuch, meinen Kopf um die neuen semantischen Elemente in HTML5 zu erhalten.

Gibt es eine <section> gehören innerhalb eines <article> oder ist es umgekehrt? Ist es auch eine Rolle?

Ich betrachte Umstrukturierung ein Wordpress-Blog.

War es hilfreich?

Lösung

Von der HTML5-Spezifikation :

  

Das section Element stellt einen generisches Dokument oder Anwendungsabschnitt. Ein Abschnitt, in diesem Zusammenhang ist eine thematische Gruppierung von Inhalten, in der Regel mit einem Header und möglicherweise eine Fußzeile.

und

  

Das article Element stellt einen unabhängigen Abschnitt ein Dokument, eine Seite oder Website. Dies könnte ein Forum Post, eine Zeitschrift oder Zeitungsartikel, ein Blog-Eintrag, ein vom Benutzer übermittelten Kommentar, oder ein anderes unabhängiges Inhaltselement sein.

Also ich würde sagen, dass beide section und article Elemente das andere Element enthalten können, gegebenenfalls. Ich denke, Ihr Diagramm Sinn macht, abgesehen von den verschachtelten Abschnitt Elemente:

  

Das Profilelement ist kein generisches Container-Element. Wenn ein Element für das Styling Zwecke oder als Annehmlichkeit für Scripting erforderlich ist, werden Autoren ermutigt, anstatt das div-Element zu verwenden. Eine allgemeine Regel ist, dass das Profilelement geeignet ist, nur dann, wenn der Inhalt des Elements explizit im Dokument des Umrisses aufgeführt werden würde.

Vielleicht einen <div> für die äußere verwenden?

Andere Tipps

In der W3 Wikiseite über Strukturierung HTML5 , heißt es:

  

<section> : Werden verwendet, um jede Gruppe verschiedene Artikel in verschiedene Zwecke oder   Themen, oder die verschiedenen Abschnitte eines einzelnen Artikels zu definieren.

Und dann zeigt ein Bild dass ich gereinigt:

eingeben Bild Beschreibung hier

Es ist auch wichtig zu wissen, wie den <article> Tag zu verwenden (aus dem gleichen W3 Link oben):

  

<article> auf <section> verwendet, aber deutlich anders.   Während <section> ist für die Gruppierung der verschiedenen Abschnitte von Inhalten oder   Funktionalität, <article> ist für verwandte einzelnen enthält   Standalone-Stücke von Inhalten, wie einzelne Blog-Posts, Videos,   Bilder oder Nachrichten. Denken Sie daran, auf diese Weise - wenn Sie eine Nummer haben,   Inhaltselemente, die von denen jeder zum Lesen geeignet wären auf   besitzen, und würde Sinn Syndikat als separate Elemente in einem RSS machen   Futtermittel, dann <article> ist geeignet zur Kennzeichnung von ihnen.

     

In unserem Beispiel enthält <section id="main"> Blog-Einträge. jeder Blog   Eintrag würde für Syndizierung als ein Element in einem RSS-Feed geeignet sein, und   Sinn machen würde, wenn sie auf seine eigene, aus dem Zusammenhang lesen, deshalb   <article> ist perfekt für sie:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>
  

Einfach nicht wahr? Beachten Sie aber, dass Sie auch Nest Abschnitte innerhalb   Artikel, wo es sinnvoll, dies zu tun macht. Zum Beispiel, wenn jeder von   Diese Blog-Beiträge haben eine einheitliche Struktur von verschiedenen Abschnitten, dann   Sie könnten auch Abschnitte in Ihrem Artikel setzen. Es könnte aussehen   so etwas wie folgt aus:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>

würde ich div für die äußere verwenden und div für die innere, es sei denn Sie eine Überschrift haben direkt in den inneren Abschnitt.

Ta

Reich

Siehe http://html5doctor.com/the-section-element/ weitere Informationen.

IMOO, sollte es einfach sein, so einfach wie das, was normale Menschen es für selbstverständlich nehmen. Wenn ein einfachen Tag-Name verwirrt Menschen ist es ein fehlschlagen. Für mich:

  • Ein <article> ist ein Artikel . Menschen teilen Artikel. Wenn Sie sagen, etwas ist ein Artikel, werde ich erwarten sollte es eine Titel haben , und vielleicht ein wenig Zusammenfassung als gut, so kann ich es lesen entscheiden oder nicht. Wenn es interessant ist, werde ich es meinen Freunden teilen. Es ist in sich abgeschlossen.

  • Ein <section> ist ein Abschnitt . Es ist ein Teil verwandter Dinge. Grundsätzlich werden Sie andere Abschnitte müssen das ganze Bild zu erhalten.

Warum setzen Sie einen <section> innerhalb des <body> Oh, weil es Teil des Körpers?; Teil meiner Website. Ich werde meine Artikel in diesem Teil setzen.

Warum setzen Sie einen <section> in einem <section>? , weil es Teil von , die Abschnitt.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top