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?
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
rund um die gesamte Website? Oder nur ein div
?
Zeile 8. Jeder section
Start mit einem header
?
Zeile 23. Ist das div
richtig? oder muss das ein sein section
?
Zeile 24. Linke / rechte Spalte mit a teilen div
.
Zeile 25. Richtiger Platz für das article
Tag?
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 section
und kein a ist aside
.
Zeile 44. H2 ohne header
Zeile 53. section
ohneheader
Zeile 63. Div mit allen (nicht verwandten) Nachrichten
Zeile 64. header
mit h2
Zeile 65. Hmm div
oder section
? Oder entfernen Sie diese div
und verwenden Sie nur das article
-tag
Zeile 105. Fußzeile :-)
Antworten:
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):
Darüber hinaus finden Sie hier eine Beschreibung von
article
, die in der obigen Quelle nicht enthalten ist:quelle
<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!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:
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 :
<section>
Abschnitte<article>
Abschnitte<nav>
Abschnitte<aside>
Abschnitte<h*>
2 (nicht alle tun dies, siehe unten)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<h*>
sind die einzigen, die selbst keine Abschnitte erstellenAbschnitte haben noch etwas zu bieten: Die folgenden Kontexte (dh Elemente) erzeugen "Umrissgrenzen". Welche Abschnitte sie auch enthalten, sie sind privat:
<body>
<td>
<blockquote>
<details>
,<dialog>
,<fieldset>
, Und<figure>
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>
?<section>
s sind wie Buchkapitel<article>
, zumindest auf der untersten Ebene<article>
und seine Kommentare<article>
könnten auch mit einem umbrochen werden<article>
<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?<header>
und<footer>
<header>
<footer>
<header>
<main>
<body>
)<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)<article>
Abschnitt 3 ist dies jedoch nicht zulässig1 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>
quelle
sections in an article are like chapters in a book, articles in a section are like poems in a volume
- Beste und intuitivstearticle
vssection
Erklärung, die ich gesehen habe!Das Markup für dieses Dokument könnte wie folgt aussehen:
Weitere Informationen finden Sie in diesem Artikel unter A List Apart .
quelle
<header>
und können keine<footer>
Elemente auf Dokumentebene sowie innerhalb von<section|article|nav|aside>
Abschnitten sein?Ich würde vorschlagen, die W3-Wiki-Seite über die Strukturierung von HTML5 zu lesen :
Dazu gehört ein Bild , das ich hier aufgeräumt habe:
quelle
<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?main
Tag 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 legensection
. 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. "[ 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.
quelle
Gemäß der Erklärung in meiner „Haupt“ -Antwort sollte das betreffende Dokument gemäß einer Gliederung gekennzeichnet sein.
In den folgenden zwei Tabellen zeige ich:
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.
quelle
Der Hauptfehler: Sie haben "Divitis" im gesamten Dokument.
Warum das?
Anstatt:
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 ;)
quelle
<hgroup>
ist nicht mehr Teil von HTML5Warum nicht die IDs item_1, item_2 usw. auf den Artikel-Tags selbst haben? So was:
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.
quelle
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.
quelle
article
unbedingt von einer externen Quelle stammt. w3schools.com/html5/tag_article.aspHier ist mein Beispiel, in dem ich arbeite
quelle
https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element
quelle
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
quelle
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:
schlägt mir vor, dass
section
das höher ist alsarticle
. 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, dasssection
Gruppen auf einem höheren Niveau alsarticle
.Ich denke, es soll so verwendet werden:
oder für eine Nachrichten-Website:
quelle
„Zeile 23. Ist das div richtig? oder muss das ein abschnitt sein? “
Weder noch - es gibt ein
main
Tag für diesen Zweck, das nur einmal pro Seite zulässig ist und als Wrapper für den Hauptinhalt verwendet werden sollte (im Gegensatz zu einer Seitenleiste oder einem Site-weiten Header).http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element
quelle
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.
quelle
Nach Nathans Antwort , macht dies durchaus Sinn (für Rot und Orange Teile, vielleicht könnten Sie
div
‚s und / oderheader
undfooter
jeweils):quelle