html - description - title tag definition




Best Practices für HTML5; Abschnitt/Kopfzeile/Seite/Artikelelemente (10)

  1. Abschnitt sollte nur dazu verwendet werden, einen Abschnitt innerhalb eines Dokuments zu umbrechen (wie Kapitel und ähnliches)
  2. Mit Header- Tag: NEIN. Header-Tag stellt einen Wrapper für den Seitenkopf dar und ist nicht mit H1, H2 usw. zu verwechseln.
  3. Welches div? : D
  4. Ja
  5. Von W3C Schulen:

    Das Tag definiert externen Inhalt. Der externe Inhalt kann ein Nachrichtenartikel von einem externen Anbieter oder ein Text aus einem Webprotokoll (Blog) oder ein Text aus einem Forum oder ein anderer Inhalt aus einer externen Quelle sein.

  6. Nein, Header-Tag hat eine andere Verwendung. H1, H2 usw. stellen Dokumenttitel dar, wobei H1 der wichtigste ist

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

Es gibt genug Informationen über HTML5 im Web (und auch über Stackoverflow), aber jetzt bin ich neugierig auf die "Best Practices". Tags wie Abschnitt / Kopfzeilen / Artikel sind neu und jeder hat unterschiedliche Meinungen darüber, wann / wo Sie diese Tags verwenden sollten. Was denkst du über folgendes Layout und Code?

  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>

Linie 7. section um die ganze Website? Oder nur ein div ?

Zeile 8. Jeder section beginnt mit einem header ?

Linie 23. Ist das richtig? oder muss das ein section ?

Zeile 24. Geteilte linke / rechte Spalte mit einem div .

Zeile 25. Der richtige Platz für das article Tag?

Zeile 26. Ist es erforderlich, das h1 -Tag im header Tag zu setzen?

Zeile 43. Der Inhalt bezieht sich nicht auf den Hauptartikel, also habe ich entschieden, dass es sich um einen section und nicht um eine aside .

Zeile 44. H2 ohne header

Zeile 53. section ohne header

Zeile 63. Div mit allen (nicht verwandten) Nachrichten

Zeile 64. header mit h2

Linie 65. Hmm, div oder section ? Oder entferne dieses div und verwende nur den article -Tag

Zeile 105. Fußzeile :-)



EDIT: Leider muss ich mich korrigieren.

Siehe unten https://.com/a/17935666/2488942 für einen Link zu den W3-Spezifikationen, die ein Beispiel enthalten (anders als die, die ich zuvor angeschaut habe).

Aber dann .... Here ist ein schöner Artikel über @Fez.

Meine ursprüngliche Antwort war:

Die Art, 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 Element nav

4.3.4.4 Das Artikelelement

....

schlägt mir vor, dass section höher als article . Wie in diesem Antwortabschnitt erwähnt, werden thematisch verwandte Inhalte gruppiert. Der Inhalt innerhalb eines Artikels ist meiner Meinung nach thematisch verwandt, daher sagt dies zumindest für mich, dass auch section auf einer höheren Ebene gegenüber article .

Ich denke, es soll so benutzt 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 Nachrichten-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

Eigentlich haben Sie recht, wenn es um Kopfzeile / Fußzeile geht. Hier sind einige grundlegende Informationen darüber, wie die wichtigsten HTML5-Tags verwendet werden können / sollten (ich empfehle, die vollständige Quelle zu lesen, die unten verlinkt ist):

Abschnitt - Wird verwendet, um thematisch verwandten Inhalt zu gruppieren. Klingt wie ein div Element, aber es ist nicht. Das div hat keine semantische Bedeutung. Bevor Sie alle Ihre divs durch Abschnittselemente ersetzen, fragen Sie sich immer: "Sind alle Inhalte miteinander verknüpft?"

beiseite - Wird für tangential verwandten Inhalt verwendet. Nur weil einige Inhalte links oder rechts neben dem Hauptinhalt erscheinen, ist dies kein Grund, das side-Element zu verwenden. Fragen Sie sich, ob der Inhalt innerhalb der Seite entfernt werden kann, ohne die Bedeutung des Hauptinhalts zu reduzieren. Pullquotes sind ein Beispiel für tangential verwandte Inhalte.

header - Es gibt einen entscheidenden Unterschied zwischen dem Header-Element und der allgemein akzeptierten Verwendung von header (oder masthead). Normalerweise gibt es nur eine Kopfzeile oder einen 'Masthead' auf einer Seite. In HTML5 können Sie beliebig viele haben. Die Spezifikation definiert es als "eine Gruppe von Einführungs- oder Navigationshilfen". Sie können einen Header in einem beliebigen Bereich Ihrer Site verwenden. In der Tat sollten Sie wahrscheinlich einen Header in den meisten Ihrer Abschnitte verwenden. Die Spezifikation beschreibt das Abschnittselement als "eine thematische Gruppierung von Inhalt, typischerweise mit einer Überschrift".

nav - Vorgesehen für wichtige Navigationsinformationen. Eine Gruppe von Links, die zusammen gruppiert sind, ist kein Grund, das nav-Element zu verwenden. Die siteweite Navigation gehört dagegen in ein nav-Element.

Fußzeile - Klingt wie es ist eine Beschreibung der Position, aber es ist nicht. Footer-Elemente enthalten Informationen über ihr enthaltendes Element: wer hat es geschrieben, Copyright, Links zu verwandten Inhalten usw. Während wir normalerweise eine Fußzeile für ein ganzes Dokument haben, erlaubt HTML5 uns auch Fußzeilen in Abschnitten zu haben.

Quelle : http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Darüber hinaus finden Sie hier eine Beschreibung zum article , die in der obigen Quelle nicht gefunden wurde:

article - Wird für ein Element verwendet, das unabhängigen, eigenständigen Inhalt angibt. Ein Artikel sollte alleine sinnvoll sein. 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?"


Hier ist mein Beispiel, in dem ich arbeite


Ich denke nicht, dass Sie das Tag in der Zusammenfassung der Nachrichten verwenden sollten (Zeilen 67, 80, 93). Sie können Abschnitt verwenden oder einfach das umschließende div haben.

Ein Artikel muss in der Lage sein, eigenständig zu stehen und immer noch Sinn oder Vollständigkeit zu haben. Da es sich um einen unvollständigen oder nur einen Auszug handelt, kann es sich nicht um einen Artikel handeln, sondern eher um einen Abschnitt.

Wenn Sie auf "Weitere Informationen" klicken, kann die folgende Seite angezeigt werden


Ich würde vorschlagen, die W3-Wiki-Seite zum Strukturieren 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 ein eigenständiges Stück Inhalt, das erstellt werden würde
Sinn, wenn als RSS-Artikel syndiziert, zum Beispiel 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 bezieht, der für ihn relevant ist, aber nicht für den Fluss des Inhalts.

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

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 Bereiche der Funktionalität oder des Themenbereichs zu enthalten oder einen Artikel oder eine Geschichte in verschiedene Abschnitte aufzuteilen. Also in diesem Fall: "sidebar1" enthält verschiedene nützliche Links, die auf jeder Seite der Seite bestehen bleiben, wie "RSS abonnieren" und "Musik vom Laden kaufen". "main" enthält den Hauptinhalt dieser Seite, die Blogposts. Auf anderen Seiten der Website ändert sich dieser Inhalt. Es ist ein ziemlich generisches Element, hat aber immer noch eine wesentlich semantischere Bedeutung als das einfache alte <div> .

<article>

<article> bezieht sich auf <section> , unterscheidet sich aber deutlich. Während <section> zum Gruppieren einzelner Bereiche von Inhalten oder Funktionen dient, enthält <article> zusammenhängende einzelne eigenständige Inhalte wie einzelne Blogposts, Videos, Bilder oder Nachrichten. Stellen Sie sich das so vor: Wenn Sie mehrere Inhalte haben, die einzeln gelesen werden können und es sinnvoll wäre, sie als separate Elemente in einem RSS-Feed zu syndizieren, eignet sich <article> zum Markieren sie auf. 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 außerhalb des Kontextes gelesen wird. Deshalb ist <article> für sie perfekt:

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

Einfach, nicht wahr? Beachten Sie jedoch, dass Sie auch Abschnitte in Artikeln verschachteln können, wenn dies sinnvoll ist. Wenn beispielsweise jeder dieser Blogposts eine konsistente Struktur aus verschiedenen Abschnitten aufweist, können Sie auch Abschnitte in Ihre Artikel einfügen. Es könnte in etwa so aussehen:

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

<header> und <footer>

Wie bereits erwähnt, besteht der Zweck der Elemente <header> und <footer> darin, den Kopf- und Fußzeileninhalt zu umbrechen. In unserem speziellen Beispiel enthält das <header> -Element ein Logo-Bild, und das <footer> -Element enthält einen Copyright-Hinweis, aber Sie könnten, wenn Sie möchten, ausführlichere Inhalte hinzufügen. 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> verschachteln. In diesem Fall würden sie sich nur auf diesen bestimmten Artikel beziehen. 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), die Sie zu verschiedenen Seiten der aktuellen Site oder verschiedenen Bereichen der aktuellen Seite führen. Andere Links wie gesponserte Links zählen nicht. Sie können natürlich auch Überschriften und andere strukturierende Elemente in das <nav> , aber das ist nicht obligatorisch.

<aside>

Sie haben vielleicht bemerkt, dass wir ein <aside> -Element benutzt haben, um die 2. Sidebar zu markieren: die mit den neuesten Gigs und Kontaktdetails. Dies ist vollkommen angemessen, da <aside> nur Teile von Informationen markiert, die mit dem Hauptfluss in Beziehung stehen, aber nicht direkt in diesen hineinpassen. Und der Hauptinhalt in diesem Fall dreht sich alles um die Band! Andere gute Wahlen für eine <aside> wären Informationen über den Autor der Blogposts, eine Bandbiographie oder eine Banddiskographie mit Verbindungen, um ihre Alben zu kaufen.

Wohin geht das <div> ?

Also, mit all diesen großartigen neuen Elementen, die wir auf unseren Seiten verwenden können, sind die Tage der bescheidenen <div> sicher nummeriert? NEIN. In der Tat hat das <div> immer noch eine vollkommen gültige Verwendung. Sie sollten es verwenden, wenn kein anderes geeigneteres Element zum Gruppieren eines Inhaltsbereichs verfügbar ist, was häufig der Fall ist, wenn Sie ein Element rein verwenden, um Inhalte für Styling- / visuelle Zwecke zu gruppieren. Ein gängiges Beispiel ist die Verwendung eines <div> , um den gesamten Inhalt auf der Seite einzubinden und dann CSS zu verwenden, um den gesamten Inhalt im Browserfenster zu zentrieren oder ein bestimmtes Hintergrundbild auf den gesamten Inhalt anzuwenden.


Laut Nathan's Antwort ist das absolut sinnvoll (für rote und orange Teile, vielleicht könntest du div 's und / oder header und footer verwenden):


[ Erklärungen in meiner "Hauptantwort" ]

Linie 7. Abschnitt um die ganze Website? Oder nur ein div ?

Weder. Für das Styling: Benutze <body> , es ist schon da. Für die Sektionierung / Semantik: Wie in meinem Beispiel HTML beschrieben, ist ihre Wirkung gegen die Nützlichkeit. Zusätzliche Wrapper für bereits umschlossene Inhalte sind keine Verbesserung, sondern Lärm.


Zeile 8. Jeder Abschnitt beginnt mit einem Header?

Nein, es ist die Wahl des Autors, wo man Inhalte, die typischerweise als "Header" zusammengefasst sind, eingibt. Und wenn dieser Header-Inhalt ohne zusätzliche Markierung klar erkennbar ist, kann er ohne <header> bleiben. Dies ist auch die Wahl des Autors.


Linie 23. Ist das richtig? oder muss das ein Abschnitt sein ?

Das <div> ist wahrscheinlich falsch. Es kommt auf die Absichten an: Ist es nur zum Styling geeignet? Wenn es für semantische Zwecke ist, ist es falsch: Es sollte stattdessen ein <article> wie in meiner anderen Antwort gezeigt . <article> ist auch richtig, wenn es sowohl für das Styling als auch für das Schneiden ist.

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


Zeile 24. Geteilte linke / rechte Spalte mit einem div .

Nein, warum?


Zeile 25. Der richtige Platz für das Artikel- Tag?

Ja, macht Sinn.


Zeile 26. Ist es erforderlich, das h1 -Tag im Header- Tag zu setzen?

Nein. Ein einsames <h*> Element muss wahrscheinlich nie in einen <header> (aber es kann, wenn du willst), da es bereits klar ist, dass es die Überschrift dessen ist, was kommen wird. - Es wäre sinnvoll, wenn dieser <header> auch einen Slogan (mit <p> markiert) enthalten würde.


Zeile 43. Der Inhalt bezieht sich nicht auf den Hauptartikel, also entschied ich, dass es sich um einen Abschnitt handelt und nicht um eine Seite .

Es ist ein Missverständnis, dass eine <aside> mit dem Inhalt um "tangential" verwandt sein muss . Der Punkt ist: Verwenden Sie ein <aside> wenn der Inhalt nur " tangential verwandt" oder gar nicht ist!

Abgesehen davon, dass <aside> eine anständige Wahl ist, ist <article> vielleicht immer noch besser als eine <section> da "hot items" und "new items" nicht wie zwei Kapitel in einem Buch zu lesen sind. Du kannst perfekt auf eines von ihnen und nicht auf das andere wie eine alternative Sortierung von etwas, nicht wie zwei Teile eines Ganzen gehen.


Zeile 44. H2 ohne Kopfzeile

Ist toll.


Zeile 53. Abschnitt ohne Überschrift

Nun, es gibt keinen <header> , aber die <h2> -Kopfzeile lässt ziemlich klar erkennen, 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

Diskutiert schon.


Linie 65. Hmm, div oder Abschnitt ? Oder entferne dieses div und verwende nur den Artikel -Tag

Genau! Entfernen Sie das <div> .


Zeile 105. Fußzeile :-)

Sehr vernünftig.


Leider sind die bisher gegebenen Antworten (einschließlich der am häufigsten gewählten) entweder "nur" gesunder Menschenverstand, im besten Fall falsch oder verwirrend. Kein wichtiges Schlüsselwort 1 erscheint !

Ich habe 3 Antworten geschrieben:

  1. Diese Erklärung (hier beginnen).
  2. Konkrete Antworten auf die Fragen von OP.
  3. Verbesserter detaillierter HTML-Code

Um die Rolle der hier besprochenen HTML-Elemente zu verstehen, müssen Sie wissen, dass einige von ihnen das Dokument abschnitt. Jedes HTML-Dokument kann nach dem HTML5-Gliederungsalgorithmus zum Erstellen eines Outline-Inhaltsverzeichnisses (TOC) geschnitten werden. Der Umriss ist nicht allgemein sichtbar (diese Tage), aber Autoren sollten HTML so verwenden, dass der resultierende Umriss ihre Absichten widerspiegelt.

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

  • Erstellen von (expliziten) Unterabschnitten
    • <section> Abschnitte
    • <article> Abschnitte
    • <nav> Abschnitte
    • <aside> Abschnitte
  • Erstellen von Geschwisterabschnitten oder Unterabschnitten
    • Abschnitte nicht spezifizierten Typs mit <h*> 2 (nicht alle tun dies, siehe unten)
  • um den aktuellen expliziten (Unter-) Abschnitt zu schließen

Abschnitte können benannt werden:

  • <h*> erstellte Sektionen benennen sich selbst
  • <section|article|nav|aside> Abschnitte werden nach dem ersten <h*> wenn es einen gibt
    • Diese <h*> sind die einzigen, die keine Abschnitte selbst erstellen

Es gibt noch eine weitere Möglichkeit für Abschnitte: Die folgenden Kontexte (dh Elemente) erstellen "Umrissgrenzen". Welche Abschnitte sie auch enthalten, ist für sie privat:

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

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
    • nimm 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> , zumindest auf der untersten Ebene
    • Standardbeispiel: ein einzelner Blog-Kommentar
    • Ein Blogeintrag selbst ist ebenfalls ein gutes Beispiel
    • Ein Blogeintrag <article> und sein Kommentar <article> s könnten auch mit einem <article>
    • es ist etwas "vollständiges" Ding, kein Teil in einer Reihe von ähnlichem
  • <section> in einem <article> sind wie Kapitel in einem Buch
  • <article> s in einem <section> sind wie Gedichte in einem Band (innerhalb einer Serie)

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

  • Sie haben keinen Einfluss auf das Schneiden
  • <header> und <footer>
    • Sie ermöglichen es Ihnen, Zonen von jedem Abschnitt zu markieren
    • sogar innerhalb eines Abschnitts können Sie sie mehrmals haben
    • vom Hauptteil in diesem Abschnitt zu unterscheiden
    • beschränkt nur durch den Geschmack des Autors
    • <header>
      • kann den Titel / den Namen dieses Abschnitts markieren
      • kann ein Logo für diesen Abschnitt enthalten
      • muss nicht am oberen oder oberen Teil des Abschnitts sein
    • <footer>
      • kann die Credits / Autor dieses Abschnitts markieren
      • kann an der Spitze des Abschnitts kommen
      • kann sogar über einem <header>
  • <main>
    • nur einmal erlaubt
    • markiert den Hauptteil des Abschnitts der obersten Ebene (dh das Dokument, also <body> )
    • Unterabschnitte selbst haben für ihren Hauptteil kein Markup
    • <main> kann sich sogar in einigen Unterabschnitten des Dokuments "verstecken", während die <header> und <footer> des Dokuments dies nicht können (das Markup würde die Überschrift / Fußzeile dieses Unterabschnitts dann markieren)
      • aber es ist nicht erlaubt in <article> Abschnitte 3
    • hilft dabei, "das wahre Ding" vom Nicht-Kopf-, Nicht-Fuß- und Nicht-Hauptinhalt des Dokuments zu unterscheiden, wenn das in Ihrem Fall sinnvoll ist ...

1 in den Sinn kommt: Umriss, Algorithmus, implizite Aufteilung
2 Ich benutze <h*> als Kurzschrift für <h1> , <h2> , <h3> , <h4> , <h5> und <h6>
3 ist <main> erlaubt in <aside> oder <nav> , aber das ist nicht überraschend. - In der Tat: <main> kann nur in (verschachtelten) absteigenden <section> Sektionen oder auf der obersten Ebene, nämlich <body>