wake-up-neo.com

HTML5-Best Practices; Elemente für Abschnitt / Überschrift / Seite / Artikel

Es gibt genug Informationen über HTML5 im Web (und auch über Stackoverflow), aber jetzt bin ich neugierig auf die "Best Practices". Tags wie section/headers/article sind neu und jeder hat unterschiedliche Meinungen darüber, wann/wo Sie diese Tags verwenden sollten. Was haltet ihr von folgendem Layout und Code?

Website layout

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

zeile 7. section auf der gesamten Website? Oder nur ein div?

zeile 8. Jedes section beginnt mit einem header?

zeile 23. Ist das div richtig? oder muss das ein section sein?

zeile 24. Linke/rechte Spalte mit div teilen.

zeile 25. Richtige Stelle für das article -Tag?

zeile 26. Muss Ihr h1- Tag in das header- Tag eingefügt werden?

zeile 43. Der Inhalt bezieht sich nicht auf den Hauptartikel, daher habe ich entschieden, dass dies ein section und kein aside ist.

zeile 44. H2 ohne header

zeile 53. section ohne header

zeile 63. Div mit allen (nicht verwandten) Nachrichten

zeile 64. header mit h2

zeile 65. Hmm, div oder section? Oder entfernen Sie dieses div und verwenden Sie nur das article- Tag

zeile 105. Fußzeile :-)

524
Bas van Dorst

Tatsächlich haben Sie völlig recht, wenn es um Kopf- und Fußzeilen geht. Hier sind einige grundlegende Informationen darüber, wie die wichtigsten HTML5-Tags verwendet werden können/sollten (ich empfehle, den vollständigen Quelltext zu lesen, der unten verlinkt ist):

section - Wird zum Gruppieren thematischer Inhalte verwendet. Klingt nach einem div-Element, ist es aber nicht. Das div hat keine semantische Bedeutung. Fragen Sie sich immer: "Steht der gesamte Inhalt in Beziehung?", Bevor Sie alle Divs durch Abschnittselemente ersetzen.

beiseite - Wird für tangential zusammenhängende Inhalte verwendet. Nur weil ein Teil des Inhalts links oder rechts vom Hauptinhalt angezeigt wird, ist dies kein ausreichender Grund, das aside-Element zu verwenden. Fragen Sie sich, ob der Inhalt der Seite entfernt werden kann, ohne die Bedeutung des Hauptinhalts zu beeinträchtigen. Pullquotes sind ein Beispiel für tangential zusammenhängenden Inhalt.

header - Es gibt einen entscheidenden Unterschied zwischen dem Element header und der allgemein akzeptierten Verwendung von header (oder Impressum). Auf einer Seite befindet sich normalerweise nur eine Kopfzeile oder ein "Masthead". In HTML5 können Sie so viele haben, wie Sie möchten. Die Spezifikation definiert es als "eine Gruppe von Einführungs- oder Navigationshilfen". Sie können in jedem Abschnitt Ihrer Website eine Kopfzeile verwenden. Tatsächlich sollten Sie wahrscheinlich in den meisten Abschnitten eine Kopfzeile verwenden. Die Spezifikation beschreibt das Abschnittselement als „thematische Gruppierung von Inhalten, typischerweise mit einer Überschrift“.

nav - Für wichtige Navigationsinformationen. Eine Gruppe von Links, die zu einer Gruppe zusammengefasst sind, reicht nicht aus, um das nav-Element zu verwenden. Site-weite Navigation gehört dagegen in ein Navi-Element.

footer - Klingt wie eine Beschreibung der Position, ist es aber nicht. Fußzeilenelemente enthalten Informationen zum enthaltenen Element: Wer hat es geschrieben, Urheberrecht, Links zu verwandten Inhalten usw. Während wir normalerweise eine Fußzeile für ein gesamtes Dokument haben, können wir in HTML5 auch Fußzeilen innerhalb von Abschnitten verwenden.

Quelle : http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer- Elemente-nicht-so-offensichtlich-wie-sie-klingen /

Außerdem finden Sie hier eine Beschreibung zu article, die in der obigen Quelle nicht enthalten ist:

article - Wird für ein Element verwendet, das unabhängigen, in sich geschlossenen Inhalt angibt. Ein Artikel sollte von sich aus Sinn machen. Bevor Sie alle Divs durch Artikelelemente ersetzen, fragen Sie sich immer: "Ist es möglich, sie unabhängig vom Rest der Website zu lesen?"

472
Nathan J.B.

Leider sind die bisher gegebenen Antworten (einschließlich der am häufigsten gestellten) entweder "nur" gesunder Menschenverstand, einfach falsch oder bestenfalls verwirrend. Keine wichtigen Schlüsselwörter1 Pop-up!

Ich schrieb 3 Antworten:

  1. Diese Erklärung (hier beginnen).
  2. Konkrete Antworten auf die Fragen von OP.
  3. Verbessertes detailliertes HTML.

Um die Rolle der hier diskutierten HTML-Elemente zu verstehen, müssen Sie wissen, dass einige davon im Dokument enthalten sind. Jedes HTML-Dokument kann nterteilt nach dem HTML5-Gliederungsalgorithmus sein, um ein Gliederungs-oder-Inhaltsverzeichnis (TOC) zu erstellen ). Die Gliederung ist nicht allgemein sichtbar (heutzutage), aber Autoren sollten HTML so verwenden, dass die resultierende Gliederung ihre Absichten widerspiegelt.

Sie können Abschnitte mit genau diesen Elementen und nichts anderem erstellen:

  • (explizite) Unterabschnitte erstellen
    • <section> Abschnitte
    • <article> Abschnitte
    • <nav> Abschnitte
    • <aside> Abschnitte
  • geschwisterabschnitte oder Unterabschnitte erstellen
    • abschnitte von nicht angegebenem Typ mit <h*>2 (nicht alle machen das, siehe unten)
  • schließen Sie den aktuellen expliziten (Unter-) Abschnitt, um das Level zu verbessern

Abschnitte können benannt werden:

  • <h*> erstellte Abschnitte benennen sich
  • <section|article|nav|aside> Abschnitte werden durch den ersten <h*> benannt, falls es einen gibt
    • diese <h*> sind die einzigen, die selbst keine Abschnitte erstellen

In Abschnitten gibt es noch etwas: Die folgenden Kontexte (d. H. Elemente) erzeugen "Umrissgrenzen". Alle darin enthaltenen Abschnitte sind für sie privat:

  • das Dokument selbst mit <body>
  • tabellenzellen mit <td>
  • <blockquote>
  • <details>, <dialog>, <fieldset> und <figure>
  • sonst nichts

title

example HTML
<body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body>
has this outline
1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)









Dies wirft zwei Fragen auf:

Was ist der Unterschied zwischen <article> und <section>?

  • beide können:
    • ineinander verschachtelt sein
    • nehmen Sie einen anderen Begriff in einem anderen Kontext oder einer anderen Verschachtelungsebene
  • <section>s sind wie Buchkapitel
    • sie haben normalerweise Geschwister (vielleicht in einem anderen Dokument?)
    • zusammen haben sie etwas gemeinsam, wie Kapitel in einem Buch
  • ein Autor, ein <article>, mindestens auf der untersten Ebene
    • standardbeispiel: Ein einzelner Blog-Kommentar
    • ein Blog-Eintrag selbst ist auch ein gutes Beispiel
    • ein Blogeintrag <article> und sein Kommentar <article>s könnten auch mit einem <article> umhüllt werden.
    • es ist eine "vollständige" Sache, nicht Teil einer Reihe ähnlicher
  • <section>s in einem <article> sind wie Kapitel in einem Buch
  • <article>s in einem <section> sind wie Gedichte in einem Band (innerhalb einer Reihe)

Wie passen <header>, <footer> und <main> zusammen?

  • sie haben keinen Einfluss auf das Schneiden
  • <header> und <footer>
    • mit ihnen können Sie Zonen von jedem Abschnitt markieren
    • auch innerhalb eines Abschnitts können Sie sie mehrmals haben
    • vom Hauptteil in diesem Abschnitt zu unterscheiden
    • nur durch den Geschmack des Autors begrenzt
    • <header>
      • kann den Titel/Namen dieses Abschnitts markieren
      • kann ein Logo für diesen Abschnitt enthalten
      • muss sich nicht am oberen oder oberen Teil des Abschnitts befinden
    • <footer>
      • kann den Abspann/Autor dieses Abschnitts markieren
      • kann an der Spitze des Abschnitts kommen
      • kann sogar über einem <header> liegen
  • <main>
    • nur einmal erlaubt
    • markiert den Hauptteil des Abschnitts der obersten Ebene (d. h. das Dokument, <body>)
    • unterabschnitte selbst haben keinen Aufschlag für ihren Hauptteil
    • <main> kann sich sogar in einigen Unterabschnitten des Dokuments "verstecken", während <header> und <footer> dies nicht können (dieses Markup würde dann die Kopf-/Fußzeile dieses Unterabschnitts markieren)
      • in <article>-Abschnitten ist dies jedoch nicht zulässig3
    • hilft dabei, „das Reale“ vom Nicht-Kopf-, Nicht-Fuß- und Nicht-Hauptinhalt des Dokuments zu unterscheiden, wenn dies in Ihrem Fall sinnvoll ist ...

1 zu bedenken kommt: Gliederung, Algorithmus, implizite Aufteilung
2 Ich verwende <h*> als Kurzform für <h1>, <h2>, <h3>, <h4>, <h5> und <h6>
3 Weder <main> noch <aside> oder <nav> sind zulässig, aber das ist keine Überraschung. - In der Tat: <main> kann sich nur in (verschachtelten) absteigenden <section>-Abschnitten verstecken oder in der obersten Ebene erscheinen, nämlich <body>

211
Robert Siemer

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

Das Markup für dieses Dokument könnte folgendermaßen aussehen:

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

Weitere Informationen finden Sie in dieser Artikel auf A List Apart .

112
cilerler

Ich würde empfehlen, die W3-Wiki-Seite über die Strukturierung von HTML5 zu lesen:

<header> Wird verwendet, um den Header-Inhalt einer Site zu enthalten. <footer> Enthält den Fußzeileninhalt einer Site. <nav> Enthält das Navigationsmenü oder andere Navigationsfunktionen für die Seite.

<article> Enthält einen eigenständigen Inhalt, der erstellt werden würde
ist sinnvoll, wenn es sich um ein RSS-Element handelt, z. B. eine Nachricht.

<section> Wird verwendet, um verschiedene Artikel in verschiedene zu gruppieren
Zwecke oder Themen, oder um die verschiedenen Abschnitte eines einzelnen Artikels zu definieren.

<aside> Definiert einen Inhaltsblock, der sich auf den Hauptinhalt um ihn herum bezieht, aber nicht zentral für den Fluss des Inhalts ist.

Sie enthalten ein Bild , das ich hier aufgeräumt habe:

html5

Im Code sieht das so aus:

<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>

Lassen Sie uns einige der HTML5-Elemente genauer untersuchen.

<section>

Das Element <section> dient dazu, unterschiedliche Funktionsbereiche oder Themenbereiche zu enthalten oder einen Artikel oder eine Geschichte in verschiedene Abschnitte zu unterteilen. In diesem Fall enthält "sidebar1" verschiedene nützliche Links, die auf jeder Seite der Site bestehen bleiben, z. B. "RSS abonnieren" und "Musik aus dem Store kaufen". "main" enthält den Hauptinhalt dieser Seite, bei dem es sich um Blogbeiträge handelt. Auf anderen Seiten der Website ändert sich dieser Inhalt. Es ist ein ziemlich allgemeines Element, hat aber immer noch eine semantischere Bedeutung als der einfache alte <div>.

<article>

<article> ist mit <section> verwandt, unterscheidet sich jedoch deutlich. Während <section> zum Gruppieren bestimmter Abschnitte von Inhalten oder Funktionen dient, enthält <article> verwandte einzelne eigenständige Inhalte, z. B. einzelne Blogeinträge, Videos, Bilder oder Nachrichten. Stellen Sie sich das so vor: Wenn Sie eine Reihe von Inhalten haben, von denen jeder für sich allein zum Lesen geeignet ist, und es sinnvoll wäre, sie als separate Elemente in einem RSS-Feed zu syndizieren, eignet sich <article> zum Markieren . In unserem Beispiel enthält <section id="main"> Blogeinträge. Jeder Blogeintrag eignet sich zum Syndizieren als Element in einem RSS-Feed und ist sinnvoll, wenn er für sich allein gelesen wird. Aus diesem Grund ist <article> 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 einheitliche Struktur mit unterschiedlichen 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>

<header> UND <footer>

wie oben bereits erwähnt, besteht der Zweck der Elemente <header> und <footer> darin, den Inhalt der Kopf- bzw. Fußzeile umzubrechen. In unserem speziellen Beispiel enthält das <header>-Element ein Logo-Bild und das <footer>-Element einen Copyright-Hinweis. Sie können jedoch auch ausführlicheren Inhalt hinzufügen, wenn Sie dies wünschen. Beachten Sie auch, dass Sie auf jeder Seite mehr als eine Kopf- und Fußzeile haben können - ebenso wie die Kopf- und Fußzeile der obersten Ebene, die wir gerade besprochen haben, könnten Sie auch ein <header>- und <footer> -Element in jedem <article> -Element verschachteln, in welchem ​​Fall dies auch der Fall wäre gelten für diesen bestimmten Artikel. Hinzufügen zu unserem obigen Beispiel:

<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>

<nav>

Das Element <nav> dient zum Markieren der Navigationslinks oder anderer Konstrukte (z. B. eines Suchformulars), mit denen Sie zu verschiedenen Seiten der aktuellen Site oder zu verschiedenen Bereichen der aktuellen Seite gelangen. Andere Links, wie zum Beispiel gesponserte Links, zählen nicht. Sie können natürlich Überschriften und andere strukturierende Elemente in den <nav> einfügen, dies ist jedoch nicht obligatorisch.

<aside>

sie haben vielleicht bemerkt, dass wir ein <aside> -Element verwendet haben, um die zweite Seitenleiste zu markieren: die mit den neuesten Auftritten und Kontaktdaten. Dies ist vollkommen angemessen, da <aside> zum Markieren von Informationen dient, die sich auf den Hauptfluss beziehen, aber nicht direkt in diesen passen. Und der Hauptinhalt in diesem Fall dreht sich alles um die Band! Eine weitere gute Wahl für einen <aside> wären Informationen über den Autor des Blogposts, eine Bandbiographie oder eine Banddiskographie mit Links zum Kauf ihrer Alben.

Wo bleibt <div>?

Mit all diesen großartigen neuen Elementen, die wir auf unseren Seiten verwenden können, sind die Tage des bescheidenen <div> sicherlich gezählt. NEIN. Tatsächlich hat der <div> immer noch eine einwandfreie Verwendung. Sie sollten es verwenden, wenn kein anderes geeigneteres Element zum Gruppieren eines Inhaltsbereichs verfügbar ist. Dies ist häufig der Fall, wenn Sie ein Element lediglich zum Gruppieren von Inhalten für Stil-/visuelle Zwecke verwenden. Ein häufiges Beispiel ist die Verwendung eines <div> zum Umbrechen des gesamten Inhalts auf der Seite und die anschließende Verwendung von CSS zum Zentrieren des gesamten Inhalts im Browserfenster oder das Anwenden eines bestimmten Hintergrundbilds auf den gesamten Inhalt.

62
Justin

[ Erläuterungen in meiner "Hauptantwort" ]

Zeile 7. Abschnitt um die gesamte Website? Oder nur ein Div ?

Weder. Zum Stylen: benutze den <body>, er ist schon da. Für Sektionierung/Semantik: wie in meinem HTML-Beispiel beschrieben seine Wirkung widerspricht der Nützlichkeit. Zusätzliche Wrapper für bereits eingepackte Inhalte sind keine Verbesserung, sondern Rauschen.


Zeile 8. Jeder Abschnitt beginnt mit einer Überschrift?

Nein, der Autor hat die Wahl, wo der Inhalt in der Regel als "Überschrift" zusammengefasst wird. Und wenn dieser Header-Inhalt ohne zusätzliche Markierung klar erkennbar ist, kann er auch ohne <header> bestehen bleiben. Dies ist auch die Wahl des Autors.


Zeile 23. Ist das div richtig? oder muss das ein Abschnitt sein ?

Der <div> ist wahrscheinlich falsch. Es kommt auf die Absichten an: Ist es für das Styling nur es könnte richtig sein. Wenn es für semantische Zwecke ist, ist es falsch: Es sollte stattdessen ein <article> sein wie in meiner anderen Antwort gezeigt . <article> ist auch richtig, wenn es sowohl für das Stylen als auch für das Schneiden kombiniert ist.

<section> sieht hier falsch aus, da es davor oder danach keine ähnlichen Abschnitte gibt, wie Kapitel in einem Buch. (Dies ist der Zweck von <section>).


Zeile 24. Linke/rechte Spalte mit einem div teilen.

Nein, warum?


Zeile 25. Richtiger Platz für das article tag?

Ja, macht Sinn.


Zeile 26. Muss Ihr h1 - Tag in den Header - Tag eingefügt werden?

Nein. Ein einzelnes <h*> -Element muss wahrscheinlich nie in ein <header> -Element eingefügt werden (kann es aber, wenn Sie möchten), da bereits klar ist, dass es die Überschrift dessen ist, was in Kürze kommt. - Es wäre sinnvoll, wenn <header> auch einen Slogan (markiert mit <p>) enthalten würde.


Zeile 43. Der Inhalt bezieht sich nicht auf den Hauptartikel, daher habe ich entschieden, dass dies ein Abschnitt und kein beiseite ist.

Es ist ein Missverständnis, dass ein <aside> "tangential bezogen " zum Inhalt sein muss. Der Punkt ist: Verwenden Sie einen <aside>, wenn der Inhalt nur " tangential verbunden" ist oder überhaupt nicht!

Abgesehen davon, dass <aside> eine anständige Wahl ist, ist <article> möglicherweise immer noch besser als ein <section>, da "heiße Gegenstände" und "neue Gegenstände" nicht wie zwei Kapitel in einem gelesen werden dürfen Buch. Sie können sich perfekt für eines von ihnen entscheiden und nicht für das andere wie eine alternative Sortierung von etwas, nicht wie zwei Teile eines Ganzen.


Zeile 44. H2 ohne Header

Ist toll.


Zeile 53. Abschnitt ohne Kopfzeile

Nun, es gibt keinen <header>, aber die <h2>- Überschrift lässt ziemlich klar, welcher Teil in diesem Abschnitt die Überschrift ist.


Zeile 63. Div mit allen (nicht verwandten) Nachrichten

<article> oder <aside> sind möglicherweise besser.


Zeile 64. header mit h2

Bereits besprochen.


Zeile 65. Hmm, div oder section ? Oder entfernen Sie diese div und verwenden Sie nur die article -Etikett

Genau! Entfernen Sie den <div>.


Zeile 105. Fußzeile :-)

Sehr vernünftig.

22
Robert Siemer

Gemäß die Erklärung in meiner "Haupt" -Antwort sollte das betreffende Dokument entsprechend einer Gliederung gekennzeichnet werden.

In den folgenden zwei Tabellen zeige ich:

  • das ursprüngliche HTML und seine Gliederung
  • eine mögliche beabsichtigte Gliederung und das HTML, das das tut

original html (shortened)
<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>

original html relevant for outline
<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>












































resulting outline
1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3)


Der Umriss des Originals ist
definitiv nicht das, was beabsichtigt war.


































































Die folgende Tabelle zeigt meinen Vorschlag für eine verbesserte Version. Ich benutze das folgende Markup:

  • <removed>
  • <NEW_OR_CHANGED_ELEMENT>
  • <element MOVED_ATTRIBUTE=1>

possible intended outline
1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3










































































modified html
<body>  <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main>   <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article>   </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header>   <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article>   </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer>  </section>``

resulting outline
1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav)


Der geänderte HTML-Code spiegelt die
beabsichtigten Umriss viel besser als
das Original.

































































19
Robert Siemer

Der Hauptfehler: Sie haben "Divitis" im gesamten Dokument.
Warum das?

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

Anstatt von:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

Verwenden Sie zum Stilisieren dieses Headers die CSS-Hierarchie: body> section> header> h1, body> section> header> h2

Mehr, ... Zeile 63: Warum bricht der Header h2 um? Wenn der Header kein Element mehr enthält, verwenden Sie einfach ein einzelnes h2.
Denken Sie daran, dass Ihre Struktur nicht darin besteht, Dokumente zu stilisieren, sondern ein selbsterklärendes Dokument zu erstellen.

Wenden Sie dies auf den Rest des Dokuments an. Viel Glück ;)

17
Covi

Warum haben Sie nicht die IDs item_1, item_2 usw. auf den Artikel-Tags selbst? So was:

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

Es scheint unnötig, die Wrapper-Divs hinzuzufügen. ID-Werte haben in HTML keine semantische Bedeutung, daher halte ich dies für absolut gültig. Sie sagen also nicht, dass der erste Artikel immer item_1 ist, sondern nur item_1 im Kontext der aktuellen Seite . IDs müssen keine kontextunabhängige Bedeutung haben.

Was Ihre Frage in Zeile 26 betrifft, ist das <header> -Tag meiner Meinung nach dort nicht erforderlich, und Sie können es auch weglassen, da es in der Div "main-left" für sich allein steht. Wenn es in der Hauptliste der Artikel wäre, könnten Sie das <header> -Tag nur aus Gründen der Konsistenz einschließen.

10
Matt Browne
  1. Abschnitt sollte nur verwendet werden, um einen Abschnitt in ein Dokument einzufügen (wie Kapitel und ähnliches).
  2. Mit Header Tag: NO. Das Header-Tag stellt einen Wrapper für den Seitenkopf dar und ist nicht mit H1, H2 usw. zu verwechseln.
  3. Welcher Div? : D
  4. Ja
  5. Von den W3C-Schulen:

    Das Tag definiert externen Inhalt. Der externe Inhalt kann ein Nachrichtenartikel eines externen Anbieters oder ein Text aus einem Weblog (Blog) oder ein Text aus einem Forum oder ein anderer Inhalt aus einer externen Quelle sein.

  6. Nein, das Header-Tag hat eine andere Verwendung. H1, H2 usw. stehen für die wichtigsten Dokumenttitel H1

Andere habe ich nicht beantwortet, weil es schwer zu erraten ist, worauf Sie sich beziehen. Wenn Sie weitere Fragen haben, lassen Sie es mich bitte wissen.

5
MeanEYE

Hier ist mein Beispiel, in dem ich arbeite

enter image description here

3
Ivan
<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

EDIT: Leider muss ich mich korrigieren.

Siehe unten https://stackoverflow.com/a/17935666/2488942 für einen Link zu den w3-Spezifikationen, die ein Beispiel enthalten (im Gegensatz zu denen, die ich zuvor angeschaut habe).

Aber dann ... hier ist dank @Fez ein netter Artikel darüber.

Meine ursprüngliche Antwort war:

Die Struktur der w3-Spezifikationen:

4.3.4 Abschnitte

4.3.4.1 Das Körperelement

4.3.4.2 Das Abschnittselement

4.3.4.3 Das nav-Element

4.3.4.4 Das Artikelelement

....

schlägt mir vor, dass section höher ist als article. Wie in diese Antwortsection erwähnt, werden thematisch verwandte Inhalte gruppiert. Der Inhalt eines Artikels ist meiner Meinung nach ohnehin thematisch verwandt, daher deutet dies zumindest für mich auch darauf hin, dass section auf einer höheren Ebene gruppiert als article.

Ich denke, es soll so verwendet werden:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

oder für eine News-Website:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014
1
pandita

„Zeile 23. Stimmt das? oder muss das ein abschnitt sein? “

Weder noch - es gibt ein main -Tag für diesen Zweck, das nur einmal pro Seite zulässig ist und als Wrapper für den Hauptinhalt verwendet werden sollte (im Gegensatz zu einer Seitenleiste oder einer standortweiten Kopfzeile).

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

1
feeela

Ich denke nicht, dass Sie das Tag in der Nachrichtenübersicht verwenden sollten (Zeilen 67, 80, 93). Sie könnten Abschnitt verwenden oder nur das einschließende div haben.

Ein Artikel muss in der Lage sein, für sich zu stehen und dennoch Sinn zu ergeben oder vollständig zu sein. Da es unvollständig oder nur ein Auszug ist, kann es kein Artikel sein, es ist eher ein Abschnitt.

Wenn Sie auf "Weiterlesen" klicken, kann die nachfolgende Seite angezeigt werden

1
conordarcy

Ich möchte diese Frage genauer klären, mich korrigieren, wenn ich falsch liege. Nehmen wir ein Beispiel für eine Facebook-Pinnwand

1.Wall befindet sich unter "section", was bedeutet, dass es von der Seite getrennt ist.

2. Alle Beiträge werden unter dem Tag "Artikel" angezeigt.

3. Dann haben wir einen einzelnen Beitrag, der unter "Abschnitt" -Tag steht.

3.Wir haben die Überschrift "X user post this", dafür können wir das Tag "heading" verwenden.

4.Dann haben wir drei Bereiche: Bilder/Text, Like-Share-Kommentar-Button und Kommentarfeld.

5.Für das Kommentarfeld können wir das Artikel-Tag verwenden.

0
Flicks Gorger

Laut Nathans Antwort ist dies vollkommen sinnvoll (für rote und orangefarbene Teile könnten Sie möglicherweise divs und/oder header bzw. footer verwenden):

enter image description here

0
alejnavab