it-swarm.com.de

Warum ein semantisches HTML5-Tag anstelle von div verwenden?

Warum sollten semantische HTML5-Tags wie headers, section, nav und article anstelle von einfach div mit dem bevorzugten css dazu?

Ich habe eine Webseite erstellt und diese Tags verwendet, aber sie unterscheiden sich nicht von div. Was ist ihr Hauptzweck?

Ist es nur für die entsprechenden Namen für die Tags während der Verwendung oder mehr als das?

Bitte erkläre. Ich habe viele Websites durchgesehen, konnte diese Grundlagen jedoch nicht finden.

56
Rajaram Shelar

Wie der Name schon sagt, dient dies nur semantischen Zwecken. Es dient zur Verbesserung der automatisierten Verarbeitung von Dokumenten. Die automatisierte Verarbeitung geschieht häufiger als Sie denken - jedes Website-Ranking von Suchmaschinen wird aus der automatisierten Verarbeitung der gesamten Website abgeleitet.

Wenn Sie eine Webseite besuchen, können Sie als menschlicher Leser sofort (visuell) alle Seitenelemente und vor allem verstehen den Inhalt unterscheiden.

Maschinen sind jedoch dumm und können dies nicht: Stellen Sie sich einen Webcrawler oder einen Screenreader vor, der versucht, Ihre Webseite mit divs überall zu analysieren. Woher sollen sie wissen, welcher Teil des Dokuments Sie als Navigation oder Hauptartikel oder als nicht so wichtige Randnotiz gedacht haben? Sie könnten raten, indem Sie Ihre Dokumentstruktur anhand einiger allgemeiner Kriterien analysieren, die einen Hinweis auf ein bestimmtes Element darstellen. Z.B. Eine ul Liste interner Links ist höchstwahrscheinlich eine Art Seitennavigation. Wenn jedoch stattdessen ein nav -Element verwendet wird, weiß die Maschine sofort, wozu dieses Element dient.

Beispiel: Sie als Benutzer (der eine Seite liest, ohne das eigentliche Markup zu sehen) interessieren sich nicht dafür, ob ein Element in einem <i> - oder <em> - Tag eingeschlossen ist. Wahrscheinlich wird es in den meisten Browsern als kursiver Text gerendert, und solange es aus dem Text herausragt, um es leicht zu erkennen, sind Sie damit einverstanden.
In Bezug auf die Semantik gibt es jedoch einen größeren Unterschied: <i> Bedeutet einfach kursiv - es ist ein Präsentationshinweis für den Browser und enthält nicht unbedingt tiefere semantische Informationen. <em> Bedeutet jedoch highlight, was semantisch auf eine wichtige Information hinweist. Jetzt ist der Browser nicht mehr an die Anweisung kursiv gebunden, sondern könnte sie kursiv oder fett oder unterstrichen oder in einer anderen Farbe darstellen ... Für Sehbehinderte können die Screenreader die Stimme erheben - Welche Methode in einer bestimmten Situation am besten geeignet erscheint, um diese wichtigen Informationen hervorzuheben.

// machine: okay, this structure looks like it might be a navigation element?
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>

// machine: ah, a navigation element!
<nav class="some-meaningless-class"><ul><li><a>...</nav>
77
Christoph

Es gibt einen netten kleinen Artikel zur HTML5-Semantik unter HTML5Doctor .

Die Semantik war in irgendeiner Form ein Teil von HTML. Es hilft Ihnen zu verstehen, was wo auf der Seite passiert.

Früher als <div> wurde für so ziemlich alles verwendet, trotzdem haben wir die Semantik implementiert, indem wir ihr einen "semantischen" Klassennamen oder einen ID-Namen gegeben haben.

Diese Tags helfen bei der richtigen Strukturierung und beim Verständnis des Layouts.

Wenn Sie tun,

<div class="nav"></div>

im Gegensatz zu,

<nav></nav>

[~ # ~] oder [~ # ~]

<div class="sidebar"></div>

im Gegensatz zu,

<aside></aside>

es ist nichts Falsches dabei, aber letzteres hilft Ihnen, die Lesbarkeit zu verbessern, ebenso wie den Crawlern, Lesern usw.

12
ta-run

Im Tag div müssen Sie eine ID angeben, die angibt, welche Art von Inhalt enthalten ist, entweder body, header, footer usw.

Während bei semantischen Elementen von HTML5 der Name klar definiert, welche Art von Code es enthält und für welchen Teil der Website.

Semantische Elemente sind <header>, <footer>, <section>, <aside>, etc.

2
scottperison