Im ersten Teil dieser Serie haben wir uns mit den Mängeln befasst, die zu den neuen Strukturelementen von HTML5 führen. Im zweiten Teil der Serie haben wir uns ausführlich mit den Folgen dieser Versäumnisse befasst; In diesem letzten Teil werden wir nach einem Weg nach vorne suchen und einige Schlussfolgerungen über den aktuellen Stand der Dinge ziehen.
Das ist kein abstraktes Problem: Die Leute müssen dieses Zeug tatsächlich lehren. Die nächste Generation von Webdesignern und -entwicklern wird mit HTML5 als Ausgangspunkt unterrichtet. Es tut mir leid, wer auch immer versuchen muss, der gegenwärtigen und zukünftigen Gruppe von Studenten Gliederungen und Unterteilungen zu erklären. Vielleicht bleiben sie klugerweise bei dem einfachen Format, das wir haben und das immer noch gut funktioniert: Verwenden Sie Divs entweder mit einer ID oder Klasse(n).
Es ist durchaus anzunehmen, dass Benutzeragenten wie Browser und Bildschirmleseprogramme in Zukunft vielleicht mehr mit den Strukturelementen von HTML5 machen werden, was sie für uns als Autoren schmackhafter machen wird.
Bruce Lawson von Opera schlug genau das vor WHATWG-Mailingliste im Jahr 2009:
Und hier ist die Antwort von Hickson, dem HTML5-Editor:
All das, und der Editor sieht nicht einmal, dass Benutzeragenten diese Elemente jemals verwenden. Sie seien dazu da, sagt er, um uns den Unterricht zu ersparen. Anders ausgedrückt: Der Ersteller dieser Elemente scheint sich nicht sicher zu sein, warum sie überhaupt in der Spezifikation enthalten sind, außer „das Styling einfacher zu machen“.
Brauchen wir mehr Semantik in HTML?
Es gibt eine Denkschule, die besagt, dass wir ohnehin nur eine Handvoll neuer Semantiken brauchen. Schließlich würde die Spezifikation aufgebläht, wenn Dutzende oder Hunderte weitere neue Begriffe hinzugefügt würden.
Einerseits stimme ich zu. Bezüglich Strukturierung Bei einer einfachen Webseite würde ich sagen, dass wir ohne die Unterteilungselemente von HTML besser dran wären. Was einst eine unkomplizierte Übung bei der Verwendung von Divs war, ist in HTML5 zu einem komplizierten Durcheinander geworden, das keinen Nettogewinn bringt.
Im Hinblick auf die Semantik im Allgemeinen gibt es jedoch Fälle, in denen mehr Bedeutung hinzugefügt werden kann auf die Struktur unserer Webseite (sei es HTML4, 5 oder was auch immer als nächstes kommt) unter Verwendung zusätzlicher Attribute für unsere vorhandenen Elemente.
ARIA für Barrierefreiheit
Eines der am einfachsten zu implementierenden Dinge auf einer bestehenden oder neuen Website sind ARIA-Wahrzeichen. (ARIA steht für Accessible Rich Internet Applications und ist eine Spezifikation, die eine Möglichkeit definiert, Webanwendungen und Webseiten barrierefreier zu machen.)
ARIA-Markierungen sind eine Teilmenge der gesamten ARIA-Spezifikation und eine einfache Art von Metadaten, die es blinden und sehbehinderten Benutzern mit Bildschirmleseprogrammen ermöglicht, zu den wesentlichen Teilen einer Seite, also den „Markierungen“, zu springen. Wir fügen einfach „role=”landmark-name” zu einem vorhandenen Element hinzu, genauso wie wir class=”class-name” zu einem Element hinzufügen würden. Die AIRA-Wahrzeichen sind wird hier im Vergleich zu HTML5 besprochen.
ARIA-Sehenswürdigkeiten passen viel besser zu dem, was wir derzeit tun. Die Benennung ist etwas seltsam, spiegelt aber zumindest die tatsächliche Web-Authoring-Praxis wider. Beispielsweise können wir Folgendes verwenden:
- Banner für den gesamten Seitenkopf.
- Navigation für Navigation.
- Ergänzung für Seitenstangen.
- Inhaltsinfo für die Fußzeile.
- main für den Hauptinhaltsbereich.
(Beachten Sie, dass Banner-, Haupt- und Inhaltsinformationen nur einmal pro Dokument verwendet werden sollten.)
ARIA-Markierungen sind eine einfache Lösung, die die Navigationsoptionen für Benutzer von Bildschirmleseprogrammen verbessert, ohne in das unklare Terrain der HTML-Dokumentgliederung vorzudringen. Sie sind schnell und einfach zu implementieren und sollten unbedingt Teil Ihrer grundlegenden HTML-Projektvorlage sein.
Suchmaschinen
Wir haben also mehr Semantik für Barrierefreiheit, aber auch mehr Semantik für Suchmaschinen.
Lassen Sie mich zunächst ganz klar sagen, dass HTML5-Elemente keinerlei Nutzen für SEO haben. Es ist ein Mythos, und wir müssen damit Schluss machen. Die Verwendung eines Artikel-Tags wird Ihnen oder Ihrem Kunden nicht dabei helfen, einen höheren Rang als der nächste zu erreichen. Sie können darauf vertrauen, dass Google inzwischen herausgefunden hat, wie Sie Ihre Inhalte finden und bewerten können.
Suchmaschinen sind jedoch daran interessiert zu verstehen, wie sie am besten vorgehen Anzeige (Anmerkung: nicht Rang) Webinhalte strukturierter gestalten.
Daher haben die großen Suchmaschinen im Laufe der Jahre Standardmethoden zum Markieren strukturierter Daten auf einer Webseite entwickelt oder übernommen, damit sie die entsprechenden Informationen extrahieren können. Wenn Sie beispielsweise nach Rezensionen suchen, ist Ihnen möglicherweise aufgefallen, dass Sternebewertungen in den oberen Google-Ergebnissen erscheinen. Dabei geht es darum, dass Suchmaschinen in der Lage sind, die Bewertungsbewertung auf standardisierte Weise zu extrahieren und die Anzeige ihrer Ergebnisse zu verbessern. Ein weiteres Beispiel sind Rezepte, bei denen für jedes Ergebnis die Garzeit aufgeführt ist. Auch wenn solche Daten den Rang einer Website nicht verbessern, kann das detailliertere Ergebnis mehr Benutzer zum Durchklicken animieren, sodass für eine Website ein gewisser potenzieller Nutzen besteht, und dies ist in einem Wettrüsten, in dem alle Ihre Konkurrenten dies tun, oft notwendig Trotzdem.
Während es diese Art von umfangreichen Daten schon seit einiger Zeit in verschiedenen Formen gibt, wurden sie erst letztes Jahr von den großen Suchmaschinen entdeckt gestartet eine Vielzahl neuer Standards für diese Art von strukturierten Daten. Sie nennen sie „Schemata“ und sind dort untergebracht Schema.org. Sie nutzen den Mikrodatenstandard von HTML und wurden bereits von eBay, IMDB, Rotten Tomatoes und anderen implementiert.
Dies ist der größte Sprung in Richtung eines stärker semantischen Webs seit Jahren, und doch geschah er hinter verschlossenen Türen, ohne großes Aufsehen und ohne jeglichen Standardprozess. Es wurde ohne Vorwarnung auf uns aufmerksam gemacht und ist seitdem größtenteils unter dem Radar der Webdesign-Community geflogen. Es gibt auch viele Überschneidungen mit der HTML5-Semantik, zum Beispiel gibt es Schemata dafür ArtikelNetz Seiten und Web Seitenelementeneben weit mehr Schemata, die alles von enthalten TV-Folgen Zu Krankheiten. Es ist auch das empfohlener Weg der Beschreibung von Videos im Web.
Nach all der Debatte über die Semantik von HTML (und deren Fehlen) haben die Suchmaschinen deutlich gemacht, dass sie deutlich mehr semantische Daten in unserem Markup wünschen, aber dies geschieht auf der Grundlage bestehender Strukturen und nicht mit neuen Elementen.
Aber für uns als Community, die sich für Semantik und Webstandards interessiert, ist sicherlich weder der begrenzte, fehlerhafte Ansatz von HTML zur Semantik noch der geschlossene, aus dem Nichts fallen gelassene Ansatz der großen Suchmaschinen der beste Weg nach vorn.
In mancher Hinsicht ist das HTML5-Semantikpferd durchgerutscht; Es liegt nur an uns, den Schaden einzudämmen. Was schema.org betrifft, so handelt es sich um eine ganz neue Welt, die wir sehr genau unter die Lupe nehmen sollten, sonst wird eine andere kleine Gruppe herausfinden, was für uns – und das Internet – am besten ist. Tatsächlich könnte es bereits geschehen sein.
Schlussfolgerungen
Lassen Sie uns mit einigen Schlussfolgerungen abschließen.
- Überschriften sind wichtig: Erstens sollten wir uns wirklich um die Überschriftenstruktur unserer Seiten kümmern, um blinden und sehbehinderten Benutzern zu helfen, die versuchen, sich mit Bildschirmleseprogrammen zurechtzufinden. Die ehrwürdigen h1-h6-Elemente mögen begrenzt sein, aber sie werden von Screenreader-Benutzern stark genutzt.
- Die HTML5-Struktur ist ein Chaos: Wir sollten HTML-Strukturelemente wahrscheinlich ganz ignorieren. Sie waren eine kleine Katastrophe – wir haben die Spezifikation im Grunde gespalten, viele kaputte Umrisse erstellt und bereits zu viel Zeit damit verschwendet, uns mit dem grundlegend kaputten System auseinanderzusetzen. Es lebe die Divs.
- Betrachten Sie die Wahrzeichen von ARIA: Das Hinzufügen von ARIA-Sehenswürdigkeiten zu Ihrer Website ist eine weitere einfache und effektive Möglichkeit, Benutzern von Bildschirmleseprogrammen zu helfen.
- Betrachten Sie schema.org und die Zukunft der Semantik: Schema.org wird von den großen Suchmaschinen unterstützt, und obwohl es im Moment sicherlich eine gemischte Sache ist, scheint es für strukturierte Daten im Web die Zukunft zu sein.
Die HTML5-Spezifikation enthält viele gute Teile, von neuen Formularfunktionen bis hin zur History-API und der Canvas-Implementierung. Tatsächlich wären wir ohne die WHATWG, die die treibende Kraft hinter HTML5 war, immer noch bei HTML4/XHTML 1.0 hängengeblieben, während wir darauf warten müssten, dass das W3C sich zusammenreißt. Doch nur weil HTML5 und die damit verbundene Technologie neu und aufregend sind, heißt das nicht, dass wir alles akzeptieren müssen, was uns gegeben wird.
Manchmal lohnt es sich, zu sehen, wie die HTML-Wurst hergestellt 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 „The Truth About HTML5“ ist für begrenzte Zeit über unsere Schwesterseite erhältlich MightyDeals.com mit unglaublichen 50 % Rabatt.
Haben Sie ARIA Landmarks oder Schema.org verwendet? Sehen Sie eine Zukunft für die Strukturelemente von HTML5? Lass es uns in den Kommentaren wissen.
Ausgewähltes Bild/Miniaturansicht, Verwendungszwecke Strukturbild über Shutterstock.
