Im der erste Teil dieser Serie Wir haben uns die Fehler angesehen, die zu den neuen Strukturelementen von HTML5 geführt haben. im der zweite Teil der Serie Wir haben die Folgen dieser Versäumnisse genau untersucht; In diesem letzten Teil werden wir nach einem Weg suchen und einige Schlüsse über den aktuellen Stand der Dinge ziehen.
Das ist kein abstraktes Problem: Die Leute müssen das eigentlich lehren. Die nächste Generation von Webdesignern und Entwicklern wird mit HTML5 als Ausgangspunkt unterrichtet. Es tut mir leid für jeden, der versuchen muss zu erklären, wie er die aktuelle und zukünftige Studentenschaft umreißt und teilt. Vielleicht bleiben sie bei unserem einfachen Format, das immer noch gut funktioniert: Verwenden Sie divs entweder mit einer ID oder einer Klasse / es.
Es ist vernünftig zu behaupten, dass zukünftige Benutzeragenten wie Browser und Screenreader vielleicht mehr mit HTML5-Strukturelementen tun werden, was sie für uns als Autoren schmackhafter macht.
Opera Bruce Lawson schlug genau das auf der WHATWG Mailingliste im Jahr 2009 :
Schließlich kenne ich keine Benutzeragenten, die Zeit, Abschnitt, Fußzeile, Datagrid usw. verwenden können, aber wir erwarten meistens, dass es bald geht.
Und hier ist, was Hickson, der HTML5-Editor, als Antwort sagte:
Ich nicht. Die meisten neuen Elemente sollen lediglich das Styling erleichtern, so dass wir keine Klassen verwenden müssen.
All dies und der Editor sieht nicht, dass Benutzerprogramme diese Elemente jemals verwenden. Sie sind da, sagt er, um uns davor zu bewahren, Klassen zu benutzen. Anders gesagt, der Schöpfer dieser Elemente scheint nicht sicher zu sein, warum sie überhaupt in der Spezifikation sind, außer "Styling zu erleichtern".
Es gibt eine Denkrichtung, die besagt, dass wir sowieso nur eine Handvoll neuer Semantiken brauchen. Schließlich würde die Spezifikation aufgebläht werden, wenn weitere zehn oder hundert neue Begriffe hinzugefügt würden.
Auf der einen Seite stimme ich zu. In Bezug auf die Strukturierung einer einfachen Webseite würde ich sagen, dass wir ohne die Schnittelemente von HTML insgesamt besser dran wären. Was früher eine einfache Übung bei der Verwendung von divs war, ist in HTML5 zu einem komplizierten Chaos geworden, ohne dass es zu einem Nettogewinn kommt.
Was die Semantik im Allgemeinen betrifft, gibt es Fälle, in denen mehr Bedeutung über die Struktur unserer Webseite (sei es HTML4, 5 oder was auch immer kommt) hinzugefügt werden kann, indem zusätzliche Attribute auf unseren existierenden Elementen verwendet werden.
Eines der einfachsten Dinge, die an einer vorhandenen oder neuen Site implementiert werden können, sind ARIA-Landmarken. (ARIA steht für Accessible Rich Internet Applications und ist eine Spezifikation, die eine Möglichkeit definiert, Webanwendungen und Webseiten leichter zugänglich zu machen.)
ARIA-Landmarken sind eine Teilmenge der gesamten ARIA-Spezifikation und eine einfache Art von Metadaten, die es blinden und sehbehinderten Benutzern mit Bildschirmlesegeräten ermöglicht, zu den wichtigen Teilen einer Seite, den "Landmarken", zu springen. Wir fügen einfach role = "landmark-name" zu einem existierenden Element hinzu, genauso wie wir class = "class-name" zu einem Element hinzufügen würden. Die AIRA Sehenswürdigkeiten sind im Vergleich zu HTML5 hier diskutiert .
ARIA-Sehenswürdigkeiten passen viel besser zu dem, was wir derzeit tun. Die Benennung ist ein wenig wackelig, aber sie reflektieren zumindest die tatsächliche Authoring-Praxis. Zum Beispiel können wir verwenden:
(Beachten Sie, dass Banner-, Haupt- und Inhaltsinformationen nur einmal pro Dokument verwendet werden sollten.)
ARIA-Landmarken sind eine einfache Lösung, die Navigationsoptionen für Screenreader-Benutzer verbessert, ohne in das düstere Gebiet der HTML-Dokumentgliederung zu waten. Sie sind schnell und einfach zu implementieren und sollten wirklich Teil Ihrer grundlegenden HTML-Projektvorlage sein.
Wir haben also mehr Semantik für die Barrierefreiheit, aber wir haben auch mehr Semantik für Suchmaschinen.
Zunächst möchte ich klarstellen, dass HTML5-Elemente keinerlei Vorteile für SEO haben. Es ist ein Mythos und wir müssen ihn ins Bett bringen. Die Verwendung eines Artikel-Tags wird Ihnen oder Ihrem Kunden nicht helfen, höher zu ranken als der nächste Typ. Sie können darauf vertrauen, dass Google herausgefunden hat, wie Sie Ihren Content jetzt finden und einstufen können.
Suchmaschinen sind jedoch darauf bedacht zu verstehen, wie Webinhalte besser strukturiert (notice: not rank ) angezeigt werden können.
Daher haben die großen Suchmaschinen im Laufe der Jahre bestehende Standardverfahren entwickelt oder eingeführt, um strukturierte Daten in einer Webseite zu markieren, damit sie die geeigneten Informationen extrahieren können. Wenn Sie zum Beispiel nach Bewertungen suchen, haben Sie vielleicht bemerkt, dass in den Top-Google-Ergebnissen Sternbewertungen angezeigt werden. Dies ist ein Fall von Suchmaschinen, die in der Lage sind, den Review-Score in einer standardisierten Weise zu extrahieren und die Anzeige ihrer Ergebnisse zu verbessern. Rezepte sind ein weiteres Beispiel, in dem die Kochzeit für jedes Ergebnis aufgeführt wird. Während solche Daten den Rang einer Website nicht verbessern, kann das detailliertere Ergebnis dazu führen, dass mehr Nutzer durchklicken, so dass dort ein potenzieller Nutzen für eine Site besteht und oft in einem Wettrüstenszenario, in dem all Ihre Mitbewerber dies tun sowieso.
Während diese Art von reichen Daten gibt es schon seit einiger Zeit in verschiedenen Formen, nur im letzten Jahr die wichtigsten Suchmaschinen gestartet eine große neue Reihe von Standards für diese Art von strukturierten Daten. Sie nennen sie "Schemata", und sie sind in untergebracht Schema.org . Sie verwenden den HTML-Mikrodatenstandard und wurden bereits von eBay, IMDB, Rotten Tomatoes und anderen umgesetzt.
Dies ist der größte Sprung in Richtung eines semantischeren Webs in den letzten Jahren, und doch wurde es hinter verschlossenen Türen mit wenig Fanfare und ohne jegliche Standards durchgeführt. Es wurde ohne Vorwarnung auf uns abgeworfen und ist seitdem größtenteils unter dem Radar der Webdesign-Community geflogen. Es gibt eine Menge Überschneidungen mit der HTML5-Semantik, zum Beispiel gibt es Schemas für Artikel , Netz Seiten und Web Seitenelemente , unter weit mehr Schemas, die alles von einschließen TV-Folgen zu Krankheiten . Es ist auch die empfohlene Art und Weise Videos im Web zu beschreiben.
Nach all der Debatte über die Semantik von HTML (und deren Fehlen), haben die Suchmaschinen deutlich gemacht, dass sie wesentlich mehr semantische Daten in unserem Markup haben wollen, aber das wird über bestehenden Strukturen hinausgehen und nicht mit neuen Elementen.
Aber für uns als eine Community, die an Semantik und Webstandards interessiert ist, ist weder der begrenzte, fehlerhafte Ansatz von HTML für die Semantik noch der geschlossene, aus dem Nichts herausgelöste Ansatz der großen Suchmaschinen der beste Weg.
In gewisser Hinsicht ist das HTML5-Semantikpferd verriegelt; Es liegt nur an uns, den Schaden einzudämmen. Was schema.org angeht, ist es eine ganz neue Welt, die wir genau hinterfragen sollten, oder eine andere kleine Gruppe wird herausfinden, was in unserem - und im Internet - für uns am besten ist. Tatsächlich ist es vielleicht schon passiert.
Lassen Sie uns mit einigen Schlussfolgerungen abschließen.
Es gibt viele gute Teile in der HTML5-Spezifikation, von neuen Formular-Features bis zur History-API und Canvas-Implementierung. Ohne die WHATWG, die die treibende Kraft hinter HTML5 waren, waren wir immer noch mit HTML4 / XHTML 1.0 beschäftigt, während wir darauf warteten, dass das W3C zusammenkam. Trotzdem, nur weil HTML5 und die damit verbundene Technologie neu und aufregend ist, heißt das nicht, dass wir alles akzeptieren müssen, was wir bekommen.
Manchmal ist es sehenswert, wie die HTML-Wurst gemacht wird, damit wir wissen, was wir essen. Und im Fall der strukturellen Semantik von HTML würde ich lieber bestehen.
Hungrig auf mehr? Lukes Buch "Die Wahrheit über HTML5" ist für eine begrenzte Zeit über unsere Schwesterseite verfügbar MightyDeals.com zu einem unglaublichen Preis von 50%.
Haben Sie ARIA Landmarks oder Schema.org benutzt? Siehst du eine Zukunft für die strukturellen Elemente von HTML5? Lassen Sie es uns in den Kommentaren wissen.
Vorgestelltes Bild / Thumbnail, verwendet Strukturbild über Shutterstock.