Strukturální prvky HTML - článek, část, navigace a stranou - jsou na první pohled některé z nejsnadnějších částí specifikace HTML5, které je třeba pochopit a implementovat. Jsou to však některé z nejslabších, špatně pochopených a špatně implementovaných částí HTML5.

Vytvořeno libovolně; snaží se představit zcela nový způsob strukturování webových stránek; porušují vlastní zásady návrhu HTML; poškozují dostupnost pro některé uživatele; a neměli byste je používat.

Ano, vydávám zbraně - zářící proti této konkrétní části HTML5, ale prosím nepředpokládejme, že jsem "anti-HTML5". Napsal jsem knihu o HTML5 , Mám rád otevřený web, miluji dobré webové standardy a miluju fakt, že po desetiletí stagnace se inovace v technologiích webových sítí dějí s naprostou rychlostí. To ovšem neznamená, že musíme přijmout všechno, co nám bylo dáno. Nemusíme jíst vše na desce HTML5, i když najdeme části pokrmu spíše chutné. Některé části se pravděpodobně musí vrátit šéfkuchaři.

Existují dobré a špatné části docela obrovské specifikace HTML5 a budeme kriticky přemýšlet o jedné velmi specifické části specifikace: představuje sekci nebo "strukturální" prvky HTML5. Položme tedy naše detektivní klobouky a podíváme se, odkud tyto nové prvky skutečně pocházejí, jak mají být použity, a jak jsme my, komunita webového designu, zásadně neporozuměli, a to v podstatě dráždí spec. Budeme zpochybňovat samotný základ těchto prvků a na jejich cestě budeme mít několik mýtů.

Odkud pocházejí konstrukční prvky HTML5?

Vypusťme jeden mýtus, o kterém se opakovaně diskutovalo o těchto prvcích: myšlenka, že jsou založeny na výzkumu, jak jsme my, webová komunita, označili naše dokumenty. Je to mýtus, který se již několik let opakoval v knihách, blogy a rozhovory, a to prostě není pravda. Jak to mám vědět? Zeptal jsem se.

Když jsem zkoumal původ těchto prvků, rozhodl jsem se požádat redaktor specifikace HTML5, Ian Hickson, odkud tyto prvky pocházejí. Odpověděl:

Já a další přispěvatelé WHATWG [přidali], [2004], protože byly zřejmými prvky, které je třeba přidat, když viděli, jak autori používali kód HTML4. Později (pozdní 2005 na začátku roku 2006) jsme provedli nějaký objektivní výzkum, abychom zjistili, jaké jsou desítky prvních desítek HTML a ukázalo se, že se v podstatě přesně shodují s prvky, které jsme přidali, což bylo výhodné.

Rozpusťme to: nejprve, Hickson a členové WHATWG přidali tyto prvky před provedením jakéhokoli výzkumu . Můžete se ponořit do archivů WHATWG (děkuji veřejnosti) a objevit včasná diskuse o těchto prvcích pro sebe. Například, můžete vidět Hickson diskutovat je v listopadu 2004, s komentáři takový jako toto :

Ano, mám v úmyslu zahrnout věci jako [sémantické prvky] do webových aplikací. Tabulka v mé kanceláři v současné době obsahuje seznam prvků pod nadpisem "HTML5 BLOCK LEVEL ELEMENTS" a snažím se zjistit, jak je dobře fungovat (dotyčné prvky jsou v současné době uvedeny v návrhu, ale návrh nezpracovává hlavičky vůbec dobře). Zatím jsem se nepodíval na inline značku, ale to je také na kartách.

Zdá se, jak se stala strukturální sémantika HTML5: jeden člověk, jedna tabule a některé vstupy od dalších členů WHATWG. (Pracovní skupina WHATWG nebo technologie webových aplikací pro technologie Hypertext Application Technology byla vytvořena zástupci prohlížečů v reakci na opuštění HTML jazyka pro utopický ideál XHTML 2.0 W3C).

Prvky, které používají miliony dokumentů, o nichž jsme diskutovali a diskutovali, se zdálo, že se stalo, že se libovolně vytvořili na rozmaru editoru HTML5 v roce 2004. (A byli setkáni s kritická kritika a některé bohužel přesné předpovědi skoro ihned.)

Kolektivní záda

Tantek trvá na výzkumu před specifikováním nových formátů po dlouhou dobu v kontextu mikroformátů a nakonec budou specifikace WHATWG podobně navrženy s aktuálními daty namísto toho, abychom vytahovali věci z našich kolektivních zád. - Ian Hickson

To nás přivádí k druhému bodu. V prosinci 2005 - asi tak rok poté, co přišel s těmito novými prvky - provedl Hickson (zaměstnanec společnosti Google) nějaký výzkum o tom, jak byly dokumenty vytvořeny pomocí rozsáhlé databáze dokumentů společnosti Google. Výzkum byl "analýzou vzorku mírně přes miliardu dokumentů, extrahováním informací o populárních názvech tříd, prvcích, atributech a souvisejících metadatech." ID nebyly zahrnuty do výzkumu. Zjištění zveřejnila společnost Google jako Statistiky tvorby webových stránek (2005) .

Kritická část výzkumu, pokud jde o strukturální prvky HTML, byla třídních nálezů , která i přes použití vzorku, kde ~ 900 milionů z 1 miliardy dokumentů zřejmě neměl žádné třídy, obsahovalo některé běžné třídy. Jsem si jistý, že jsme všichni použili v našich projektech před: footer, menu, title, small text , obsah, hlavička, nav, autorská práva, tlačítko, hlavní a podobně.

Hickson pak poskytne své datování, což naznačuje, že tyto třídy skutečně [mapují] velmi dobře elementy, které jsou navrženy v HTML5 "a poskytuje tabulku porovnávající výsledky výzkumu a nové prvky v HTML5: zápatí třída je ve výzkumu, prvek footeru je v HTML5; třída záhlaví je ve výzkumu, hlavička je v HTML5; text třídy, obsah , hlavní , tělo jsou ve výzkumu a, err ... článek je v HTML5, který, jak uvidíme, vůbec neodpovídá; část se vůbec nenachází, což je také důležité poznamenat.

Vezmeme-li to v nominální hodnotě, je to dost rozumné. Používám zápatí, používáte zápatí, zápatí je v HTML5. Co je za problém?

Problémem je, když si přečtete aktuální Specifikace HTML5 , prvky v HTML5 jsou definovány způsobem, který má málo společného s tím, jak jsme je tradičně používali.

Na jedné straně společnost Hickson představila zcela nový koncept strukturování webové stránky v HTML5 s prvky pro dělení . Na druhou stranu, Hickson porovnává jeho elementy dělení HTML5 s třídami používanými ve volné přírodě, aniž by pochopil, proč byly tyto třídy skutečně používány. Klasickým příkladem je "hlavička", kterou by většina z nás použila pro oblast v horní části stránky, ale specifikace HTML5 naznačuje, že jej můžete použít pro záhlaví všech komentářů na stránce . Opravdu. Jen proto, že třídy ve výzkumu a prvky v HTML5 mají stejný název, neznamená to, že jejich použití jsou stejné.

Pokud by bylo jasně sděleno, že nové prvky byly představeny s novým účelem a jasným zdůvodněním, pak by to nebylo tak špatné. Ale to nebylo to, co nám bylo řečeno.

Tady je Hickson v roce 2009 , odpovědět na otázku ohledně účelu oddílu, nav, článek, stranou a další:

Jedná se víceméně o vyplňování nejběžnějších požadavků od webových vývojářů na základě nejčastějších atributů třídy = "". Jejich hlavním účelem je zjednodušit tvorbu a styling.

Bohužel se zdá, že se jedná o případ, kdy editor HTML5, protože všechny jeho dobré práce při vytahování spekula dohromady (zapomněli si být štědré), zapomněli, proč tyto prvky přidal k tomu, co je v podstatě jeho specifikace. Možná je to časový rozdíl mezi lety 2009 a 2004, kdo ví. Ale víme to: elementy dělení HTML5 nebyly přidány, aby vyplňovaly "nejčastější požadavky od vývojářů webů" vůbec. Jak to víme? Můžeme se podívat na seznam a vidět ty nejzásadnější přidané prvky, jako je prvek oddílu (a související článek a stranové prvky), se neobjevují v běžném výzkumu atributů třídy.

Ačkoli Hickson možná zapomněl, proč byly tyto prvky přidány, můžeme ještě poštěstí číst specifikaci, která dokumentuje jejich účel.

Ale co se stane, když řeknete webovým návrhářům a vývojářům, že se nemusíte bát, tyto prvky jen nahradí to, co už děláte, a pak specifikujete tyto prvky způsobem, který rozhodně není to, co weboví návrháři a vývojáři dělají? Dali jste je na jednosměrný výlet do zmateného města.

Jedná se o nejhorší druh výzkumu: líný výklad údajů provedených k odůvodnění rozhodnutí, která již byla učiněna. Zásadně opakovaným designem HTML5 je " připravte krávy ", to je" Když je praxe mezi autory již rozšířená, zvážte to přijmout spíše než zakazovat nebo vymýšlet něco nového. " A tak se zdá, že s těmito novými konstrukčními prvky: sekce, článek, nav a stranou (a záhlaví a zápatí) - jistě jsou to jen "dláždějící krávy"?

To je dojem, který mnozí z nás dostali, protože to nám bylo řečeno.

Ve skutečnosti, téměř před pěti lety, když jsme poprvé dostali a náhled HTML5 , vypadalo to, jako by tyto prvky mohly jednoduše nahradit "nesemantické" divy, které jsme zvyklí používat. Co bylo div id = "hlavička" v horní části stránky by se nyní mohlo stát pouze záhlaví ; div id = "footer" by se nyní mohlo jen stát zápěstí a náš div by mohl být pouze článek. Jednoduché, že?

Rozkročili jsme spec

Bohužel, navzdory tomu, co jsme řekli (tj. Vyměňujeme jeden za druhého), jsme tyto prvky skutečně implementovali způsobem, který se neodráží v specifikaci HTML5. To znamená, že pokud jde o strukturu HTML5, jsme v podstatě speklovali spec. V současné době existují dvě metody struktury HTML5 - interpretace komunity, která se odráží v článku A List List 2007 (a bezpočet dalších); a skutečnou specifikaci HTML5, která představuje zcela nový způsob strukturování webové stránky nazvaného nastínění.

Toto je rozpor v centru strukturální sémantiky HTML. Na jedné straně máme redaktor, který nám říká, že nové prvky jsou založeny na výzkumu toho, co jsme již dělali, a jsou proto zaměřeny pouze na to, aby se autorství trochu usnadnilo. a na druhé straně máme to, co editor skutečně vytvořil ve specifikaci HTML5, což je nový způsob strukturování webové stránky způsobem, který generuje obrysy dokumentu pomocí prvků dělení .

Byla tu jasná volba. Přestávejte s principy návrhu HTML5 a představte něco nového, nebo se jednoduše řídit reálnými postupy tvorby a určit prvky tak, aby odrážela praxi webového designu. Hickson se pokusil udělat první a nazval to druhou a teď máme jeden velký nepořádek na ruce.

Hladíte více? Druhá část tohoto článku je nyní k dispozici a 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.

Pracujete s prvky struktury HTML5? Domníváte se, že jsou užitečné nebo jsou překážkou? Dejte nám vědět v komentářích.

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