v první část této série jsme se podívali na nedostatky, které vedou ke strukturním prvkům novým k HTML5; v druhá část série podrobně jsme se zabývali důsledky těchto nedostatků; v této závěrečné části budeme hledat cestu vpřed a vyvodíme nějaké závěry o aktuálním stavu.

Nejedná se o abstraktní problém: lidé skutečně musí tuto věc učit. Další generace webových návrhářů a vývojářů bude využita HTML5 jako výchozí bod. Je mi líto, že kdokoli se musí pokusit vysvětlit a rozdělit na aktuální a budoucí život studentů. Možná, že se moudře držet jednoduchého formátu, který máme, který stále funguje dobře: použijte divs s ID či třídou.

Je rozumné předpokládat, že snad budoucí uživatelé v budoucnu, jako jsou prohlížeče a čtečky obrazovky, udělají více s konstrukčními prvky HTML5, což jim udělá chutnější jako autoři.

Opera Bruce Lawsonová to jen navrhla WHATWG mailing list v roce 2009 :

Koneckonců nevím o žádném agentovi, který by mohl používat čas, sekci, zápatí, datagrid apod., Ale většinou očekáváme, že bude brzy.

A zde je to, co Hickson, editor HTML5, řekl v odpovědi:

Já ne. Většina nových prvků je určena k usnadnění stylingu, takže nemusíme používat třídy.

To vše a editor nevidí, že někteří uživatelé používají tyto prvky. Jsou tam, říká, aby nás zachránili před využitím tříd. Jiným způsobem se zdá, že tvůrce těchto prvků si není jistý, proč jsou dokonce ve specifikaci, kromě "snazšího stylingu".

Potřebujeme více sémantiky v jazyce HTML?

Existuje škola myšlení, která říká, že potřebujeme jen hrstku nové sémantiky. Koneckonců, spec by se zhoršil, kdyby byly přidány desítky nebo stovky dalších nových termínů.

Z jedné strany souhlasím. Pokud jde o strukturování základní webové stránky, řeknu bychom, že bychom byli lepší bez prvků HTML v sekci. Co bylo kdysi bezproblémové cvičení v používání divů, se stalo v HTML5 komplikovaným nepořádkem bez čistého zisku.

Nicméně, pokud jde o sémantiku obecně, existují případy, kdy lze na strukturu naší webové stránky přidávat více významů (ať už to je HTML4, 5 nebo něco jiného) s použitím dalších atributů na našich stávajících prvcích.

ARIA pro přístupnost

Jednou z nejjednodušších věcí, které lze provést na stávající nebo nové stránce, jsou orientační body ARIA. (ARIA znamená Accessible Rich Internet Applications a specifikace, která definuje způsob zpřístupnění webových aplikací a webových stránek.)

Objekty ARIA jsou podskupinou celkových specifikací ARIA a jednoduchý typ metadat, který umožňuje nevidomým a zrakovým uživatelům s čtečkami obrazovky skákat do významných částí stránky, tj. "Orientačních bodů". Jednoduše přidáme role = "landmark-name" k existujícímu prvku, stejným způsobem bychom k prvku přidali class = "class-name". Značky AIRA jsou diskutováno zde ve srovnání s HTML5 .

Názory ARIA jsou mnohem lépe odpovídat tomu, co právě děláme. Jmenování je trochu nezvyklé, ale přinejmenším odrážejí skutečnou praxi tvorby webů. Můžeme například použít:

  • banner pro celkovou hlavičku stránky.
  • navigace pro navigaci.
  • komplementární pro boční lišty.
  • contentinfo pro zápatí.
  • hlavní oblasti hlavního obsahu.

(Mějte na paměti, že banner, hlavní a obsahové informace by měly být použity pouze jednou za jeden dokument.)

Obrysy ARIA jsou jednoduché řešení, které zlepšuje možnosti navigace pro čtenáře obrazovky, aniž by vnikly do temného území dokumentu HTML. Jsou rychle a snadno implementovatelné a opravdu by měly být součástí základní šablony projektu HTML.

Vyhledávače

Takže máme více sémantiky přístupnosti, ale pro vyhledávače máme k dispozici také více sémantiky.

Za prvé, dovolte mi být naprosto jasné, že prvky HTML5 nemají žádný užitek pro SEO vůbec. Je to mýtus a musíme ho dát do postele. Použití značky článku nepomůže vám nebo vašemu klientovi hodnost vyšší než další chlap. Můžete se spolehnout na to, že společnost Google zjistila, jak najít a posoudit váš obsah.

Vyhledávače však chtějí pochopit, jak nejlépe zobrazovat (poznamenat: nehodnotit ) webový obsah strukturovanějším způsobem.

Proto hlavní vyhledávače v průběhu let vydaly nebo přijaly stávající standardní způsoby, jak označovat strukturované údaje na webové stránce, aby mohli extrahovat příslušné informace. Například při hledání recenzí, které jste si možná všimli, se hodnocení hvězdičkami objeví v horních výsledcích Google. Jedná se o případ vyhledávačů, kteří mají možnost získat přehled o hodnocení podle standardizovaného způsobu a zlepšit zobrazení jejich výsledků. Recepty jsou dalším příkladem, kde se u každého výsledku uvádí doba vaření. Zatímco taková data nezlepšuje hodnost webu, podrobnější výsledek může povzbudit více uživatelů k prokliku, takže tam je nějaký potenciální přínos pro danou lokalitu a je často nutný v situaci, kdy se to děje ve zbrojení, kde to dělají všichni vaši konkurenti tak jako tak.

Zatímco tento druh bohatých dat byl na nějakou dobu v různých podobách, jen v loňském roce hlavní vyhledávače zahájeno rozsáhlé nové spektrum norem pro tento druh strukturovaných dat. Říká jim schémata a jsou ubytováni Schema.org . Používají standard HTML pro mikrodata a již byly implementovány jako eBay, IMDB, Rotten Tomatoes a další.

To je největší skok k více sémantické síti v letech a přesto to bylo děláno za zavřenými dveřmi s malým fanfárem a žádným standardním procesem. Byl spuštěn na nás bez varování a od té doby většinou letěl pod radarem komunitního designu. Existuje spousta překrývání se sémantikou HTML5, například existují schémata články , web stránek a web prvky stránky , mezi mnohem více schémat, které obsahují vše od Televizní epizody na zdravotní podmínky . Je to také doporučeným způsobem popisování videí na webu.

Po celé debatě o sémantikách HTML (a jejich nedostatečnosti) vyhledávače jasně uvedly, že v našem značení potřebují mnohem více sémantických údajů, ale bude se to dělat nad existujícími strukturami, a ne novými prvky.

Ale jistě pro nás jako komunitu, která má zájem o sémantiku a webové standardy, není ani omezený, chybný přístup HTML k sémantikám, ani uzavřený, vynechaný přístup velkých vyhledávačů je nejlepší cesta vpřed.

V jistých smyslech je kůň sémantiky HTML5 šroubován; je jen na nás, abychom zničili škody. Co se týče schématu.org, je to zcela nový svět a jeden bychom měli velmi pečlivě zkoumat, nebo jinou malou skupinou zjistí, co je v našem - a na internetu - v nejlepším zájmu pro nás. Ve skutečnosti se to již mohlo stát.

Závěry

Zkusme nějaké závěry.

  • Záhlaví : jednak bychom měli skutečně záležet na struktuře nadpisů našich stránek, abychom pomohli uživatelům s nevidomým a zrakovým postižením, kteří se pokusí obejít s čtečkami obrazovky. Úctyhodné prvky h1-h6 mohou být omezené, ale uživatelé čtečky obrazovky se na ně spoléhají.
  • Struktura HTML5 je nepořádek: pravděpodobně bychom měli zcela ignorovat strukturální prvky HTML. Byla to trochu katastrofa - v podstatě jsme to spekulovali, vytvořili spoustu rozbitých obrysů a zbytečně mnoho času už jsme se snažili dostat naše hlavy kolem zásadně zlomeného systému. Dlouhé žít.
  • Zvažte orientační body ARIA: přidáním orientačních bodů ARIA k vašemu webu je další jednoduchý a účinný způsob, jak pomáhat uživatelům čtečky obrazovky.
  • Zvažte schématu.org a budoucnost sémantiky: schema.org má podporu velkých vyhledávačů a zatímco je to v současné době jistě smíšená taška, zdá se, že to je budoucnost strukturovaných dat na webu.

Existuje spousta dobrých částí ve specifikaci HTML5, od nových funkcí formuláře k implementaci Historie API a Canvas. Ve skutečnosti, bez WHATWG, kteří byli hybnou silou HTML5, jsme ještě přilepili HTML4 / XHTML 1.0, zatímco jsme čekali na W3C, aby se jejich společné jednání stalo. Nicméně jen proto, že HTML5 a veškerá související technologie kolem něj jsou nové a vzrušující, neznamená to, že musíme přijmout vše, co nám dáváme.

Někdy stojí za to vidět, jak se vyrábí klobása HTML, takže víme, co jedeme. A v případě strukturální sémantiky HTML bych raději upustila.

Hladíte více? Lukeova kniha "Pravda o HTML5" je k dispozici na omezenou dobu prostřednictvím našeho sesterského webu MightyDeals.com za úžasnou 50% slevu.

Používali jste orientační body ARIA nebo Schema.org? Vidíte budoucnost konstrukčních prvků HTML5? Dejte nám vědět v komentářích.

Doporučený snímek / náhled obraz struktury přes Shutterstock.