In het eerste deel van deze serie we hebben gekeken naar de tekortkomingen die hebben geleid tot de structurele elementen die nieuw zijn voor HTML5; in het tweede deel van de serie we hebben in detail gekeken naar de gevolgen van die tekortkomingen; in dit laatste deel gaan we op zoek naar een manier om verder te gaan en enkele conclusies te trekken over de huidige stand van zaken.
Dit is geen abstract probleem: mensen moeten dit allemaal leren. De volgende generatie webontwerpers en ontwikkelaars krijgt HTML5 als uitgangspunt. Ik heb medelijden met iedereen die moet proberen om het schetsen en snijden in de huidige en toekomstige groep studenten uit te leggen. Misschien houden ze zich wijselijk aan het simpele formaat dat we hebben dat nog steeds prima werkt: gebruik divs met een ID of een class / es.
Het is redelijk om te suggereren dat gebruikersagenten in de toekomst, zoals browsers en schermlezers, meer zullen doen met de structurele elementen van HTML5, en dat maakt ze ons als auteurs meer aangenaam.
Opera's Bruce Lawson suggereerde juist dat op de WATWG-mailinglijst in 2009 :
Ik ken immers geen user-agents die tijd, sectie, footer, datagrid enz. Kunnen gebruiken, maar we verwachten meestal dat dit snel zal gebeuren.
En hier is wat Hickson, de HTML5-editor, als antwoord zei:
Ik niet. De meeste nieuwe elementen zijn alleen bedoeld om het stylen gemakkelijker te maken, zodat we geen lessen hoeven te gebruiken.
Dat alles, en de editor ziet gebruikersagenten nooit die deze elementen zelfs gebruiken. Ze zijn er, zegt hij, om ons te behoeden voor het gebruik van lessen. Anders gezegd, de maker van deze elementen lijkt niet zeker waarom ze zelfs in de specificaties zitten, behalve 'het stylen gemakkelijker maken'.
Er is een school van denken die zegt dat we sowieso maar een handvol nieuwe semantiek nodig hebben. Immers, de spec zou opgeblazen raken als er tientallen of honderden meer nieuwe termen toegevoegd zouden worden.
Aan de ene kant ben ik het ermee eens. Als het gaat om het structureren van een eenvoudige webpagina, zou ik zeggen dat we beter af zijn zonder de HTML-elementen in zijn geheel. Wat ooit een eenvoudige oefening was om divs te gebruiken, is een ingewikkelde puinhoop geworden in HTML5 zonder netto winst.
In termen van semantiek in het algemeen zijn er echter gevallen waarin meer betekenis kan worden toegevoegd bovenop de structuur van onze webpagina (of het nu HTML4, 5 is of wat dan ook) met extra attributen op onze bestaande elementen.
Een van de gemakkelijkste dingen om te implementeren op een bestaande of nieuwe site zijn ARIA-herkenningspunten. (ARIA staat voor Accessible Rich Internet Applications en is een specificatie die een manier definieert om webtoepassingen en webpagina's toegankelijker te maken.)
ARIA-herkenningspunten vormen een deelverzameling van de algemene ARIA-specificatie en een eenvoudig type metadata waarmee blinde en slechtziende gebruikers met schermlezers rond kunnen springen naar de belangrijkste delen van een pagina, de 'herkenningspunten'. We voegen eenvoudig role = "landmark-name" toe aan een bestaand element, op dezelfde manier als we class = "class-name" aan een element zouden toevoegen. De AIRA-oriëntatiepunten zijn besproken in vergelijking met HTML5 hier .
ARIA-herkenningspunten komen veel beter overeen met wat we momenteel doen. De naamgeving is een beetje rommelig, maar ze weerspiegelen in ieder geval de praktijk van het webauteurschap. We kunnen bijvoorbeeld gebruiken:
(Houd er rekening mee dat banner-, hoofd- en inhoudsinformatie slechts één keer per document mogen worden gebruikt.)
ARIA-herkenningspunten zijn een eenvoudige oplossing die de navigatie-opties voor gebruikers van schermlezers verbetert, zonder te waden in het duistere territorium van het document waarin HTML wordt beschreven. Ze zijn snel en eenvoudig te implementeren en moeten echt deel uitmaken van uw standaard HTML-projectsjabloon.
We hebben dus meer semantiek voor toegankelijkheid, maar we hebben ook meer semantiek beschikbaar voor zoekmachines.
Allereerst wil ik absoluut duidelijk stellen dat HTML5-elementen geen enkel voordeel voor SEO hebben. Het is een mythe en we moeten het naar bed brengen. Het gebruik van een artikeltag helpt u of uw klant niet om hoger te scoren dan de volgende. U kunt erop vertrouwen dat Google erachter is gekomen hoe u uw inhoud nu kunt vinden en rangschikken.
Zoekmachines willen echter graag dat webinhoud op een meer gestructureerde manier wordt weergegeven (let op: niet rangschikken ).
Daarom hebben de belangrijkste zoekmachines in de loop der jaren bestaande standaardmanieren voorgesteld of overgenomen om gestructureerde gegevens in een webpagina op te slaan, zodat ze de juiste informatie kunnen extraheren. Als u bijvoorbeeld naar beoordelingen zoekt, heeft u mogelijk sterbeoordelingen opgemerkt in de topresultaten van Google. Dit is een geval waarbij zoekmachines de beoordelingsscore op een gestandaardiseerde manier kunnen extraheren en de weergave van hun resultaten kunnen verbeteren. Recepten zijn een ander voorbeeld, waarbij de kooktijd voor elk resultaat wordt vermeld. Hoewel dergelijke gegevens de positie van een site niet verbeteren, kan het gedetailleerdere resultaat meer gebruikers ertoe aanzetten door te klikken, dus er is potentieel voordeel voor een site, en het is vaak nodig in een situatie waarin iedereen het doet. hoe dan ook.
Hoewel dit soort rijke gegevens al een tijdje in verschillende vormen bestaat, waren vorig jaar nog de belangrijkste zoekmachines gelanceerd een enorme nieuwe reeks standaarden voor dit soort gestructureerde gegevens. Ze noemen ze 'schema's', en ze zijn ondergebracht bij Schema.org . Ze gebruiken de microdata-standaard van HTML en zijn al geïmplementeerd door eBay, IMDB, Rotten Tomatoes en meer.
Dit is de grootste stap in de richting van een meer semantisch web in jaren, en toch werd het gedaan achter gesloten deuren met weinig tamtam en geen standaardproces. Het werd zonder waarschuwing op ons geplaatst en sindsdien grotendeels onder de radar van de webontwerpcommunity gevlogen. Er is ook veel overlap met HTML5-semantiek, er zijn bijvoorbeeld schema's voor artikelen , web pagina's en web pagina-elementen , onder veel meer schema's die alles omvatten van Tv-afleveringen naar medische omstandigheden . Het is ook de aanbevolen manier van het beschrijven van video's op het web.
Na alle discussies over de semantiek van HTML (en het gebrek daaraan) hebben de zoekmachines duidelijk gemaakt dat ze enorm veel meer semantische gegevens in onze opmaak willen, maar het gaat gebeuren bovenop bestaande structuren, en niet met nieuwe elementen.
Maar zeker voor ons als een community die geïnteresseerd is in semantiek en webstandaarden, is HTML's beperkte, gebrekkige benadering van de semantiek, of de gesloten, uitgevallen nergens-benadering van de belangrijkste zoekmachines het beste pad voorwaarts.
In sommige opzichten is het HTML5-semantiekpaard vastgeschroefd; het is aan ons om de schade te beperken. Wat schema.org betreft, het is een hele nieuwe wereld, en een die we van dichtbij moeten bestuderen, of een andere kleine groep gaat bepalen wat er in ons belang - en dat van het web - voor ons is. In feite is het misschien al gebeurd.
Laten we afronden met enkele conclusies.
Er zijn veel goede delen in de HTML5-specificatie, van nieuwe formulierenfuncties tot de History API en Canvas-implementatie. Zonder de WHATWG, die de drijvende kracht achter HTML5 zijn geweest, zouden we in feite nog steeds vastzitten met HTML4 / XHTML 1.0 terwijl we wachtten tot de W3C hun act samen zou krijgen. Niettemin, alleen omdat HTML5 en alle bijbehorende technologie eromheen nieuw en opwindend is, betekent dit niet dat we alles moeten accepteren wat we krijgen.
Soms is het de moeite waard om te zien hoe de HTML-worst wordt gemaakt, dus we weten wat we eten. En in het geval van HTML's structurele semantiek, zou ik liever slagen.
Honger naar meer? Luke's boek "The Truth About HTML5" is voor een beperkte tijd beschikbaar via onze zustersite MightyDeals.com met een verbazingwekkende 50% korting.
Heeft u ARIA-oriëntatiepunten of Schema.org gebruikt? Zie je een toekomst voor HTML5's structurele elementen? Laat het ons weten in de comments.
Uitgelichte afbeelding / miniatuur, gebruik structuur afbeelding via Shutterstock.