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

546

Es gibt genug Informationen über HTML5 im Web (und auch über Stackoverflow), aber jetzt bin ich neugierig auf die "Best Practices". Tags wie Abschnitt / Überschriften / Artikel sind neu und jeder hat unterschiedliche Meinungen darüber, wann / wo Sie diese Tags verwenden sollten. Was haltet ihr 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. sectionrund um die gesamte Website? Oder nur ein div?

Zeile 8. Jeder sectionStart mit einem header?

Zeile 23. Ist das divrichtig? oder muss das ein sein section?

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

Zeile 25. Richtiger Platz für das articleTag?

Zeile 26. Ist es erforderlich, Ihr h1-tag in das header-tag zu setzen?

Zeile 43. Der Inhalt bezieht sich nicht auf den Hauptartikel, daher habe ich entschieden, dass dies ein sectionund kein a ist aside.

Zeile 44. H2 ohne header

Zeile 53. sectionohneheader

Zeile 63. Div mit allen (nicht verwandten) Nachrichten

Zeile 64. headermit h2

Zeile 65. Hmm divoder section? Oder entfernen Sie diese divund verwenden Sie nur das article-tag

Zeile 105. Fußzeile :-)

html  header  article 
— Bas van Dorst
quelle
— Christophe Roussy

Antworten:

486

Eigentlich haben Sie recht, wenn es um Kopf- / Fußzeilen geht. Hier sind einige grundlegende Informationen darüber, wie jedes der wichtigsten HTML5-Tags verwendet werden kann / sollte (ich empfehle, die unten verlinkte vollständige Quelle zu lesen):

Abschnitt - Wird zum Gruppieren von themenbezogenen Inhalten verwendet. Klingt nach einem div-Element, ist es aber nicht. Das div hat keine semantische Bedeutung. Bevor Sie alle Divs durch Abschnittselemente ersetzen, fragen Sie sich immer: "Bezieht sich der gesamte Inhalt darauf?"

beiseite - Wird für tangential verwandte Inhalte verwendet. Nur weil einige Inhalte links oder rechts vom Hauptinhalt angezeigt werden, reicht dies nicht aus, um das beiseite-Element zu verwenden. Fragen Sie sich, ob der Inhalt innerhalb der Seite 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 allgemein akzeptierten Verwendung von Header (oder Masthead). Es gibt normalerweise nur einen Header oder 'Masthead' auf einer Seite. 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 einen Header in jedem Abschnitt Ihrer Site verwenden. In der Tat sollten Sie wahrscheinlich in den meisten Abschnitten einen Header verwenden. Die Spezifikation beschreibt das Abschnittselement als "thematische Gruppierung von Inhalten, normalerweise mit einer Überschrift".

nav - Für wichtige Navigationsinformationen. Eine Gruppe von Links, die zusammen gruppiert sind, reicht nicht aus, um das nav-Element zu verwenden. Die ortsweite Navigation gehört dagegen in ein Navigationselement.

Fußzeile - Klingt nach einer Beschreibung der Position, ist es aber nicht. Fußzeilenelemente enthalten Informationen zu dem enthaltenen Element: Wer hat es geschrieben, Copyright, 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 : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

Darüber hinaus finden Sie hier eine Beschreibung von 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 für sich genommen 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?"

— Nathan JB
quelle
68
Es ist für mich ein Rätsel, wie diese Antwort so viele Stimmen erhalten hat: Sie spricht nicht über <article>Elemente, sie kontrastiert nicht die genannten Elemente und gruppiert sie auch nicht. Die Antwort enthält weder „Best Practices“ noch eine der expliziten Fragen des OP!
— Robert Siemer
2
@ RobertSiemer Für mich ist es auch ein Rätsel, wie Ihr Kommentar 24 Upvotes und die Frage nur 6 Downvotes bekam ...
— Veger
@ RobertSiemer weil es toll aussieht, was denkst du? Ich hatte keine Ahnung, dass es schlecht war, bis ich Ihren Kommentar überprüft und ihn mit der nächsten Antwort bestätigt habe.
— Det
238

Leider sind die bisher gegebenen Antworten (einschließlich der am häufigsten gewählten) entweder "nur" gesunder Menschenverstand, einfach falsch oder bestenfalls verwirrend. Keines der entscheidenden Schlüsselwörter 1 erscheint !

Ich habe 3 Antworten geschrieben:

  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 von ihnen das Dokument abschneiden. Jedes HTML-Dokument kann gemäß dem HTML5-Gliederungsalgorithmus unterteilt werden, um ein Gliederungs- oder Inhaltsverzeichnis (TOC) zu erstellen. Die Gliederung ist (heutzutage) nicht allgemein sichtbar, aber Autoren sollten HTML so verwenden, dass die resultierende Gliederung ihre Absichten widerspiegelt.

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

  • (explizite) Unterabschnitte erstellen
    • <section> Abschnitte
    • <article> Abschnitte
    • <nav> Abschnitte
    • <aside> Abschnitte
  • Erstellen von Geschwisterabschnitten oder Unterabschnitten
    • Abschnitte vom nicht spezifizierten Typ mit <h*>2 (nicht alle tun dies, siehe unten)
  • Schließen Sie den aktuellen expliziten (Unter-) Abschnitt

Abschnitte können benannt werden:

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

Abschnitte haben noch etwas zu bieten: Die folgenden Kontexte (dh Elemente) erzeugen "Umrissgrenzen". Welche Abschnitte sie auch enthalten, sie sind privat:

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

Titel

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

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

  • Sie haben keinen Einfluss auf das Schneiden
  • <header> und <footer>
    • Mit ihnen können Sie Zonen für jeden Abschnitt markieren
    • Selbst 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 nicht am oberen oder oberen Teil des Abschnitts sein
    • <footer>
      • kann die Credits / den Autor dieses Abschnitts markieren
      • kann am oberen Rand des Abschnitts kommen
      • kann sogar über a liegen <header>
  • <main>
    • nur einmal erlaubt
    • markiert den Hauptteil des Abschnitts der obersten Ebene (dh das Dokument <body>)
    • Unterabschnitte selbst haben keinen Aufschlag für ihren Hauptteil
    • <main>kann sich sogar in einigen Unterabschnitten des Dokuments "verstecken", während das Dokument es kann <header>und <footer>nicht (dieses Markup würde dann die Kopf- / Fußzeile dieses Unterabschnitts markieren)
      • In <article>Abschnitt 3 ist dies jedoch nicht zulässig
    • hilft dabei, „die reale Sache“ vom Nicht-Kopf-, Nicht-Fuß- und Nicht-Hauptinhalt des Dokuments zu unterscheiden, wenn dies in Ihrem Fall sinnvoll ist ...

1 in den Sinn kommt: Umrisse, Algorithmus, implizite Schnitte
2 I Verwendung <h*>als Abkürzung für <h1>, <h2>, <h3>, <h4>, <h5>und <h6>
3 weder <main>in erlaubt <aside>oder <nav>, aber das keine Überraschung ist. - In der Tat: <main>kann sich nur in (verschachtelten) absteigenden <section>Abschnitten verstecken oder auf oberster Ebene erscheinen, nämlich<body>

— Robert Siemer
quelle
33
Die Antwort ist wie ein Gedicht. Mein Lieblingsteil ist: sections in an article are like chapters in a book, articles in a section are like poems in a volume- Beste und intuitivste articlevs sectionErklärung, die ich gesehen habe!
— Sergey Lukin
1
Das ist umfangreiches Wissen ohne Boilerplate, zusammengefasst in ein paar Aufzählungspunkten. Ich danke Ihnen für das Teilen! Manchmal ist auf SO die beste Antwort weder die akzeptierte noch die am höchsten bewertete.
3
Ich weiß, dass es ein Klischee ist, aber "Dies sollte die akzeptierte Antwort sein!". Fußnoten und alles! Vielen Dank!
— Eugene
Eugene und ft oder haben recht. Denken Sie daran, dass Sie die unvollständigen und falschen Antworten abstimmen können, während Sie diese abstimmen. Es ist keine Beleidigung für ihre Autoren, es sind die Kosten, um sicherzustellen, dass die besten Antworten zuerst gesehen werden. Zusätzlich zu Roberts Kommentar zu der gewählten Antwort gefällt es mir auch nicht, weil es (unvollständige) Inhalte von anderen Stellen im Web plagiiert.
— IAmNaN
Diese sehr detaillierte Antwort machte viele Dinge klar, danke!
— Alaeddine
111

Die div-Elemente können durch die neuen Elemente ersetzt werden: Kopfzeile, Navigation, Abschnitt, Artikel, Seite und Fußzeile.

Das Markup für dieses Dokument könnte wie folgt aussehen:

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

Weitere Informationen finden Sie in diesem Artikel unter A List Apart .

— Cilerler
quelle
25
Diese Boilerplate-Struktur ist den Platz auf dieser Seite nicht wert. 1) Keines der genannten HTML-Elemente ist an eine Position in einem Dokument gebunden. 2) Es impliziert fälschlicherweise, dass <header> und <footer> Elemente auf Dokumentebene sind. 3) Es impliziert fälschlicherweise, dass <section> nur als <article> -Kind gedacht ist. @ DanDascalescu
— Robert Siemer
2
Konnte nicht mehr @RobertSiemer zustimmen. Dies ist immer noch eines der häufigsten Missverständnisse über HTML5-Elemente und wird zu einem semantischen Handicap für unsere geliebte Auszeichnungssprache.
— Kano
@RobertSiemer Re: 2), Können <header>und können keine <footer>Elemente auf Dokumentebene sowie innerhalb von <section|article|nav|aside>Abschnitten sein?
— Flimm
1
@Flimm, ja sie können. Mein Punkt war: Die Antwort ist nicht falsch - sie antwortet einfach nicht viel.
— Robert Siemer
63

Ich würde vorschlagen, 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
sinnvoll wäre, wenn er als RSS-Artikel syndiziert würde , z. B. als Nachricht.

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

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

Dazu gehört 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 <section>Element 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 Website bestehen bleiben, z. B. "RSS abonnieren" und "Musik aus dem Store kaufen". "main" enthält den Hauptinhalt dieser Seite, nämlich Blog-Beiträge. Auf anderen Seiten der Website ändert sich dieser Inhalt. Es ist ein ziemlich allgemeines Element, hat aber immer noch eine viel semantischere Bedeutung als das einfache alte <div>.

<article>

<article>ist verwandt mit <section>, ist aber deutlich anders. Während <section>für die Gruppierung bestimmter Abschnitte von Inhalten oder Funktionen bestimmte <article>einzelne eigenständige Inhalte wie einzelne Blog-Beiträge, Videos, Bilder oder Nachrichten enthalten sind. Stellen Sie sich das so vor: Wenn Sie über eine Reihe von Inhalten verfügen, von denen jedes für sich zum Lesen geeignet ist und die als separate Elemente in einem RSS-Feed syndiziert werden können, <article>ist dies zum Markieren geeignet. In unserem Beispiel <section id="main">enthält Blogeinträge. Jeder Blogeintrag wäre für die Syndizierung als Element in einem RSS-Feed geeignet und daher sinnvoll, wenn er für sich allein und außerhalb des Kontexts gelesen würde<article> ist er 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 konsistente Struktur unterschiedlicher Abschnitte 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 wir bereits oben erwähnt, ist der Zweck der <header>und <footer>ist Elemente Kopf- und Fußzeile Inhalt zu wickeln sind. In unserem speziellen Beispiel <header>enthält das Element ein Logo-Bild und das <footer>Element einen Copyright-Hinweis. Sie können jedoch auch ausführlichere Inhalte 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. Neben der soeben besprochenen Kopf- und Fußzeile der obersten Ebene können Sie auch ein <header>und <footer>-Element in jedem verschachteln <article>. In diesem Fall gelten sie nur für diese bestimmter 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 <nav>Element dient zum Markieren der Navigationslinks oder anderer Konstrukte (z. B. eines Suchformulars), die Sie zu verschiedenen Seiten der aktuellen Site oder zu verschiedenen Bereichen der aktuellen Seite führen. Andere Links, wie z. B. gesponserte Links, zählen nicht. Sie können natürlich Überschriften und andere Strukturierungselemente in das Programm aufnehmen <nav>, dies ist jedoch nicht obligatorisch.

<aside>

Sie haben vielleicht bemerkt, dass wir ein <aside>Element zum Markieren der zweiten Seitenleiste verwendet haben: das mit den neuesten Auftritten und Kontaktdaten. Dies ist vollkommen angemessen, da<aside> um Informationen zu markieren, die sich auf den Hauptfluss beziehen, aber nicht direkt in diesen passen. Und der Hauptinhalt in diesem Fall dreht sich alles um die Band! Andere gute Optionen für eine <aside>wären Informationen über den Autor der Blog-Posts, eine Bandbiografie oder eine Banddiskografie mit Links zum Kauf ihrer Alben.

Wo bleibt das? <div> ?

Mit all diesen großartigen neuen Elementen, die auf unseren Seiten verwendet werden können, sind die Tage der Demütigen <div>sicherlich gezählt? NEIN. In der Tat hat der <div> noch eine vollkommen gültige 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 Styling- / visuelle Zwecke verwenden. Ein häufiges Beispiel ist die Verwendung von a <div>, um den gesamten Inhalt der Seite zu verpacken, und die Verwendung von CSS, um den gesamten Inhalt im Browserfenster zu zentrieren, oder die Anwendung eines bestimmten Hintergrundbilds auf den gesamten Inhalt.

— Justin
quelle
1
Wäre es für die verschachtelten Abschnitte jedoch nicht sinnvoller zu verwenden <section class="summary">als <section id="summary">? Wenn Sie mehrere Artikel auf einer Seite hätten, würde die letztere Methode zu doppelten IDs auf derselben Seite führen - einem HTML-Fauxpas. Recht?
— JP Lew
Ja, ich würde in diesem Fall wahrscheinlich stattdessen Klassen verwenden.
— Justin
1
Sollten nicht alle von Ihnen erwähnten Tags in ein "Haupt" eingewickelt werden, das dann in den "Körper" eingewickelt wird?
— Francisco Aguilera
1
Das mainTag wäre gut hinzuzufügen. Wo es hingelegt werden soll, hängt davon ab, welche Inhalte auf der Seite eindeutig sind. In diesem Beispiel würde ich es einfach um die Mitte legen section. Lesen Sie mehr: w3.org/TR/2012/WD-html-main-element-20121217 "Der Hauptinhaltsabschnitt eines Dokuments enthält Inhalte, die für dieses Dokument eindeutig sind, und schließt Inhalte aus, die für eine Reihe von Dokumenten wie z. B. eine Website wiederholt werden Navigationslinks, Copyright-Informationen, Site-Logos und Banner sowie Suchformulare. "
— Justin
Es ist immer noch so vieldeutig wie die MDN-Dokumentation
— Oldboy
23

[ Erklärungen in meiner "Hauptantwort" ]

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

Weder. Für das Styling: Verwenden Sie das <body>, es ist bereits da. Für Abschnitte / Semantik: Wie in meinem Beispiel-HTML beschrieben, widerspricht seine Wirkung der Nützlichkeit. Zusätzliche Wrapper zu bereits verpackten Inhalten sind keine Verbesserung, sondern Rauschen.


Zeile 8. Jeder Abschnitt beginnt mit einer Überschrift?

Nein, es ist die Wahl des Autors, wo Inhalte platziert werden sollen, die normalerweise als „Header“ zusammengefasst sind. Und wenn dieser Header-Inhalt ohne zusätzliche Markierung klar erkennbar ist, kann er auch ohne bleiben <header>. Dies ist auch die Wahl des Autors.


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

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

<section>sieht hier falsch aus, da es vor oder nach diesem 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 Artikel- 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>(aber es kann, wenn Sie wollen), da es bereits klar ist, dass es die Überschrift dessen ist, was kommen wird. - Es wäre sinnvoll, wenn dies beispielsweise <header>auch einen Slogan (markiert mit <p>) umfassen würde.


Zeile 43. Der Inhalt bezieht sich nicht auf den Hauptartikel, daher habe ich beschlossen, dass dies ein Abschnitt und keine Seite ist .

Es ist ein Missverständnis , dass eine <aside>hat „tangential zu im Zusammenhang “ mit dem Inhalt um. Der Punkt ist: Verwenden Sie ein, <aside>wenn der Inhalt nur " tangential " oder gar nicht ist!

Abgesehen davon, <aside>dass es sich um eine anständige Wahl handelt, ist es <article>möglicherweise immer noch besser als ein <section>„heißes Element“, und „neue Elemente“ sind nicht wie zwei Kapitel in einem Buch zu lesen. Sie können sich perfekt für einen von ihnen entscheiden und nicht für den anderen 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 keine <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>könnte besser sein.


Zeile 64. Header mit h2

Bereits besprochen.


Zeile 65. Hmm, div oder Abschnitt ? Oder entfernen Sie dieses div und verwenden Sie nur den Artikel -tag

Genau! Entfernen Sie die <div>.


Zeile 105. Fußzeile :-)

Sehr vernünftig.

— Robert Siemer
quelle
Das Aufteilen einer Antwort in 3 unvollständige Antworten ist nicht hilfreich.
— Christian Strempfer
6
@ChristianStrempfer Es ist tatsächlich hilfreich, da viele Leute nicht hierher kommen, um die spezifischen Antworten auf bestimmte Fragen des OP zu lesen (diese Antwort), sondern um mehr über das vorliegende Thema zu lesen (meine Hauptantwort). - Ich glaube, mit einer großen Antwort würde ich nicht einmal die Stimmen bekommen, die ich allein für meine Hauptantwort habe. - Was schlagen Sie vor?
— Robert Siemer
Ich schlage vor, sie zu einer Antwort zusammenzuführen. Sammlungsstimmen sind kein gutes Argument für die Aufteilung. Insbesondere die dritte Antwort kann nicht allein stehen, da Sie sich auf Ihre Hauptantwort beziehen.
— Christian Strempfer
@ChristianStrempfer Das wäre viel zu lang für meinen Geschmack. - Ich arbeite daran, die Tabellen zu verbessern ...
— Robert Siemer
20

Gemäß der Erklärung in meiner „Haupt“ -Antwort sollte das betreffende Dokument gemäß einer Gliederung gekennzeichnet sein.

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)


The outline of the original is
definitively not what was intended.

































































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)


The modified HTML reflects the
intended outline way better than
the original.
































































— Robert Siemer
quelle
Vielen Dank für die ausgezeichnete detaillierte Antwort, es ist sehr aufschlussreich. Ich möchte mehr über das Thema erfahren, daher hoffe ich, dass Sie einige der für mich seltsamen Entscheidungen erläutern können. Ich werde sie als einzelne Kommentare veröffentlichen.
— Gorn
1. Kopfzeile beiseite> div [id = logo] scheint mir irrelevant zu sein. Derzeit ist es ein Header, aber semantisch nicht. Die Sprache div ist vielleicht eine Art Navigation und das Logo ist vielleicht eine Art Kopfzeile für die gesamte Site, aber sicherlich nicht für die Seite.
— Gorn
2. <ARTIKEL id = main> scheint wirklich nur präsentativ zu sein. Es enthält nichts im Zusammenhang. (Dasselbe gilt für <ARTIKEL id = main-right>, aber es ist dort viel besser zu verteidigen (als "news and hot").) Ich schlage vor, im schlimmsten Fall div oder main zu verwenden.
— Gorn
3. <ARTIKEL id = Nachrichten> scheint mir ein typischer Fall zu sein, in dem ich ihn beiseite legen würde. Es hat nichts mit dem Hauptartikel zu tun, es ist nur ein Newsfeed. Und ich stimme zu, dass es Nachrichten als einzelne "kleine" Artikel enthält.
— Gorn
1
Überlegen Sie, ob Sie Ihren Vorschlag bearbeiten möchten. Ihre "theoretische" Antwort ist sehr gut geschrieben, aber ich denke, dass die meisten Anfänger nur das Codebeispiel betrachten und möglicherweise sehr verwirrt sind, da es nicht mit dem theoretischen Teil übereinstimmt.
— Gorn
17

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

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

Anstatt:

<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 umschließt Header h2? Wenn Sie kein weiteres Element in den Header aufnehmen, verwenden Sie einfach ein einzelnes h2.
Beachten Sie, dass Ihre Struktur nicht darin besteht, ein Dokument zu stilisieren, sondern ein selbsterklärtes Dokument zu erstellen.

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

— Covi
quelle
4
@superUntitled <hgroup> ist nicht mehr Teil von HTML5
— bradley.ayers
Sollte sich role = "banner" auf dem h1 selbst befinden, nicht auf dem gesamten Header? Auf diese Weise verweist es auf einen einzelnen Text, den ein Bildschirmleser ankündigen würde, nicht auf einen HTML-Globus.
— Enigment
11
Die Verwendung von h1 und h2 für Logo und Sprache macht für mich keinen Sinn. Der winzige kleine Sprachknopf rechts sollte der zweitwichtigste Inhalt / die zweitwichtigste Information auf dieser Seite sein? Und wenn Sie Ihr Logo in einem h1 platzieren, wird ein Suchbot feststellen, dass der Hauptinhalt jeder Seite der gleiche ist (meiner Meinung nach ziemlich langweilig). Siehe auch @MeanEYE Antwort für die Verwendung von h1 und h2. Abgesehen davon, dass IDs nicht semantisch sind, verwenden Sie RDFa, wenn Sie Semantik benötigen. Ihr Weg macht CSS-Selektoren nur langsam: developer.google.com/speed/docs/best-practices/…
— F Lekschas
10

Warum nicht die IDs item_1, item_2 usw. 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 dies durchaus gültig wäre. Sie sagen 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, denke ich nicht, dass das <header> -Tag dort erforderlich ist, und ich denke, Sie könnten es weglassen, da es für sich allein in der "main-left" -Div ist. Wenn es in der Hauptliste der Artikel enthalten wäre, möchten Sie möglicherweise das <header> -Tag nur aus Gründen der Konsistenz einfügen.

— Matt Browne
quelle
2
Ich folgte nur dem ursprünglichen Beispiel und zeigte, wie man dasselbe ohne unnötige Wrapper-Divs erreicht. Die IDs können aus einer Reihe von Gründen vorhanden sein. Zum einen können Ankerlinks auf sie verweisen.
— Matt Browne
5
  1. Abschnitt sollte nur verwendet werden, um einen Abschnitt in ein Dokument einzuschließen (z. B. Kapitel und ähnliches).
  2. Mit Header- Tag: NO. Das Header-Tag stellt einen Wrapper für den Seitenkopf dar und darf nicht mit H1, H2 usw. verwechselt werden.
  3. Welcher Div? : D.
  4. Ja
  5. Von 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. stellen die Dokumenttitel dar, wobei H1 am wichtigsten 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 bitte wissen.

— MeanEYE
quelle
1
Danke für deine Antworten! Zu Punkt 3; Es tut mir leid, die Zeilennummern waren nicht richtig. Es muss line_23 anstelle von Punkt 3 sein. Siehe auch die Zeilenänderungen in meinem Beitrag.
— Bas van Dorst
Ja, ich mache dasselbe auf meinen Websites. Im Allgemeinen sind DIVs zum Erstellen der Site-Struktur zu verwenden. Die Einführung von Kopf-, Fuß- und ähnlichen Tags in HTML5 dient nur dazu, die Lesbarkeit zu verbessern. Sie verhalten sich genauso wie DIV.
— MeanEYE
3
Überprüfen Sie Ihre Quellen. Auf der Website der w3c-Schulen wird nicht angegeben, dass dies articleunbedingt von einer externen Quelle stammt. w3schools.com/html5/tag_article.asp
— chharvey
Hm, ich habe nicht einmal gedacht, dass der Artikel von einer externen Quelle verwendet werden soll. Dies ist eine alte Antwort, ich kann mich kaum erinnern, worum es ging. :)
— MeanEYE
Ich stimme # 1 zu. Ich denke, diese ABSCHNITT-Elemente sind als ASIDEs sinnvoller.
— Andy
3

Hier ist mein Beispiel, in dem ich arbeite

Geben Sie hier die Bildbeschreibung ein

— Ivan
quelle
2 
<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

— Юрий Светлов
quelle
1

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

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

Wenn Sie auf "Lesen Sie mehr" klicken, kann die nachfolgende Seite

— Übereinstimmung
quelle
1

EDIT: Leider muss ich mich korrigieren.

Siehe unten https://stackoverflow.com/a/17935666/2488942 einen Link zu den w3-Spezifikationen, die ein Beispiel enthalten (im Gegensatz zu denen, die ich mir zuvor angesehen 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 vor, dass sectiondas höher ist als article. Wie in dieser Antwort erwähnt, section werden thematisch verwandte Inhalte gruppiert. Der Inhalt eines Artikels ist meiner Meinung nach ohnehin thematisch verwandt, daher deutet dies zumindest für mich dann auch darauf hin, dass sectionGruppen auf einem höheren Niveau 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 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
— Pandita
quelle
0

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

1.Wall steht unter dem Tag "section", was bedeutet, dass es von der Seite getrennt ist.

2. Alle Beiträge fallen unter das Tag "Artikel".

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

3.Wir haben die Überschrift "X Benutzer poste dies". Hierfür können wir das Tag "Überschrift" verwenden.

4.Dann haben wir in der Post drei Abschnitte: Bilder / Text, Like-Share-Kommentar-Button und Kommentarfeld.

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

— Flicks Gorger
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.