Warum sollte man sich die Mühe machen, richtig und semantisch zu markieren?

_{Beachten Sie, dass ich (versuche) mich so semantisch wie möglich auszuzeichnen, weil ich es mag, wie es aussieht und sich anfühlt, aber nicht, weil ich andere erstaunliche Vorteile kenne. Der Punkt meiner Frage ist, andere erziehen zu können}

Nun, ich habe viele Artikel und Tutorials gesehen, in denen oft gesagt wird: "Lassen Sie uns dies auf die semantischste Art und Weise markieren."

Aber ein seltsamer Gedanke kam mir, warum?

Warum sollte man sich mit den spezifischen Elementen befassen müssen (oder wollen), die die richtige semantische Bedeutung vermitteln? Insbesondere beziehe ich mich auf die neuen HTML5 - Elemente, wie zum Beispiel <time>, <output>oder <address>. Vor allem, wenn die Seite "funktioniert" (sie wird in allen Browsern gut wiedergegeben).

Warum sollte ich Elemente wie <time>oder verwenden wollen <address>, bei denen gar nichts (oder im schlimmsten Fall ein generisches <span>) genauso gut funktioniert?

Ich frage dies, weil ich eine Vielzahl von (sehr beliebten) Websites (einschließlich) sehe, die nicht diesen sogenannten Best Practices folgen.

Freie Funktionalität

Wenn Sie <label>s richtig verwenden , können Sie auf die Beschriftung klicken, um in das Textfeld zu gelangen. Viele Browser fügen vielen Tags gemäß der offiziellen Spezifikation logische Standardfunktionen hinzu. Dies bedeutet, dass Sie weniger JavaScript-Plugins verwenden und weniger Code schreiben können als eine Site, die vollständig aus <div>s und <span>s besteht.

Barrierefreiheit

Im Zusammenhang mit der freien Funktionalität hat die Semantik eine große Bedeutung für die Screenreader-Software. Text vor einem Eingabefeld wird nicht so gelesen wie ein <label>Testament. Screenreader ignorieren den Großteil Ihres CSS, daher hängt es hauptsächlich von der Struktur Ihres HTML ab.

Logisches CSS

Warum a verwenden, div #headerwenn Sie a verwenden <header>und das direkt stylen können? Semantische Tags erleichtern das Markieren und machen Ihren Stil viel portabler. Wenn Sie einen bestimmten Stil für das Durchstreichen haben und immer <del>Elemente verwenden, ist der Stil viel portabler. <del>bedeutet für jeden dasselbe, aber jeder wird seine .deletedTextKlasse anders benennen .

Es hilft auch, bei großen Projekten alle auf der gleichen Seite zu halten. niemand lernt gerne die esoterischen Klassennamenskonventionen anderer.

SEO

Suchmaschinen wie Google nutzen zunehmend semantisches HTML und Metadaten . Die Rich Snippets von Google verwenden außerdem spezielle Metadaten, um semantischen Inhalt zu vermitteln.

Warum ist das nicht so üblich?

Es braucht Arbeit und die Leute sind es gewohnt, eine Website danach zu beurteilen, wie sie aussieht und funktioniert . Oft gibt es keine Erklärung für die Semantik, weil Leute, die den Business Case für Apps schreiben, ihn nicht verstehen oder wissen , warum er wichtig ist.

Es ist sehr schwierig für Nichtfachleute, die HTML-Semantik zu verstehen oder zu bewerten.

Wenn eine Website gut aussieht und funktioniert, warum dann? Viele Menschen wissen nicht einmal da ist nichts mehr zu bieten . Ähnlich wie bei der Barrierefreiheit wird dies ignoriert, bis jemand in Ihrem Team dies wirklich versteht.

Wenn Sie möchten, dass semantisches HTML eine Priorität in Ihrem Projekt hat, müssen Sie die Gründe dafür darlegen. Es ist auch hilfreich, Ihrem Team / Chef in einem Screenreader zu zeigen, wie Ihre Website funktioniert.

Die Antwort darauf besteht einfach darin, Informationen zu vermitteln und Ihr Dokument zu strukturieren .

Wenn Sie Bereiche und Divs verwenden, hat Ihr Dokument keine Struktur. Es gibt keine Listen, keine Absätze, keine Tabellen, keine Hyperlinks. Nichts. Es ist wirklich sinnlos, HTML als Auszeichnungssprache zu wählen und dann das Vokabular zu ignorieren, das es bietet, um Ihre Inhalte auszudrücken und zu strukturieren. Struktur ist hier übrigens das wichtige Wort. HTML wird zur Strukturierung nicht angezeigt. Dafür ist CSS da.

Wenn Sie Ihren Code semantisch kennzeichnen, geben Sie sowohl menschlichen Lesern als auch Maschinen die Möglichkeit, die Daten in Ihren Elementen zu verstehen. Wenn Sie span- und div-Elemente vollständig verwenden, verfügen Sie nicht über diese zusätzlichen Informationen, und es ist möglicherweise nicht möglich, sie nur aus den Werten abzuleiten.

Wenn ich Websites scrappen und nur die Überschriften extrahieren möchte, um ein Inhaltsverzeichnis für sie zu erstellen, müsste meine Spinne auch wissen, wie die Überschriften lauten. Ohne die entsprechenden Elemente geht das nicht.

Last but not least, wenn Sie nur Divs und Spans verwenden, fällt es Ihnen schwer, diese mit CSS zu gestalten. CSS-Selektoren bearbeiten die Struktur Ihres Dokuments, und wenn diese Struktur größtenteils nicht eindeutig ist, können CSS-Regeln problemlos angewendet werden. Wie entscheidest du, ob sich das div div divwirklich auf table tr tdoder bezieht body ul li? Sie müssten dann Klassen und IDs hinzufügen, aber dann erfinden Sie das Rad neu.

Siehe auch die Empfehlung des W3C

Durch die Verwendung der entsprechenden semantischen Elemente wird sichergestellt, dass die Struktur dem Benutzeragenten zur Verfügung steht. Dies beinhaltet die explizite Angabe der Rolle, die verschiedene Einheiten beim Verständnis der Bedeutung des Inhalts spielen. Auf diese Weise kann die Art eines Inhalts als Absatz, Überschrift, hervorgehobener Text, Tabelle usw. angegeben werden. In einigen Fällen sollten auch die Beziehungen zwischen Inhaltseinheiten angegeben werden, z. B. zwischen Überschriften und Unterüberschriften oder zwischen den Zellen einer Tabelle. Der Benutzeragent kann dann die Struktur für den Benutzer wahrnehmbar machen, beispielsweise unter Verwendung einer anderen visuellen Darstellung für verschiedene Arten von Strukturen oder unter Verwendung einer anderen Stimme oder Tonhöhe in einer Hördarstellung.

Um die bereits guten Antworten hier zu ergänzen, ist eine Sache, die ich nicht erwähnt habe , Aufwärtskompatibilität . Während sich die Spezifikation entwickelt, ist es möglich, dass zusätzliche Funktionen für bestimmte semantische Elemente angegeben werden. Wenn Ihr Code semantisch korrekt ist, kann er diese Funktionalität ohne oder mit minimalem Wartungsaufwand nutzen.

Ein Grund dafür, dass Sie nach der Semantik nicht viele Websites sehen, ist, dass es häufig keine Business-Argumente dafür gibt. Wenn es den Umsatz steigert (oder eine verwandte Kategorie wie Exposure), ist es ihr Geld wert, semantisches HTML zu schreiben.

Der beste Fall, den ich für die semantische Verwendung von Tags machen kann, ist, wenn Sie HTML mit einem Tool verwenden oder verbrauchen. Wenn Sie beispielsweise semantische Tags verwenden, können Sie Elemente direkt formatieren, ohne befürchten zu müssen, dass Stile hinzugefügt oder entfernt werden. Wenn Sie HTML-Code jemals mit einem Scraper oder Ähnlichem analysieren müssen, sind Sie außerdem an wohlgeformtem und semantischem HTML interessiert, da es einfacher wird, XPath- und DOM-Abfragen zu schreiben, um das zu finden, was Sie benötigen.

Ich sollte beachten, dass Klassen keinen direkten Ersatz für semantische Tags darstellen. Ich habe wiederverwendbare Klassen [error, information, warning], die unterschiedliche Bedeutungen und Stile basierend auf dem Tag, mit dem sie verknüpft sind, vermitteln.

Weil es für Crawler und Webdienste nützlich oder erforderlich sein kann (AKA-Computer, die mit Computern kommunizieren). Wenn du schreibst:

<span class="time">Sep 16 at 2:17</span>

... der Webcrawler muss es nicht unbedingt als Datum, als Uhrzeit verstehen. Oder es wird viel schwieriger sein, es als Datumsinformation zu finden.

Wenn du benutzt:

 <time datetime="2012-02-11 16:24:02">feb 11 2012 at 16:24:02</time>

... es wird für jeden Crawler viel einfacher sein, das Zeug zu finden und zu analysieren.

Wenn ich Crawler sage, meine ich nicht unbedingt Suchmaschinen :)

Ich leite eine kleine Web-Beratungsfirma, und unser derzeitiger Ansatz besteht darin, die neuen HTML5-Tags nicht zu verwenden, da wir versuchen, viele Faktoren auszugleichen. In diesem Fall besteht das Gleichgewicht zwischen Benutzerfreundlichkeit, Benutzerfreundlichkeit und SEO:

• SEO: Was andere Antworten hier sagten - es könnte ein wenig für SEO helfen, obwohl es meiner Erfahrung nach weniger wahrscheinlich ist, je offensichtlicher eine SEO-Strategie ist, umso weniger zu helfen.

• Benutzerfreundlichkeit # 1: Es ist vernünftig anzunehmen, dass HTML5-Tags eine Art Usability-Vorteil bieten. Für blinde Benutzer ist es sicher, dass der Fallback, den ihr zugänglicher Browser ihnen bietet, besser ist als alles, was ich anbieten kann. Für einen typischen Benutzer ist es viel umstrittener. Vielleicht ist es für Sie einfacher, einen Mediaplayer ohne Haut zu verwenden, den Ihr Browser bereitstellt, als das weniger bekannte Widget, das ich sonst dort eingefügt hätte. Oder vielleicht ist die Standardeinstellung Ihres Browsers Mist (so wie der Standard-MP3-Player von Chrome Windows in regelmäßigen Abständen nicht mehr funktioniert).

• Usability # 2: Alter IE. Der alte IE erfordert eine Reihe von HTML5-Shims, die die Seite aufblähen, damit eines dieser Tags funktioniert. Sie müssen den head-Tags, die CreateElement () aufrufen, ein Skript in einer Schleife über alle von Ihnen verwendeten HTML5-Tags hinzufügen. Wenn Sie nicht jede Seite nach den verwendeten Tags durchsuchen, bedeutet dies, dass alle HTML5-Tags vorhanden sind. Dies muss auf jeder einzelnen Seite inline ausgeführt werden, was bedeutet, dass keine Zwischenspeicherung erfolgt. Und eine schlechte Nachricht: Der alte IE führt Javascript am langsamsten aus, sodass beim Laden ein netter kleiner Ruck entsteht. Dann müssen Sie ein paar alte Javascript- und CSS-Dateien (nur IE) und häufig Flash-Dateien einarbeiten, damit alle neueren, nicht unterstützten Elemente korrekt gerendert werden. Sie können erkennen, bevor Sie sich entscheiden, den alten IE-Code zu laden, aber dann Wenn Sie alte IE-Benutzer dazu bringen, zu warten, bis genügend Skripte geladen wurden, um diese Funktion zu erkennen, beginnen Sie erst, alle Daten anzufordern, mit denen diese Tags funktionieren. Sie könnten das alte IE-Zeug vom Browser erkennen und nur an Benutzer mit diesen Browsern senden, aber das kann das Cachen abhängig von Ihrer Plattform schwierig oder unmöglich machen. Das Bereitstellen von unterschiedlichem Code für unterschiedliche Benutzer bedeutet auch, dass das Testen komplizierter ist. Haben Sie jemals einen Asynchronitätsfehler? Wie wäre es mit einem, der nur in einem bestimmten Browser auftritt? Und nur in der Produktion? Melden Sie mich an. Also, Sie werden wahrscheinlich nur diese Aufblähung an alle senden. Das Bereitstellen von unterschiedlichem Code für unterschiedliche Benutzer bedeutet auch, dass das Testen komplizierter ist. Haben Sie jemals einen Asynchronitätsfehler? Wie wäre es mit einem, der nur in einem bestimmten Browser auftritt? Und nur in der Produktion? Melden Sie mich an. Also, Sie werden wahrscheinlich nur diese Aufblähung an alle senden. Das Bereitstellen von unterschiedlichem Code für unterschiedliche Benutzer bedeutet auch, dass das Testen komplizierter ist. Haben Sie jemals einen Asynchronitätsfehler? Wie wäre es mit einem, der nur in einem bestimmten Browser auftritt? Und nur in der Produktion? Melden Sie mich an. Also, Sie werden wahrscheinlich nur diese Aufblähung an alle senden.

Bis IE8 stirbt, ist der Wert in diesen neueren HTML5-Tags einfach nicht hoch genug für die damit verbundenen Leistungsprobleme. Wir müssen noch mit einem Publikum zusammenarbeiten, bei dem es sogar fast tot ist *, aber eines Tages.

* Unsere neuesten Messwerte zeigen IE8 mit 6% für die Website mit den wenigsten IE8-Besuchern und 24% für die Website mit den meisten IE8-Besuchern. Weit, weit weg von den Toten.

Die kurze Antwort lautet: „In der Praxis gibt es keinen guten Grund.“ Fast alle Argumente, die für ein „semantisches“ Markup angeführt werden, sind nur Gedanken darüber, was passieren könnte oder sollte, und nicht etwas Greifbares. Beispielsweise wird häufig auf Suchmaschinen verwiesen, aber es gibt keine öffentlichen Beweise dafür, dass sie sich am wenigsten um timeoder outputoder kümmern address.

Indirekt können wir daraus schließen, dass sie sich in absehbarer Zeit nicht darum kümmern werden. Die schema.org- Website einiger führender Suchmaschinen favorisiert eindeutig einen bestimmten Ansatz für „semantisches Markup“, das auf etwas völlig anderem basiert, nämlich Mikrodaten ( itemscopeund verwandten Attributen). Und das hauptsächlich für große kommerzielle oder Community-Websites.

Die Verwendung von spanoder divfunktioniert besser als die HTML5-Neuheiten, da letztere von alten IE-Versionen nicht erkannt werden, auch nicht zum Stylen. Sie brauchen also einige Tricks, damit sie auch als Containerelemente "funktionieren".

Es gibt jedoch einige „semantische“ Elemente, denen Browser, Hilfssoftware oder Suchmaschinen eine echte Bedeutung zuweisen. Die Verwendung h1für die Hauptüberschrift war aus solchen Gründen immer eine gute Praxis. Die Verwendung labelvon Beschriftungen für Formularfelder hat erhebliche Auswirkungen auf die Benutzerfreundlichkeit und die Barrierefreiheit. Und so weiter; siehe Der pragmatische Leitfaden zu HTML: Prinzipien .

HTML ist nicht nur eine Sprache für die Benutzeroberfläche, sondern auch eine Sprache für die Datenstrukturierung. Es wurde entwickelt, um heterogenen Maschinen dabei zu helfen, die Art der Informationen zu identifizieren, die für den Server bereitgestellt werden. Daher so viele verschiedene Tags. HTML-Seiten sollten als Datenstrukturen betrachtet werden.