Sind neue HTML5-Elemente wie <section> und <article> sinnlos?

Question

Töte mich noch nicht, frage ich aus reiner Neugier.

Elemente wie <section>, <nav>, <article>, <aside> usw. scheinen alle völlig sinnlos. Sicher, sie machen alles seinen eigenen kleinen Platz (und SEO) ... aber es ist möglich, Dinge zu organisieren. Es gibt einige Fälle, in denen die Dinge nicht in eine der Kategorien passen. Es erhöht auch die Zeit, die damit verbracht wird, diese Dinge zu programmieren. Ich sehe keinen wirklichen Zweck, um diese neuen Elemente hinzuzufügen.

Was müssen wir (Entwickler und Leute, die die Webseiten gleich sehen) durch Hinzufügen dieser Seiten gewinnen?

Answer 1

Diese Elemente sind wichtig für Dinge wie Bildschirmleser für Blinde und E-Book-Reader wie Kindle. Es hilft ihnen zu wissen, was zu zeigen/zu lesen und wann.

Answer 2

Haben von this article lesen, da es verschiedene Vorteile, wie betont:

Es zu verwenden diese Elemente mehrere Vorteile. Wenn in Verbindung mit der Überschrift Elemente (h1 bis h6) verwendet wird, bieten alle diese einen Weg um verschachtelte Abschnitte mit Schriftsebenen, über die sechs Ebenen möglich mit früheren Versionen von HTML auszuzeichnen.

und

Durch den Zweck der Abschnitte in der Seite zu identifizieren mit spezifischen sectioning Elemente können unterstützende Technologie helfen dem Anwender zu mehr navigieren leicht die Seite. Zum Beispiel können sie leicht überspringen über den Navigationsbereich oder schnell von einem Artikel auf die nächste ohne die Notwendigkeit für Autoren zu überspringen Links überspringen. Autoren auch Vorteil, weil viele der divs im Dokument mit einem von ersetzen mehrere verschiedene Elemente können helfen, den Quellcode klarer und einfacher zu Autor.

Answer 3

HTML5 Stil CSS ist auch etwas leichter zu lesen:

div#header 
div#content .article 
div#content .article h1 
div#content .article h1+h2 
div#footer 

vs

header 
section#content 
section#content article 
section#content article hgroup h1 
section#content article hgroup h2 
footer 

(nicht mit erweiterten Selektor)

Und als keyboardP durch das Zitat angedeutet Es ist einfacher, eine Seite für nicht-menschliche Besucher zu navigieren. Es fügt Semantik hinzu. Aber ich stimme dir zu, dass es manchmal schwierig sein kann, herauszufinden, welches Element section, article oder gute alte div zu verwenden. IMO, das macht die Semantik weniger stark. Aber sehen wir was passiert.

Answer 4

Es geht um Semantik!

Aber ich stimme dir zu, dass für einige Leute diese neuen Tags sinnlos scheinen. Eine häufig gestellte Frage ist, warum diese bestimmten Tags und keine anderen ausgewählt wurden, insbesondere da einige der Tags sehr blogspezifisch sind (Artikel, Abschnitt usw.), aber keine allgemein gebräuchlichen Namen wie Produkt oder Inhalt enthalten. Wie Sie in den Kommentaren sehen können, ist es ein heiß diskutiertes Thema!

Also für die Verwendung dieser neuen Tags hängt es wirklich davon ab, wie Sie Ihr Markup schreiben, und es gibt keinen richtigen oder falschen Weg, wie es geht. Nehmen Sie beispielsweise Listen, die Sie für Ihre Navigation verwenden können und nicht möchten, dass sie formatiert werden und sie auch in Ihrem Hauptinhalt verwenden und formatiert werden müssen. Sie könnten entweder zusätzliche Klassen hinzufügen, um festzulegen, welche Listen gestylt werden oder Sie können Ihren Markup und Ziel Stile aus den Tags allein verwenden:

 
<nav> 
<ul> 
    <li><a href="">Nav item 1</a></li> 
    <li><a href="">Nav item 2</a></li> 
</ul> 
</nav> 
<div> 
<ul> 
    <li><a href="">List item 1</a><li> 
    <li><a href="">List item 1</a></li> 
<ul> 
</div> 

und in Ihrem CSS:

 

ul { list-style: bullet } 
nav ul { list-style: none; } 

Answer 5

erlauben Überschrift Umfang der ist Hauptvorteil von <section> und <article>. Siehe http://diveintohtml5.info/semantics.html#header-element.

Kurz: in HTML5, es ist viel einfacher, einen Überblick über das Dokument zu markieren (die für Screenreader nützlich ist), ohne sich Gedanken darüber, ob <h2> oder <h3> zu verwenden, oder was auch immer (was wirklich kompliziert wird, wenn Sie Komponenten in verschiedenen umfassen Orte auf verschiedenen Seiten).

Sie konnten das nicht mit <div> s getan haben, weil es Milliarden von Webseiten gibt, die <div> s und Überschriften bereits verwendet haben, ohne unbedingt Überschrift Bereich zu beabsichtigen.

Zugegebenermaßen wären <section> und <hgroup> für diesen Zweck ausreichend gewesen.

Answer 6

ok, das klingt produktive und leicht zu lesen:

<div id="nav">list of links</div> 
<div id=header> 
<div id=section>content is good 
</div> 
</div> 
<div id=footer>copyright</div> 

vs

<nav>list of links</nav> 
    <header> 
    <section>content is good</section> 
    </header> 
    <footer>copyright</footer> 

Es wäre so viel einfacher für Abschnitt zu scannen und Kopf- und Dialog in der Mitte der DIV Schrottplatz. Es verbessert auch die Zugänglichkeit für Blinde, da dies dem Bildschirmleser klar sagen würde, was es ist. Gleiches mit Artikel-Tag. Außerdem verbessert es die Struktur und verleiht den Tags mehr Bedeutung.

Einige Webbrowser unterstützen CSS-Styling auf unbekannten Elementen nicht und das ist für mich unglaublich kurzsichtig.

Answer 7

Der visuelle Vorteil der Verwendung der neuen HTML5-Markup-Tags ist möglicherweise für Benutzer verborgen, aber die Benutzer können unwissentlich davon profitieren, da diese Tags ihnen möglicherweise ein besseres Suchergebnis geliefert haben. Ich denke, sobald HTML5 zu einem Standard wird, wird die Verwendung dieser Markup-Tags für Ihre Website-SEO extrem wichtig.

Answer 8

Ich denke, der große Fehler der HTML-Semantik Divisionen wie ist, dass der Code, um diese Arbeit in der realen Welt zu machen umfasst mehrere Aussagen zu bewältigen mit den tatsächlichen Browsern, die von echten Menschen verwendet werden. Die obigen Beispiele sind nicht real und in jedem Fall, um den HTML5-Code zu lesen müssen Sie daran erinnern, dass eine Fußzeile eine Art div ist. Wenn ich es einfach div nenne und ihm eine beschreibende ID gebe, scheint es mir viel klarer zu sein, selbst wenn wir die vielen Aussagen vergessen, die Sie tatsächlich brauchen werden (wirklich, werden Sie. Seit mehreren Jahren). Hier ist eine Idee.Machen Sie die Attribute der semantischen div-IDs, wie "title =" usw., lassen Sie die modernen Browser und Screenreader diese Informationen verwenden, um Abschnitte, Seiten usw. zu identifizieren, und der Code wird sauberer. Höre nicht auf, ein div a div zu nennen, weil du keine neuen Browser für den ganzen Planeten installieren kannst.

<div id ="footer" class="someclass someotherclass" semantic="footer">You, the screen 
readers and all browsers know this is a div</div>