v první část této série jsme pokryli nedostatky, které vedou ke strukturálním prvkům HTML5, v této druhé části se budeme podrobně zabývat důsledky těchto nedostatků.
Několikrát jsem řekl, že HTML5 představuje novou metodu strukturování webové stránky a pravděpodobně se ptáte, co vlastně je. Je to tam ve specifikaci, která zavádí pojem "rozdělení obsahu" ': rozdělení obsahu je obsah, který definuje rozsah záhlaví a zápatí. Každý prvek obsahu sekce může mít nadpis a obrys.
Specifikace dokládá svůj přístup k okruhů, částí a obrysů aby koncept byl jasný. Jasně těm, kteří musí implementovat funkcionalitu v prohlížečích. Pro pochopení strukturálních prvků HTML (oddíl, článek, navigace, stranou a jejich souvisejících prvků, záhlaví a zápatí) a tento obskurní koncept "sekce obsahu" nebo "nastínění", musíme udělat trochu výlet do historie HTML.
Koncept nastiňování představený v HTML5 lze vysledovat až do roku 1991 a byl zařazen do špatného osudového XHTML 2.0 spec a konečně vidí světlo dne v HTML5 ... jen tak špatně, že myšlenka je při příjezdu hodně mrtvý.
Před HTML5 byla hierarchická struktura stránky určena položkami nadpisy - našimi starými přáteli h1 až h6. Mohli bychom strukturu stránky vyslovit tím, že název stránky je h1, záhlaví článku může být h2 a možná i podkapitoly v článku mohou být h3 a h4 a tak dále.
To je v pořádku pro jednoduchý dokument, ale pomocí značky nadpisů pro vytvoření logické hierarchie nebo "obrysu dokumentu" pro komplexní a moderní webové stránky je velmi obtížné. Součástí problému je nedostatek způsobu, jak určit, kde začíná a zastavuje sekce stránek. Řekněme, že jsme měli již zmíněný dokument s názvem h1 pro název stránky, h2 pro název článku, h3 pro podkapitoly, ale chtěl také označit název našich sekcí na bočním panelu s nadpisy h3.
Dokument, který by takovou strukturu vytvořil, by vypadal takto:
My Old Blog
My Latest Blog Post
My Blog Post Sub Heading
My Blog Post Sub Heading
About Me
Archives
Social Links
Zde jsou prvky h3 "vlastněny" h2 nad nimi, i když to nemá moc smysl. Samozřejmě, že bychom je rozdělili na něco jako div pro článek a div pro postranní panel, ale tyto jsou ignorovány uživatelskými agenty (např. Čtečky obrazovky), kteří určují obrys stránky podle samotné struktury titulků.
Tím, že vázáme hierarchii stránek přímo na to, co jsou často orientační úrovně prezentace, jsme omezeni tím, jak můžeme strukturovat stránku.
Při pokusu o vyřešení tohoto problému HTML5 zavádí pojem "sekce prvků", tj. Speciálních prvků, které rozdělují stránku nahoru na části, které jste odhadli, a tyto sekce určují úroveň vnoření hlaviček a hierarchii , nebo "obrys" stránky.
To znamená, že hierarchie stránky je odpojena od elementů nadpisu a namísto těchto nových prvků dělení se určí, jakou úroveň je vlastně element záhlaví.
V prvním návrhu Specifikace XHTML 2.0 , řezání pracovalo s prvkem sekce a obecný element h hlavičky. Při psaní kódu HTML bychom pak neurčili, jakou úroveň záhlaví chceme použít, jednoduše bychom prohlížeč určit, zda úroveň hnízdění pro danou záhlaví. Mohli bychom hnízdit prvky sekce 99 hluboko a h prvek na 99. úrovni by byl ekvivalentní prvku h99. Tímto způsobem můžeme logicky strukturovat naše dokumenty, aniž bychom se obávali, že můžeme využívat omezené prvky h1-h6.
(Tato myšlenka opravdu pochází z roku 1991, mimochodem: as Jeremy Keith Tim Berners-Lee navrhl myšlenku části a h elementu pro strukturu stránky na konci tento e-mail z října 1991 .)
Hickson se pokoušel zavést stejný koncept do HTML5, ale s dodatečnou mírou obtížnosti: chtěl udržet zpětnou kompatibilitu a zavést nějakou novou sémantiku, která by "zjednodušila tvorbu" pro zavádění. Proto místo toho, abychom měli pouze prvek oddílu v HTML5, máme také článek, nav, a stranou, které dělají totéž jako sekce, ale s různými názvy, které se používají různými způsoby.
Co říká spec o těchto prvcích? Doporučuji vám přečtěte si spec pro sebe , ale tady je chuť:
Prvek sekce je základem řezu pro vytvoření obrysu dokumentu.
Prvek oddílu představuje obecnou část dokumentu nebo aplikace. Část je v tomto kontextu tématické seskupení obsahu, obvykle s nadpisem.
Příklady sekcí by byly kapitoly, různé stránky s kartami v dialogovém okně s kartami nebo číslované části dizertační práce. Domovská stránka webových stránek by mohla být rozdělena do sekcí pro úvod, novinky a kontaktní informace.
Poznámka ve specifikaci říká, že prvek by neměl být používán čistě pro styling účely - div by byl lepší tam, a pochopitelně tak, jak sekce hodil v willy-nilly pro styling by vytvořil velmi rozbité dokumentu obrysu.
Poznámka dále říká "Obecným pravidlem je, že prvek oddílu je vhodný pouze tehdy, pokud obsah prvku bude explicitně uveden v obrysu dokumentu" a to je nejjasnější vyjádření o prvku sekce ve specifikaci.
Když chápeme koncept dělení a ohraničení, začlenění prvku sekce má smysl. Nezjistila se ve společných hodnotách třídních výzkumů, ale objevila se v XHTML 2.0 a koncepčně se datuje do roku 1991.
Ostatní konstrukční prvky, které HTML5 představuje - ty, které se údajně odrážejí ve výzkumu - dělají přesně stejnou věc jako prvek oddílu, co se týče obrysu dokumentu. Vytvářejí také hierarchii stránky a tím i dokumentový obrys.
Vezměte například prvek článku. Mnoho lidí předpokládá, že jde jen o články jako je tento. Ale to vůbec není. Je to "článek" ve smyslu "oblečení". Je lépe považováno za "zásilku" jako za "kus oblečení", neboť jeho definice je tak široká.
Když jsou elementy článku vnořeny, vnitřní prvky článku představují články, které jsou v podstatě příbuzné obsahu vnějšího předmětu. Například položka blogu na webu, která přijímá komentáře předložené uživateli, může představovat komentáře jako prvky článku vnořené v prvku článku pro položku blogu.
V HTML5 jsou komentáře uživatelů, vlastní článek, příspěvky ve fórech a dokonce i 'interaktivní widgety a gadgety'. Definice je tak široká, že je k ničemu - sémantika má předávat smysl, ale použití společného výrazu pro tak širokou škálu položek činí tento prvek nesmyslný.
Jedná se o příklad, kdy jsme specifikovali spec - několik lidí správně dodržuje spec a dělá téměř všechno článek (přehledy po blogu, příspěvky na blogy, komentáře, widgety, příspěvky na fóra atd.), Zatímco jiní si to jen uchovávají pro hlavní článek na stránce, která je pouze jednou částí jeho široké definice. Možná si myslíte, že na tom nezáleží, a do značné míry byste měl pravdu. Ale přemýšlejte o všech těch čtecích službách, které mají za cíl jen analyzovat hlavní obsah stránky. Která implementace spec by měla následovat? Měly by se řídit tím, co to spec skutečně říká, nebo by se měly řídit obecnou implementací komunity, kde obvykle existuje jen jeden kanonický 'článek' na stránce?
Jedná se o zmeškanou příležitost a co se stane, když specifikace selže ve skutečnosti, a editor a, aby byl spravedlivý, komunita, nedokáže sdělit, co vlastně říká spec.
Představte si, zda se článek nepoužíval k připomínkám. Představte si, že například komentáře získaly svůj vlastní prvek a přijetí se rozšířilo. Výrobci prohlížečů by mohli přidat funkci "vypnout komentáře", která by mohla snadno skrýt (nebo jinak analyzovat) komentáře na webových stránkách. Ale Hickson výslovně odmítl žádost o komentářový prvek . V HTML5 jsou články až do konce.
Kromě toho je další prvek, který se neobjevil nikde v Hicksonově výzkumu názvů tříd, a získává velmi zvláštní definici bootování:
Boční prvek představuje část stránky, která se skládá z obsahu, který je tangenciálně spojen s obsahem kolem prvku stranou a který může být považován za oddělený od tohoto obsahu. Tyto sekce jsou často zobrazovány jako postranní lišty v tištěné typografii.
Tento prvek může být použit pro typografické efekty, jako jsou uvozovky nebo postranní lišty, pro reklamu, pro skupiny prvků nav a pro jiný obsah, který je považován za oddělený od hlavního obsahu stránky.
Kdo ví, proč by se měl brát v úvahu jak přitahovací kotouče, postranní lišty, reklama a skupiny navigačních prvků, ale také vytváří nové části v obrysu dokumentu. Znamená to, že se v obraze dokumentu objevují vlastní odrážky, což se zdá, řekněme, "liché". Opět, jeho náhodné použití dobře-intentioned webových návrhářů má a bude vytvářet spoustu rozbitých dokumentů obrysy.
Prvek nav se zdá nejsilnějšími oddělovacími prvky a naštěstí se tato definice nepřekročila.
Prvek nav představuje část stránky, která odkazuje na jiné stránky nebo části stránky: část s navigačními odkazy.
Který je v pořádku a může mít teoretické výhody přístupnosti (uživatelský agent by mohl přeskočit nebo navštívit navigační odkazy - ne, ale mohli).
Problémem je to, že v duchu "zjednodušení tvorby" a nahrazení divu s elementem nav vybuchujeme navigační styling pro další podmnožinu uživatelů. Uživatelé IE6-8 s vypnutým kódem JavaScript (Yahoo výzkum naznačuje 1-2% všech uživatelů má vypnutý JavaScript ) jsou oběťmi tohoto problému. S vypnutým kódem JavaScript skript HTML5 založený na jazyce JavaScript, který pomáhá IE6-8 pochopit prvky HTML5, nefunguje, takže prohlížeč nestandarduje prvky HTML5. To může mít vliv pouze na malý počet uživatelů, ale proč je vůbec ovlivňovat?
Položky záhlaví a zápatí jsou klasickým případem užívání společných termínů a jejich použití je velmi odlišné.
Šablona uvádí, že žádný z těchto prvků nevytváří nové části v obrysu dokumentu, a to navzdory skutečnosti, že jsou často zobrazeny jako rovnocenné se sekcí, nav, článkem a stranou. Ve skutečnosti nic neudělají. Jsou pouze zahrnuty k vymezení oblastí specifické části v dokumentu.
Tady je to, co specifikace říká o hlavičce: hlavičkový prvek představuje skupinu úvodních nebo navigačních pomůcek.
Poznámka: Element záhlaví má obvykle obsahovat nadpis oddílu (prvek h1-h6 nebo prvek hgroup), ale to není nutné. Element záhlaví lze také použít k zabalení obsahu sekce, vyhledávacího formuláře nebo jakéhokoli příslušného loga.
a zápatí: prvek spodní lišty představuje zápatí pro nejbližší oddělovací obsah předchůdce nebo pro rozdělení kořenového prvku. Písmo obvykle obsahuje informace o jeho sekci, například o tom, kdo jej napsal, odkazy na související dokumenty, údaje o autorských právech a podobně.
V prvku HTML5 je element těla vlastně prvkem kořenové sekce, takže celková záhlaví a zápatí jsou určeny k popisu části kořenového těla. Každá sekce může mít hlavičku a / nebo zápatí - nejsou určeny pouze pro celkové záhlaví a zápatí, jak jsme předpokládali. Jednotlivé komentáře mohou mít například záhlaví a zápatí. Ve skutečnosti, jak jsme se doteraz dotýkali, spec ve skutečnosti dává příklad použití zápatí v komentáři nad obsahem skutečného komentáře. Správně, komentáře HTML5 obsahují články a mohou mít zápatí pro záhlaví, a to je v aktuální specifikaci. Chcete záhlavní prvek komentářů? Ne? No, máte jednu.
Znovu je to místo, kde HTML5 bere společné termíny a používá je způsobem, který nelze rozpoznat běžnému autorovi webu.
Ale je zde něco, co jsme se nepodívali v HTML implementaci dělení. Pozorovali jste to? Máme prvky sekce, ale nemáme obecný element h. Nebojte se, je to řešení ve specifikaci :
Části mohou obsahovat nadpisy libovolné hodnosti, ale autorům se doporučuje, aby buď používali pouze prvky h1, nebo používali prvky odpovídajících hodností pro úroveň hnízd.
HTML5 chce být zpětně kompatibilní, takže WHATWG se rozhodl nezavést h element (navzdory zavedení spousty nových prvků pro dělení) a namísto toho chtěl změnit element h1 jako obecný element h. Použijte h1 všude a nechte algoritmus pro návrh HTML5 určit jeho skutečnou úroveň ... nebo tak teorie jde.
To je strašný nápad z několika důvodů, z nichž dva jsou přístupnost a styling.
Použití h1 všude je pro přístupnost velmi špatné. Slepí uživatelé se silně spoléhají na strukturu nadpisu webu. Je důležité, abychom si všichni připomněli, jak důležitá struktura nadpisů je pro účely přístupnosti. Například prosinec 2008 průzkum více než 1000 uživatelů čtečky obrazovky WebAIM zjistil, že 76% uživatelů nevidomých a zrakově postižených "vždy nebo často" navigovalo podle okruhů, kdy byly k dispozici. A při průzkumu v květnu 2012 bylo zjištěno, že při navigaci na webové stránce byly 82,1% hlavičky "velmi užitečné" nebo "poněkud užitečné". (To je dobrý, praktický výzkum, takže si vzpomeňte.)
Díky tomu, že všude všude h1s bude mít stránky těžší navigovat pro nevidomé uživatele. Teoreticky by čtenáři obrazovky používali namísto toho algoritmus výkresu ve formátu HTML a navigovali pomocí obrysu dokumentu, ale vzhledem k tomu, jak byli autory řešeny, aby implementovali prvky seřizování, je načrtnutí nepořádek a snaha o navigaci obrysů dokumentu, které se vůbec nezamýšlely být ještě horší pro nevidomé uživatele.
Specifikace HTML5 nabízí cestu: pokračujte v používání odpovídajících úrovní h1-h6, abyste udrželi zpětnou kompatibilitu. Nyní však v jednom dokumentu udržujeme dva obrysy dokumentů a vzhledem k problémům, které autoři měli v první řadě s ohledem na obrysy dokumentu, je pravděpodobné, že někdo zachová jak logický obrys h1-h6, tak i logiku sekce HTML5 se zdá být v nejlepším případě vzdálená.
Ale to se zhoršuje. Řekněme, že chceme běžet s čistým obrysem HTML5 a všude používáme h1s. Nezapomeňte, že ve specifikaci HTML5 je h1 jen obecný element h; jeho skutečná úroveň je určena tím, jak hluboko je vnořeno v prvcích dělení.
Tak jak to budeme stylovat? Mohli bychom do všech elementů h1 přidat názvy tříd, abychom je mohli vybrat, ale to je v rozporu s uvedeným cílem HTML5 zjednodušení tvorby; a můžeme se přiklonit k h1-h6 (všechny jsou považovány za generické prvky v HTML5 obrysu).
Mohli bychom je zkusit a stylovat je přes kaskádu, ale tohle se rychle stává absurdním Připomněla Nicole Sullivanová . Ve skutečnosti "absurdní" to jen začíná popisovat. Když zvážíte možné kombinace částí, článků, navigací a stran a chcete vytvořit obecný styl pro nadpis, který je, například, pěti úrovní hluboký (tj. Ekvivalent h5), budete muset psát styly pro všechny možné kombinace, které dostane naprosto absurdní . Zde je obecný styl prvku h3:
article aside nav h1, article aside section h1,article nav aside h1, article nav section h1,article section aside h1, article section nav h1, article section section h1,aside article nav h1, aside article section h1,aside nav article h1, aside nav section h1,aside section article h1, aside section nav h1, aside section section h1,nav article aside h1, nav article section h1,nav aside article h1, nav aside section h1,nav section article h1, nav section aside h1, nav section section h1,section article aside h1, section article nav h1, section article section h1,section aside article h1, section aside nav h1, section aside section h1,section nav article h1, section nav aside h1, section nav section h1,section section article h1, section section aside h1, section section nav h1, section section section h1 {font-size: 1.00em;}Přesto nám to dávají strukturální prvky HTML. Takový nepořádek.
Hladíte více? Třetí čá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.
Používáte články článku v dokumentu několikrát? Jsou oddíly užitečné nebo bychom se měli držet s divy? Dejte nám vědět své myšlenky v komentářích.
Doporučený snímek / náhled obraz struktury přes Shutterstock.