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

55

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.

Madara Uchiha
quelle
17
Sie fügen Informationen für einen Computer hinzu, nicht für einen Menschen.
8
@ ThorbjørnRavnAndersen: Wirklich? Ich schreibe eine Website zum Lesen, nicht für Computer. Ich möchte, dass die Leute meinen Inhalt lesen und irgendwann in mein Geschäft oder was auch immer kommen (aus
Kundensicht
3
msgstr "für Leute zum Lesen, nicht für Computer". Dann werden sie es wohl in einer Zeitung oder einer Zeitschrift lesen?
1
@ ThorbjørnRavnAndersen: Touché, aber wenn die Seite funktioniert (wie in, menschlich lesbar), warum sollte ich dann ausgefallene Elemente hinzufügen time?
Madara Uchiha
2
In der Tat warum. Wenn Sie keine Notwendigkeit dafür sehen, dann tun Sie es nicht.

Antworten:

101

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.

Ben Brocka
quelle
10
"Wenn Sie möchten, dass semantisches HTML eine Priorität in Ihrem Projekt hat, müssen Sie die Gründe dafür darlegen." - Oder für einen Blinden arbeiten! (Hinweis: Ich schlage nicht vor , Ihrem Chef Säure ins Gesicht zu werfen. Aber vielleicht zwingen Sie ihn, eine Augenbinde zu tragen und für eine Weile einen Sprachbrowser zu verwenden.)
Jörg W Mittag
34
Und natürlich ist GoogleBot im Grunde genommen ein blinder Analphabet mit drei Jahren und Aufmerksamkeitsdefizitstörung.
Jörg W Mittag
2
Gute Antwort. Ich würde auch hinzufügen, dass das Verwalten von Code, bei dem am Anfang "unnötige" Anstrengungen unternommen werden, um die Einhaltung von Best Practices zu gewährleisten, die das Verwalten des Codes erleichtern (auch wenn es der ursprüngliche Designer / Programmierer ist, der ihn verwaltet). .
Kenneth
9
Auf der Seite "freie Funktionalität" erlauben Sie dem Gerät in mobilen Browsern auch, native Widgets anzuzeigen, die für mobile Eingaben (z. B. auf <Datum> -Elementen) ausgelegt sind
Chris Cooper
1
@ QmunkE wahr, eine Menge Leute vernachlässigen, dass mobile Browser oft Teile von HTML in native Elemente wie Textviews verwandeln
Ben Brocka
9

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.

Gordon
quelle
Dies mag die beste Antwort sein, aber wenn man bedenkt, dass jeder Span / Div mit semantisch bedeutsamen Klassen und IDs gespammt wird, ist das nicht hilfreich?
Chris Pitman
Was sind die Vorteile davon? Maschinen meinen Code lesen lassen?
Madara Uchiha
(Erweitern auf Ihre Bearbeitung) Warum sollte ich mich für das Standard-Styling des Browsers interessieren? Ich benutze mein eigenes CSS (plus Reset, um diese exakten Stile zu eliminieren) und es funktioniert gut. Der Fokus der Frage liegt hauptsächlich auf den neuen HTML5-Elementen. <time> <output> <address>
Madara Uchiha
@ MadaraUchiha Je besser Google Ihre Inhalte versteht, desto besser können sie die Sucher auf Ihre Website leiten
Chris Pitman
@ Chris: In der Tat, aber das ist kaum eine Voraussetzung? Ich meine, viele sehr nicht-semantische Websites tauchen zuerst in Google auf.
Madara Uchiha
5

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.

pgraham
quelle
2
Ich denke, das ist aus Entwicklersicht der wichtigste Punkt. Zugänglichkeit, Freundlichkeit gegenüber Bots, SEO usw. sind alle wichtig, aber als Webentwickler interessiert mich das am meisten.
Yannis
3

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.

Levi Morrison
quelle
Warum sollte es mich interessieren, wenn jemand meine Website kratzen möchte?
Madara Uchiha
4
@MadaraUchiha, weil Sie Produkte auf Ihrer Website verkaufen und eine Suchmaschine, die diese indiziert, Ihnen zusätzliche Verknüpfungen zu Ihren Produkten bietet und wahrscheinlich zu höheren Einnahmen führt.
Gordon
Bedenken Sie auch, dass Sie oder ein Kollege oder ein zukünftiger Betreuer eines Tages möglicherweise etwas tun müssen, das das Parsen Ihrer Website oder das Lesen Ihres Codes umfasst. Du willst nicht der Typ sein, über den die Leute 10 Jahre später leise murmeln, der sich über deinen Code lustig macht und dich hasst.
jmort253
Die Wahrscheinlichkeit, dass jemand Spaß an der Bearbeitung von 10 Jahre altem Code hat, ist unglaublich gering, egal wie schön er geschrieben ist. Mit der Art und Weise, wie Web-Frameworks jetzt wachsen, kann ich es kaum ertragen, mir 5 Jahre alten Code anzusehen.
Graham
1

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 :)

smonff
quelle
1

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.

Chris Moschini
quelle
0

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 .

Jukka K. Korpela
quelle
8
Sie müssen eindeutig Nachforschungen anstellen.
Kenneth
2
-1 für diesen miesen Link. (Der pragmatische Leitfaden zu HTML: Prinzipien)
Bruno Schäpper
0

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.

Raj Kiran Singh
quelle
Ich würde darauf näher eingehen. Es beantwortet die Frage nicht direkt und scheint die vorhandenen Antworten nicht zu ergänzen.
Walpen