Každý, kdo se podílí na návrhu nebo vývoji webových stránek, narazí na výraz "sémantický" s odkazem na HTML5 a web obecně. Tento často problematický termín je pro mnohé z nás pochopitelně matoucí, zejména proto, že v určitých kontextech existuje výrazný nedostatek konsenzu ohledně jeho definice.

V tomto článku budeme zkoumat, co dělá HTML5 více sémantický než jeho předchůdci, a načrtnout, co to znamená pro vývoj webu nyní a v budoucnu.

Sémantika je o významu

Pojetí sémantiky pochází z oblasti lingvistiky věnované studiu významu. S přirozenými jazyky, jako je angličtina, rozlišujeme syntaxi (nebo gramatiku) a smysl. Pokud si myslíte na větu, to má co do činění s tím, jak to lidé interpretují:

"Ten muž hodil počítač oknem."

Sémantika se týká aspektu věty, která umožňuje lidem, kteří je čtou, porozumět poselství obsaženému v něm. Spolu s syntaxou je sémantika velkou částí toho, co usnadňuje komunikaci prostřednictvím jazyka. Když hovoříme o sémantikách ve vztahu k HTML, hovoříme o komunikaci mezi počítačovými programy, nikoli lidmi. Sémantický kód HTML je v podstatě zaměřen na posílení rozsahu, do kterého mohou aplikace zpracovávat nebo interpretovat obsah webu. Zvažte například následující výňatek z webové stránky, který obsahuje některé z delších struktur HTML:

The man threw the computer through the window.

Prvky (a atributy) poskytují prohlížeči informace o tom, jak prezentovat obsah uživateli. Prvky odstavce budou ve výchozím nastavení zobrazeny s nadpisy nad nimi a pod nimi, obrazové prvky se zobrazují pomocí souboru obrázků obsaženého v atributu src a tak dále. Když prohlížeč narazí na každý z těchto prvků, vykresluje obsah určitým způsobem, který je nakonec určen použitými značkami.

Struktury HTML již mají význam

Je důležité si uvědomit, že HTML5 poprvé neuvádí sémantiku do HTML. HTML již měl vestavěnou úroveň sémantiky. Stávající struktury HTML mají smysl v různé míře. Pokud se podíváte na tento známý prvek HTML, který je součástí výše uvedeného výňatku, uvidíte, co mám na mysli:

Ačkoli je zkratka, název prvku img označuje něco, co má smysl pro obsah značky, tj. Že je to obrázek. Tímto způsobem můžete považovat sémantický aspekt kódu HTML za podobný metadatem, jelikož názvy prvků tagů a atributů popisují data (data na webové stránce jsou element a obsah atributů).

Nezapomeňte, kdy jsme začali oddělovat obsah od stylu?

Některé struktury, které jsme použili v HTML, informují prohlížeč, jak stylovat položky obsahu na stránce. Jak uplynul čas, bylo nám doporučeno oddělit formátování stránky od jejího obsahu.

Například jsme nahradili tag i s em, což je smysluplnější a neříká prohlížeču přesně, jak zobrazit text uvnitř prvku. Účelem použití em spíše než i je poskytnout informace o povaze položky obsahu spíše než informace o stylingu. Em samozřejmě ovlivňuje styl, který je hlavním důvodem, proč ho používáme, nicméně ponechává detaily stylu až na prohlížeč a / nebo kód CSS ideálně oddělenou od značky stránky.

Sémantický HTML5 je v tomto procesu větším krokem. Konečným cílem je vytvořit systém, ve kterém aplikace mají přístup k většímu významu - to však není AI, je to spíše o zahrnutí popisných informací o datových položkách v kódových strukturách, které je modelují.

Není to podobné jako XML?

Pokud jste v minulosti používali XML, budete mít jisté znalosti o konceptech v sémantické značce. Například při návrhu dokumentu XML (nebo schématu) pro datovou množinu vybíráte prvky a atributy pro modelování položek v rámci dat. V ideálním případě názvy prvků a atributů definují datové položky smysluplným způsobem:

Jim Smith23 November 2012

Vývojář zde vybral názvy, které intuici popisují modelované hodnoty dat. S HTML5 si nemůžete vybrat vlastní prvky, protože to není volně rozšiřitelné. Struktury, které jsou pro ni vybrány, mají ve srovnání s předchozími verzemi mnohem inherentnější význam.

Mimochodem, existují různé typy významu

Hovořili jsme o významu, ale ve skutečnosti existují různé způsoby, kterými může být prvek nebo jiný kódový výpis smysluplný.

Značka img je smysluplná v tom, že vypráví něco o obsahu prvku a popisuje, co to je.

Některé nové prvky HTML5, jako například záhlaví a zápatí, mají smysl v tom, že naznačují něco o roli nebo účelu prvku v celkové struktuře stránky.

Jak to všechno souvisí s kódem HTML5?

Co tedy znamená tento zdokonalený významný aspekt HTML5? V podstatě HTML5 obsahuje některé nové prvky, s nimiž můžete zahrnout více sémantických informací do značky stránky. Existuje zatížení nových prvků, z nichž jen několik se na to podíváme. Značka záhlaví označuje informace o obsahu prvku a jeho roli v rámci struktury stránky:

Man in Window Outburst

Záhlaví může obsahovat další prvky a má tendenci zahrnovat alespoň jeden element záhlaví. Značka zápatí je podobná, značka opět vyjadřuje něco významného o obsahu prvku a jeho vztahu ke zbytku stránky:

Nav tag popisuje účel části stránky, tj. Obsahuje navigační odkazy:

Prvek oddílu obvykle obsahuje skupinu položek na stejném motivu, často spolu s hlavičkou. Prvek sekce má poměrně abstraktní význam, nicméně je smysluplné:

What happened
Police officers apprehended the man at 3.30pm...

Prvek článku je podobný, používaný k definování položky, která je samostatná:

The Law
The law on throwing items through windows is very clear...

Boční značka označuje úlohu prvku vzhledem k jeho kontextu v rámci stránky, jako v následující rozšířené verzi kódu článku výše:

The Law
The law on throwing items through windows is very clear...

Jedná se pouze o několik nových prvků HTML5, které nabízejí sémantické vylepšení, další obsahují vstupní prvky pro média a uživatele a další atributy. Zahrnutí mikroúdajů do HTML5 také poskytuje větší prostor pro zahrnutí sémantických informací do webových stránek a aplikací. Jak vidíte, některé z těchto nových prvků mají smysl, pokud jde o obsah i strukturu.

Přemýšlejte o některých starších značkách (z nichž mnohé jsou stále kolem), jako například div. Element div je jednoduše kus stránky - název značky nám nepovede absolutně nic o obsahu prvku nebo jeho role v rámci stránky. Jinými slovy značka vyjadřuje velmi málo významu. Spousta dlouhotrvajících značek vyjadřuje prakticky žádný význam vůbec nebo v některých případech obecný, volně definovaný význam. Každá položka na webové stránce byla obsažena v jedné ze sad kategorií velmi obecných prvků. Klíčem k tomu, aby bylo něco smysluplné, je konkrétní. Nové značky HTML5 nám umožňují definovat obsah webu pomocí konkrétnějších výrazů.

Přidali jste již značku do značky?

Pokud vytváříte webové stránky po přiměřenou dobu, některé nové elementy HTML5 mohou pro vás zvonit zvonky. Ve skutečnosti vývojáři již na svých stránkách stavěli úroveň významu pomocí atributů prvku, zejména třídy a ID. Například, pokud jste někdy dali prvek atribut třídy nebo ID "zápatí" nebo "záhlaví", rozhodně nejste sám. U HTML5 je tento význam přenášen spíše v samotném značení než v atributových hodnotách. Pokud jste použili tyto atributy pro implementaci konkrétních stylingových vlastností, efektivně jste něco ručně vyrobili z HTML5 zabudovaného do pole - a se sémantickými prvky jsou další výhody ...

Proč to všechno děláme?

Dobře, je to všechno velmi dobře, ale bylo by vám odpuštěno, že se ptáte, proč děláme všechny tyto problémy pro něco, co se zdá být v podstatě koncepční / akademické. No, můžete si být jisti, že existují dobré důvody pro pohyb v sémantičtějším směru. Jak jsme viděli, sémantika HTML5 nám umožňuje vytvářet značkovací kód, který popisuje položky obsahu. Tento popisný aspekt kódu umožňuje dalším programům efektivněji využívat obsah s různými aplikacemi:

• Vyhledávatelnost je nastavena tak, aby byla transformována pokrokem sémantiky webu. Sémantické značkování umožňuje vyhledávat obsah / data. webové stránky se samozřejmě nejen zobrazují ve webovém prohlížeči, ale jsou zpracovávány i jinými programy, jako jsou roboty vyhledávačů. Vzhledem k tomu, že sémantická značka je navržena tak, aby umožnila aplikacím interpretovat webové stránky smysluplněji, mělo by to v konečném důsledku zvýšit kvalitu vyhledávacích / dotazovacích funkcí o značnou částku. V Tim Berners-Leeově často citovaném "snu" pro web budou počítače schopny analyzovat všechna data online - což by mohlo být daleko, ale sémantická síla HTML5 je motivována tímto typem dlouhodobého cíle .
• Dostupnost je jednou z hlavních výhod sémantického značení. Nástroje pro usnadnění přístupu mohou těžit z mnohem smysluplnějšího přístupu k obsahu webu. Mezi takové nástroje patří doplňky prohlížečů pro uživatele s omezeným zrakem, sluchem, problémy s učením a tak dále. Sémantické značkování usnadňuje aplikaci pro zpracovávání webového obsahu a výsledek sdělovat původní zprávu uživateli způsobem, který vyhovuje jejich potřebám. Tento koncept přesahuje dostupnost a do oblasti flexibility zařízení, a to pomocí technik, jako je citlivý design. Výsledkem je komplexnější přístup k poskytování obsahu webu.
• Konzistence by měla být skutečným přínosem sémantického HTML5. Sémantická značka zlepšuje konzistenci, protože obsahové položky jsou logicky přiřaditelné k jednotlivým typům prvků. To je v kontrastu se staršími modely, ve kterých by položky mohly být často logicky obsaženy v jakémkoli z různých typů prvků - volba jednoho nebyla indikátorem povahy obsahu nebo jeho role v rámci stránky, byl jen odrazem volby developera. Při sémantickém označování je tato specifická úroveň významu méně volná, ale výsledky jsou přirozeně spolehlivější, pokud jde o interpretaci prohlížečem nebo jinými aplikacemi.

Vývojáři řídí vývoj webových technologií

Když jsem byl na univerzitě (před několika lety), vzpomínám si na přednášejícího, který nám říká, že oblast akademického výzkumu bude revolucionizována pokroky v hledání. Hovořil o sémantickém webu - zbytečně říci, že se ještě nestalo. Vezmeme-li jakýkoli druh zaměřeného nového směru s něčím tak rozmanitým a nepravidelným jako World Wide Web, bude to vždycky těžký úkol. Nicméně tím, že se na palubě s nápadem sémantického značení přinejmenším, my jako vývojáři mohou jednat, abychom ovlivnili pohyb směrem k budoucímu webu, který je pro všechny uživatele dostupnější, prohledávatelnější a konzistentnější.

Používáte sémantické prvky HTML5? Zaměřuje se sémantika na produkt s vyšší kvalitou? Dejte nám vědět, co si myslíte v komentářích.

Doporučený snímek / náhled, používá jazyk přes Shutterstock.