HTML5 best practices;Abschnitt/überschrift/neben/Artikel-Elemente

https://stackoverflow.com/questions/4781077

23-10-2019
|

Frage

Es ist genug Informationen über HTML5 im web (und auch auf stackoverflow), aber jetzt bin ich neugierig auf die "best practices".Tags wie section/Header/Artikel neu sind, und jeder hat unterschiedliche Meinungen darüber, Wann/wo soll Sie diese tags verwenden.So was denken Sie von dem folgenden 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 um die gesamte website?Oder nur ein div?

die Linie 8.Jeder section beginnen Sie mit einem header?

Zeile 23.Ist dies div Recht?oder muss das ein section?

Zeile 24.Split Links/Rechte Spalte ein div.

(Zeile 25).Rechts Platz für die article tag?

Zeile 26.Ist es erforderlich, um Ihre h1-tag in der header-tag?

Zeile 43.Der Inhalt ist nicht im Zusammenhang mit den Haupt-Artikel, also habe ich beschlossen, dass dies ist ein section und nicht eine aside.

line 44.H2 ohne header

Linie 53. section ohne header

Linie 63.Div mit allen (nicht-Verwandte) news

mit der Linie 64. header mit h2

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

Linie 105.Fußzeile :-)

Lösung

Eigentlich haben Sie ganz Recht, wenn es um Header/Fußzeile geht. Hier finden Sie einige grundlegende Informationen darüber, wie jeder der wichtigsten HTML5 -Tags verwendet werden kann (ich schlage vor, die vollständige Quelle zu lesen, die unten verlinkt ist):

Sektion -Wird zum Gruppieren von thematisch verwandten Inhalten verwendet. Klingt nach einem DIV -Element, aber es ist nicht. Die DIV hat keine semantische Bedeutung. Bevor Sie alle Ihre DIVs durch Abschnittselemente ersetzen, fragen Sie sich immer: "Ist alle Inhalte verwandt?"

beiseite - Wird für tangential verwandte Inhalte verwendet. Nur weil einige Inhalte links oder rechts vom Hauptinhalt erscheint, ist nicht ausreichend Grund, das beiseite zu verwenden. Fragen Sie sich, ob der Inhalt unter der Abseite entfernt werden kann, ohne die Bedeutung des Hauptinhalts zu verringern. Pullquotes sind ein Beispiel für tangential verwandte Inhalte.

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

Navigation - für wichtige Navigationsinformationen vorgesehen. Eine Gruppe von Links, die zusammengefasst sind, ist nicht genug Grund, das NAV -Element zu verwenden. Die ortsweite Navigation gehört dagegen in ein Marine-Element.

Fusszeile - Klingt nach einer Beschreibung der Position, aber nicht. Fußzeile Elemente enthalten Informationen zu seinem enthaltenden Element: Wer es geschrieben hat, Urheberrecht, Links zu verwandten Inhalten usw. Während wir normalerweise eine Fußzeile für ein ganzes Dokument haben, ermöglicht es uns mit HTML5, auch Fußzeile innerhalb von Abschnitten zu haben.

Quelle: http://www.anthonycalzadilla.com/2010/08/html5-section-assie-header-nav-foter-element-not-as-oBvious-as-they-sound/

Darüber hinaus finden Sie eine Beschreibung auf article, nicht in der obigen Quelle gefunden:

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

Andere Tipps

Leider sind die bisher gegebenen Antworten (einschließlich der am meisten gewählten) entweder "nur" gesunder Menschenverstand, klarer oder bestenfalls verwirrend. Keiner von entscheidenden Schlüsselwörtern¹ aufpoppen!

Ich habe 3 Antworten geschrieben:

Um die Rolle der hier diskutierten HTML -Elemente zu verstehen, müssen Sie wissen, dass einige von ihnen das Dokument abnehmen. Jedes HTML -Dokument kann sein gemäß den HTML5 -Umrissalgorithmus Zum Zwecke der Erstellung einer Übersicht - ⁠or⁠ - table des Inhalts (TOC). Der Umriss ist (heutzutage) im Allgemeinen nicht sichtbar, aber die Autoren sollten HTML so verwenden, dass die daraus resultierende Zinslinie ihre Absichten widerspiegelt.

Sie können Abschnitte mit erstellen exakt diese Elemente und nichts anderes:

Erstellen (explizite) Unterabschnitte
- <section> Abschnitte
- <article> Abschnitte
- <nav> Abschnitte
- <aside> Abschnitte
Erstellen von Geschwisterabschnitten oder Unterabschnitten
- Abschnitte des nicht näher bezeichneten Typs mit <h*>^² (Nicht alle tun dies, siehe unten)
Um den aktuellen expliziten (Sub-) Abschnitt auszuschließen

Abschnitte können benannt werden:

<h*> Erstellte Abschnitte nennen sich selbst
<section|article|nav|aside> Abschnitte werden vom ersten benannt <h*> wenn es einen gibt
- diese <h*> sind die einzigen, die selbst keine Abschnitte erstellen

Abschnitte haben noch eine Sache: Die folgenden Kontexte (dh Elemente) erstellen "Umrissgrenzen". Was auch immer Abschnitte sind, die sie enthalten, ist für sie privat:

das Dokument selbst mit <body>
Tabellenzellen mit <td>
<blockquote>
<details>, <dialog>, <fieldset>, und <figure>
nichts anders

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 Nistebene an
<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, einer <article>, zumindest auf der niedrigsten Ebene
- Standardbeispiel: Ein einzelner Blog -Kommentar
- Ein Blogeintrag selbst ist auch ein gutes Beispiel
- Ein Blogeintrag <article> und sein Kommentar <article>S könnte auch mit einem verpackt werden <article>
- Es ist eine "vollständige" Sache, kein Teil einer Reihe ähnlicher
<section>s in an <article> sind wie Kapitel in einem Buch
<article>s in a <section> sind wie Gedichte in einem Band (innerhalb einer Reihe)

Wie macht <header>, <footer> und <main> sich einfügen?

Sie haben Null Einfluss beim Schneiden
<header> und <footer>
- Sie ermöglichen es Ihnen, Zonen von zu markieren alles und jeder Sektion
- Auch innerhalb eines Abschnitts können Sie sie mehrmals haben
- sich vom Hauptteil unterscheiden in diesem Abschnitt
- nur durch den Geschmack des Autors begrenzt
- <header>
  - Kann den Titel/den Namen dieses Abschnitts markieren
  - Kann ein Logo für diesen Abschnitt enthalten
  - muss nicht oben oder oberer Teil des Abschnitts sein
- <footer>
  - kann die Credits/Autor dieses Abschnitts markieren
  - kann oben im Abschnitt kommen
  - kann sogar über a sein <header>
<main>
- nur einmal erlaubt
- markiert den Hauptteil des Abschnitts der obersten Ebene (dh das Dokument, <body> das ist)
- Unterabschnitte selbst haben kein Aufschlag für ihren Hauptteil
- <main> kann sogar in einigen Unterabschnitten des Dokuments "verstecken", während Dokument des Dokuments <header> und <footer> Kann nicht (dieses Markup würde dann die Header/Fußzeile dieses Unterabschnitts markieren)
  - Aber es ist nicht erlaubt <article> Abschnitte³
- Hilft, „die reale Sache“ von Nicht-Header-, Nicht-Füßer- und Nicht-Main-Inhalten des Dokuments zu unterscheiden, wenn dies in Ihrem Fall Sinn macht ...

^{¹ In den Sinn kommt: Umriss, Algorithmus, implizite Schnitt}
^{² ich benutze <h*> als Abkürzung für <h1>, <h2>, <h3>, <h4>, <h5> und <h6>}
^{³ auch nicht <main> erlaubt in <aside> oder <nav>, aber das ist keine Überraschung. - Tatsächlich: <main> kann sich nur in (verschachtelten) absteigend verstecken <section> Abschnitte oder erscheinen auf oberster Ebene, nämlich <body>}

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 wie Folgendes aussehen:

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

Möglicherweise finden Sie weitere Informationen in Dieser Artikel auf einer Liste auseinander.

Ich würde vorschlagen, das Lesen der W3-wiki-Seite über die Strukturierung HTML5:

<header> Verwendet, um enthalten die header-Inhalt einer Website. <footer> Enthält die Fußzeile Inhalt einer Website. <nav> Enthält die navigation im Menü, oder andere Navigations-Funktionen für die Seite.

<article> Enthält ein eigenständiges Stück von Inhalten, die machen würde
Sinn, wenn syndiziert, wie ein RSS-Element, zum Beispiel eine news-Artikel.

<section> Verwendet, um entweder in der Gruppe verschiedene Artikel in verschiedenen
Zwecke oder Themen, oder um die verschiedenen Abschnitte eines einzigen Artikel.

<aside> Definiert einen block von Inhalten, die im Zusammenhang mit der Haupt - Inhalt um ihn herum, aber nicht zentral auf den Fluss.

Sie beinhalten ein Bild ich habe hier aufgeräumt:

html5

In code, dieser sieht so aus:
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
Lassen Sie uns erkunden einige der HTML5-Elemente im detail.

<section>

Die <section> element ist für die ausgeprägten unterschiedlichen Bereichen Funktionalität oder Themen-Bereich, oder brechen Sie einen Artikel oder eine Geschichte, die bis in verschiedenen Abschnitten.So in diesem Fall:"sidebar1" enthält verschiedene nützliche links, die beibehalten wird auf jeder Seite der Website, wie "subscribe to RSS" und "Kaufen Sie Musik aus dem Speicher"."main" enthält die Hauptinhalt dieser Seite, welche blog-Beiträge.Auf anderen Seiten der Website, diese Inhalte zu ändern.Es ist ein ziemlich generisches element, aber noch mehr semantische Bedeutung als die einfache alte <div>.

<article>

<article> verwandt ist <section>, ist aber deutlich anders.In der Erwägung, dass <section> ist für die Gruppierung der verschiedene Abschnitte des Inhalts oder Funktionalität, <article> ist im Zusammenhang mit einzelnen standalone Teile des Inhalts, wie einzelne blog-Beiträge, videos Bilder oder Nachrichten.Denken Sie an es auf diese Weise - wenn Sie haben eine Reihe von Inhalte, von denen jeder wäre geeignet für das Lesen auf Ihrem eigenen, und würde Sinn machen, syndicate als separate Elemente in einem RSS Futter, dann <article> ist geeignet für Kennzeichnung auf.In unserem Beispiel <section id="main"> enthält, blog-Einträge.Jeder blog-Eintrag passend für syndicating als ein Element in einem RSS-feed, und würde Sinn machen, wenn man Sie auf seine eigene, aus dem Kontext gerissen, daher <article> perfekt für Sie:
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
Einfach, nicht wahr?Seien Sie sich aber bewusst, dass Sie auch Abschnitte im nest Artikel, in denen es Sinn macht, dies zu tun.Zum Beispiel, wenn jeder von diese blog-posts hat eine einheitliche Struktur der unterschiedlichen Abteilungen, dann Sie können Abschnitte in Ihrem Artikel als gut.Könnte es Aussehen so etwas wie dieses:
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> und <footer>

wie wir oben schon erwähnt haben, der Zweck der <header> und <footer> Elementen ist, wickeln Sie Kopf-und Fußzeile Inhalt, bzw.In unserem speziellen Beispiel der <header> element enthält ein logo, Bild, und die <footer> element enthält einen copyright beachten, aber man könnte hinzufügen, mehr aufwendige Inhalte, wenn Sie wollte.Auch beachten Sie, dass Sie mehr als eine Kopfzeile und Fußzeile, die auf jeder Seite - sowie die top-level-header-und footer-wir haben gerade eben besprochen, Sie könnte auch eine <header> und <footer> element nested innerhalb jeder <article>, in diesem Fall würden Sie nur auf, dass insbesondere Artikel.Zusätzlich zu unserer obigen Beispiel:
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<nav>

Die <nav> element ist für die Markierung, bis Sie die navigation links oder andere Konstrukte (z.B. ein such-Formular), werden Sie auf unterschiedlichen Seiten von der aktuellen Website oder anderen Bereichen der aktuellen Seite.Andere links wie die gesponserten links, die nicht zu zählen.Natürlich können Sie zählen überschriften und andere strukturierende Elemente im inneren des <nav>, aber es ist nicht zwingend.

<aside>

Sie haben vielleicht bemerkt, dass wir eine <aside> element, um die markup - 2. Seitenleiste:die eine, die neuesten Auftritte und Kontaktdaten.Diese ist perfekt geeignet, wie <aside> ist die Auszeichnungssprache für Stück Informationen in Bezug auf den main Fluss, passt aber nicht, um es direkt.Und die wichtigsten Inhalte in diesem Fall ist alles über die band!Andere gute Entscheidungen für eine <aside> würde Informationen über die Autor der blog-post(s), eine band-Biographie, oder eine band Diskografie mit links zu kaufen Ihre Alben.

Wo bleiben <div>?

Also, mit all diesen tollen neuen Elemente verwenden auf unseren Seiten die Tage die bescheidenen <div> nummeriert sind, sicher?NEIN.In der Tat, die <div> hat immer noch ein perfekt gültiges verwenden.Sie sollten es verwenden, wenn es keine andere mehr geeignete element verfügbar für die Gruppierung einer Fläche von Inhalten, oft werden, wenn Sie rein unter Verwendung eines Elements der Gruppe gemeinsam Inhalte für Gestaltung/visuelle Zwecke.Ein häufiges Beispiel ist mit einem <div> wickeln Sie den Inhalt auf der Seite, und klicken Sie dann mithilfe CSS-Zentrum sämtliche Inhalte in das browser-Fenster, oder geben Sie einen bestimmte hintergrund-Bild, um den gesamten Inhalt.

[Erklärungen in meiner „Hauptantwort“]

Zeile 7. Sektion rund um die gesamte Website? Oder nur a div?

Weder. Zum Styling: Verwenden Sie die <body>, Es ist schon da. Für das Abschnitt/Semantik: Wie in meinem Beispiel html detailliert Seine Wirkung widerspricht der Nützlichkeit. Zusätzliche Verpackungen für bereits verpackte Inhalte sind keine Verbesserung, sondern Rauschen.

Zeile 8. Jeder Abschnitt beginnt mit einem Kopfball?

Nein, es ist die Wahl des Autors, in der Inhalte in der Regel als „Header“ zusammengefasst werden sollen. Und wenn dieser Header-Inhalt ohne zusätzliche Markierung deutlich erkennbar ist, kann er perfekt ohne bleiben <header>. Dies ist auch die Wahl des Autors.

Zeile 23. ist das div Rechts? oder muss dies ein sein Sektion?

Das <div> ist wahrscheinlich falsch. Es hängt von den Absichten ab: Ist es nur zum Styling, es könnte richtig sein. Wenn es für semantische Zwecke ist, ist es falsch: Es sollte ein sein <article> stattdessen Wie in meiner anderen Antwort gezeigt. <article> ist auch richtig, wenn es sowohl für das Styling als auch für das Abschnitt zusammengefasst ist.

<section> Sieht hier falsch aus, da es vor oder nach diesen Kapiteln in einem Buch keine ähnlichen Abschnitte gibt. (Dies ist der Zweck von <section>).

Zeile 24. Spalte links/rechts aufgeteilt mit a div.

Nein, warum?

Zeile 25. richtiger Ort für die Artikel Schild?

Ja, macht Sinn.

Zeile 26. Ist es erforderlich, Ihre zu setzen? H1-Tag in der Header-Schild?

Nicht allein <h*> Element muss wahrscheinlich nie in a gehen <header> (Aber wenn Sie wollen), wie es bereits klar ist, dass es die Überschrift dessen ist. - Es wäre sinnvoll, wenn das <header> umfasste auch einen Slogan (gekennzeichnet mit <p>), zum Beispiel.

Zeile 43. Der Inhalt bezieht sich nicht mit dem Hauptartikel, daher habe ich beschlossen, dass dies a ist Sektion und nicht ein beiseite.

Es ist ein Missverständnis, dass eine <aside> muss „tangential sein verbunden”Zum Inhalt. Der Punkt ist: Verwenden Sie eine <aside> Wenn der Inhalt nur ist “tangential verwandt ”oder überhaupt nicht!

Trotzdem abgesehen von abgesehen von <aside> eine anständige Wahl sein, <article> Könnte immer noch besser sein als a <section> Da „heiße Artikel“ und „neue Gegenstände“ nicht wie zwei Kapitel in einem Buch gelesen werden sollen. Sie können sich perfekt für einen von ihnen und nicht für den anderen entscheiden wie eine alternative Sortierung von etwas, nicht wie zwei Teile eines Ganzen.

Zeile 44. H2 ohne Header

Ist toll.

Zeile 53. Sektion ohne Header

Nun, es gibt keine <header>, aber die <h2>-Heading bleibt ziemlich klar, welcher Teil in diesem Abschnitt der Header ist.

Zeile 63. Div mit allen (nicht verwandten) Nachrichten

<article> oder <aside> Könnte besser sein.

Zeile 64. Header mit H2

Bereits diskutiert.

Linie 65. Hmm, div oder Sektion? Oder entfernen Sie dies div und benutze nur das Artikel-Schild

Exakt! Entferne das <div>.

Zeile 105. Fusszeile :-)

Sehr vernünftig.

Entsprechend Die Erklärung in meiner "Haupt" -Anantwortung Das fragliche Dokument sollte gemäß einer Umrisse markiert werden.

In den folgenden zwei Tabellen zeige ich:

das ursprüngliche HTML und seine Umrisse
ein möglicher beabsichtigter Umriss und der HTML, die dies tun

Original HTML (verkürzt) _{<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 für den Umriss _{<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>} resultierende Umrisse 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>

Möglicher beabsichtigter Umriss 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 Modifiziertes 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>``} resultierende Umrisse 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) Die modifizierte HTML spiegelt die wider beabsichtigte Umrisse viel besser als das Original.

Der Hauptfehler: Sie haben im gesamten Dokument "Divitis".
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 die CSS -Hierarchie, um diesen Header zu stylieren: Körper> Abschnitt> Header> H1, Körper> Abschnitt> Header> H2

MEHR, ... Zeile 63: Warum Header H2 wickelt? Wenn Sie kein Element in den Kopfzeile mehr einfügen, verwenden Sie einfach ein einzelnes H2.
Beachten Sie, dass Ihre Struktur nicht darin besteht, das Dokument zu stylieren, sondern ein selbst erläutertes Dokument zu konstruieren.

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

Warum nicht die Item_1, item_2 usw. IDs auf den Artikel -Tags selbst haben? 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 denke ich, dass es vollkommen gültig wäre - Sie sagen nicht, dass der erste Artikel ist stets item_1, nur item_1 im Kontext der aktuellen Seite. IDs müssen keine Bedeutung haben, die vom Kontext unabhängig ist.

In Bezug auf Ihre Frage in Zeile 26 denke ich auch nicht dasu003Cheader> Dort ist Tag erforderlich, und ich denke, Sie könnten es weglassen, da es alleine in der "Hauptlinks" -Div ist. Wenn es in der Hauptliste der Artikel wäre, möchten Sie möglicherweise die einbeziehenu003Cheader> Tag nur für Konsistenz.

Der Abschnitt sollte nur verwendet werden, um einen Abschnitt in ein Dokument zu wickeln (wie Kapitel und ähnlich)
Mit Header Tag: Nein. Header -Tag repräsentiert einen Wrapper für den Seitenkopf und darf nicht mit H1, H2 usw. verwechselt werden.
Welche Div? :D
Ja
Von W3C -Schulen:

Das Tag definiert externen Inhalt. Der externe Inhalt kann ein Nachrichten-Künstler aus einem externen Anbieter oder eines Textes aus einem Webprotokoll (Blog) oder einem Text aus einem Forum oder einem anderen Inhalt einer externen Quelle sein.
Nein, Header -Tag hat eine andere Verwendung. H1, H2 usw. darstellen Dokumenttitel H1 ist die wichtigste

Ich habe andere nicht beantwortet, weil es schwierig ist, zu erraten, worauf Sie sich beziehen. Wenn es weitere Fragen gibt, lassen Sie es mich bitte wissen.

Hier ist mein Beispiel, in dem ich arbeite

enter image description here

<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

Ich glaube nicht, dass Sie das Tag in der Nachrichtenübersicht verwenden sollten (Zeilen 67, 80, 93). Sie können einen Abschnitt verwenden oder einfach die entsprechende DIV haben.

Ein Artikel muss in der Lage sein, für sich selbst zu stehen und immer noch Sinn zu ergeben oder vollständig zu sein. Als unvollständiger oder nur ein Extrakt kann es kein Artikel sein, ist es eher ein Abschnitt.

Wenn Sie auf "Weitere" klicken, können Sie die nachfolgende Seite können

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 denjenigen, die ich zuvor gesehen habe).

Aber dann....Hier ist ein schöner Artikel darüber dank @Fez.

Meine ursprüngliche Antwort war:

Die Art und Weise, wie die W3 -Spezifikationen strukturiert sind:

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 das vor section ist höher als article. Wie in Diese Antwort section Gruppen thematisch verwandte Inhalte. Inhalt innerhalb eines Artikels hängt meiner Meinung nach sowieso thematisch zusammen, daher schlägt dies zumindest für mich auch vor section Gruppen auf einem höheren Niveau im Vergleich zu 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 Nachrichtenwebsite:

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

„Zeile 23. Ist das Div richtig? oder muss dies ein Abschnitt sein? “

Auch nicht - da gibt es eine main Tag für diesen Zweck, der nur einmal pro Seite zulässig ist und als Wrapper für den Hauptinhalt verwendet werden sollte (im Gegensatz zu einer Seitenleiste oder einem ortsweiten Kopfzeilen).

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

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

Ich möchte diese Frage genauer klären, korrigieren Sie mich, wenn ich falsch liege

1.Wall kommt unter "Abschnitt" -Tag, das bezeichnet, dass es von der Seite getrennt ist.

2. Alle Beiträge kommen unter "Artikel" -Tag.

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

3. Wir haben eine Überschrift "X -Benutzer Post dies" dafür können wir "Überschrift" -Tag verwenden.

4. Innerhalb des Beitrags haben wir drei Abschnitt 1 sind Bilder/Text wie Share-Coment-Schaltfläche und Kommentarbox.

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

Entsprechend Nathans Antwort, Dies ist vollkommen sinnvoll (für rote und orangefarbene Teile könnten Sie vielleicht verwenden div's und/oder header und footer beziehungsweise):

Lizenziert unter: CC-BY-SA mit Zuschreibung

Nicht verbunden mit StackOverflow