PC-politika.cz - Novinky: HTML5: Jednodušší navigace; tag nav [6] PC-politika

HTML5: Jednodušší navigace; tag nav [6]

HTML5, jako daší rozšiřující specifikace programovacího jazyka HTML, dává programátorovi skvělou šanci - roztřídit dokument webové stránky na logické části/sekce. Prostě, obsah může být pro psaní kódu přehlednější a tím pádem i akceschopnější při načítání stránek. Značným přínosem jsou nové tagy, které strukturu dokumentu definují. Pro navigaci je např. určen tag <nav></nav> . Zde je ukázka jak jej můžeme využít.

Velmi důležitým oddílem ve struktuře HTML5, je navigace, která tak jako ostatní části, je naprosto nezávislá/samostatná. Tudíž pomocí nového tagu <nav></nav> můžeme vytvořit samostatnou část/oddíl, který využijeme nejčastěji pro menu apod. Dosavadní struktura HTML to neumožňuje, jelikož její veškeré staré tagy jsou na stejné hierarchické úrovni. Ovšem tag <nav></nav> je naprosto samostatný.

Dost toho opakování a zdůrazňování. Jdeme na konkrétní příklad. Nejprve se podívejte na kód, který doporučuje Konzorcium W3C. My jej o něco vylepšíme, tekaže takto může vypadat jednoduchá navigace pro menu v HTML5:

<nav><a href="default.asp">Home</a>
<nav><a href="tag_meter.asp">Previous</a>
<nav><a href="tag_noscript.asp">Next</a>
</ nav>

<nav> <p> < a href = "/nejaka_cesta_HomePage" rel = "index webu" > HomePage </ a> > < href = "/cesta_1.menu /" rel = "index 1.menu" > 1.menu </ a> > < href = "/ cesta_2.menu/" rel = "up" > 2.menu <a> 2. menu </ a> </ p> </ nav>

Další atributy v navigaci - Microdata

Při použití tagu <nav></nav>, můžeme pro navigaci použít v HTML5 další atributy, a to Microdata, což jsou navržené funkce HTML5 , která nám usnadňují vložení sémantické značky do HTML dokumentů. Jsou to třeba atributy: itemtype, který odkazuje na slovník, který si může zadávat každý uživatel sám, nebo prostě nasadit ty ze slovníku. Hodnota musí mít absolutní URL adresu/cestu, kde je uložen konkrétní slovník na internetové síti. Tak třeba odkaz na URL pro jednoduchý seznam, tzv „drobečky“ (breadcrumb) je zde: URL pro seznam/drobečky. Pro začátečníky jen dovětek, že „strouhankou“ je myšlena jakási stezka k souborům. Tedy odkazům, jež mohou pomoci uživateli pochopit a orientovat se v hierarchii na webových stránkách.

V novém tagu/elementu <nav></nav> použijeme zcela určitě atribut rel, ketrý se stará o popis vztahů mezi tagy/elementy. V této vazbě využijeme možnosti HTML5 a použijeme v atributu rel hodnotu up. Ta nám zařazuje obsah na tomto drobečku do námi určené hierarchické struktury/seznamu. Využijeme rovněž Microdata, která pracují např. s atributem itemprop , který se využívá pro skupinu položek. Nebo dále atribut itemscope, který umožňuje jednotlivé položky v navigaci zanořovat do sebe. Všechny další hodnoty atributů najdeme ve specifikovaném slovníku Specifikace Microdata.

Navigace v HTML5 pomocí CSS stylů

Pro navigaci v HTML5 za asistence tagu nav můžeme, myslím velmi elegantním způsobem, využít CSS stylu. Mj. je důležité zde použít display:block;, aby nám řádky v menu šly hezky pod sebe. Vše ostatní je patrné z následujicího kódu, včetně shora popsaných použitých atributů HTML 5 v návaznosti na Microdata.Celý kód si stáhněte zde: html_navigace_kod.zip.

//html_navigace_kod.html
<!DOCTYPE HTML>
<head>
<meta name="keywords" content="HTML,CSS,XML,JavaScript"
<meta name="author" content="Kvido" />
<meta charset='UTF-8'/>
<title>html5-navigace-kod</title>
<style type="text/css">
nav {display:block; width:150px; border:1px solid;}
#breadcrumbs span[itemtype], #breadcrumbs strong {display:-moz-inline-stack; display:block; text-align:center; margin:5px; zoom:1; *display:block;}
#breadcrumbs span[itemtype] {background:url( '../html5/aha1.png' ) no-repeat 0 right;}
</style>
</head>
<body>
<nav id = "breadcrumbs" >
<span itemscope itemtype = "http://data-vocabulary.org/Breadcrumb" > <a href = "http://www.pc-politika.cz/" itemprop = "url" rel = "index" > <span itemprop = "title" >PC-politika </span> </a> </span>
<span itemscope itemtype = "http://data-vocabulary.org/Breadcrumb" > <a href = "http://www.pc-politika.cz/categories/news/servery/33.html" itemprop = "url" > <span itemprop = "title" >Servery </span> </a> </span>
<span itemscope itemtype = "http://data-vocabulary.org/Breadcrumb" > <a href = "http://www.pc-politika.cz/categories/news/linux/56.html" itemprop = "url" > <span itemprop = "title" >Lunix </span> </a> </span>
</body>
</html>