HTML Info

Webről, magyarul, mindenkinek

Szemantikus navigáció a nav elemmel

2 megjegyzés

A HTML 5 egyik új eleme a <nav> elem, amely a linkek csoportosítását teszi lehetővé, szemantikusabb jelölést, és a képernyőolvasókat segítő oldalstruktúrát eredményezve.

Első ránézésre a <nav> használata elég egyszerűnek tűnik. És bár tényleg könnyű használni, a specifikáció nem nyújt hozzá túl sok segítséget; szép számú döntést hagy a fejlesztőre.

Hogyan használjuk?

A legkézenfekvőbb megoldás valami ilyesmi:

<div id="nav">
 <ul>
 <li><a.... etc

vagy:

<ul id="mainNav">

A jelölésben nem sok minden változik, ha egy kicsit kiegészítjük:

<nav>
 <ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="/about/">About</a></li>
 <li><a href="/blog/">Blog</a></li>
</ul>
</nav>

A specifikáció

A HTML 5 specifikáció a <nav> elemet a következőképp definiálja:

A nav elem az oldal egy részét jelöli, amely más lapokra, vagy az oldal más részeire hivatkozik: ez az elsődleges navigációs linkek helye. Nem kell egy oldal összes linkjének nav elemben lennie, csak azoknak, amelyek a fő navigációhoz használatosak. Például, gyakran szoktak a webhely más, fontos részeire mutató linkeket láblécben elhelyezni; ilyen esetekben a footer elem megfelelőbb, nem szükséges nav elemet használni ezen linkek elhelyezésére.

A kulcskifejezés a fő navigáció (elsődleges navigáció).

Vessünk egy pillantást a specifikációban megadott példára: a következő példában az oldal több részén vannak linkek elhelyezve, de közülük csak az egyik navigációs rész.

<body>
<header>
<h1>Ébresztő!</h1>
<p><a href="news.html">Hírek</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Fórumok</a></p>
<p>Utolsó módosítás: <time>2009-04-01</time></p>

<nav>
<h1>Navigáció</h1>
<ul>
<li><a href="articles.html">Összes cikk</a></li>
<li><a href="today.html">A mai ébredéshez szükséges dolgok</a></li>
<li><a href="successes.html">Akiket sikerült felébreszteni</a></li>
</ul>
</nav>

</header>

<article>
 <p>...ide kerül a tartalom...</p>
</article>

<footer>
<p>Copyright © 2006 Minta Bt</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Adatvédelem</a> -
<a href="contact.html">Kapcsolat</a></p>
</footer>
</body>

Vegyük észre, hogy a header elemben hat navigációs elem van, közülük pedig csak három lett nav elembe pakolva. Szerepükben nincs értelmezhető különbség; mindegyik más oldalra mutat, és mindegyik webhelyen belüli link.

Nézzünk egy másik példát:

<body>
<h1>Példafölde tudásközpontja</h1>

<nav>
 <ul>
  <li><a href="/">Kezdőlap</a></li>
  <li><a href="/events">Aktuális események</a></li>
   ...és a többi...
 </ul>
</nav>

<article>
<header>
<h1>Bemutatók Példaföldén</h1>

<nav>
 <ul>
  <li><a href="#public">Nyilvános bemutatók</a></li>
  <li><a href="#destroy">Rombolások</a></li>
   ...és a többi...
 </ul>
</nav>

</header>

<section id="public">
 <h1>Nyilvános bemutatók</h1>
  <p>...még más...</p>
</section>
<section id="destroy">
 <h1>Rombolások</h1>
  <p>...még más...</p>
</section>
 ...egyéb...

<footer>
 <p><a href="?edit">Szerkeszt</a> | <a href="?delete">Töröl</a> | <a href="?Rename">Átnevez</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 Példafölde ura</small></p>
</footer>
</body>

Ez a példa egy kicsit jobban érthetővé teszi, mely linkeket érdemes <nav> elemen belül elhelyezni.

Hol használjuk?

A lehetőségek számosak. Használhatjuk az oldal tetején (a header elemben), az alján (footer elembe ágyazva), oldalt (akár lebegő sidebarként) – a lényeg, hogy a látogató egyértelműen tudja azonosítani (de ez már az ergonómia témaköre).

Egyéb lehetőségek

Következzen néhány példa arra, hol használhatjuk ki a nav elemet. Fontos megjegyezni, hogy az XHTML 2 <nl> eleme nem azonos a HTML 5 nav elemével, mivel a navigáció nem feltétlenül felsorolás.

  • Tartalomjegyzék
    Feltétlenül alkalmas rá, hogy nav elemet használjunk – hiszen ez az egyes tartalmakhoz elvezető elsődleges navigációs eszköz
  • Előző/következő gombok (vagy lapozás)
    Ezzel sincs semmi gond, mivel ez is fontos a webhely szerkezete szempontjából
  • Keresés űrlap
    Akár ez is ide tartozhat, hiszen a keresés fontos része a webhelyen történő navigációnak; különösen extrém nagyméretű webhelyek esetén, amelyek szinte teljesen a keresésre építik a tartalomelérést.

A nav és a menu közti különbség

Többek számára kavarodást okozhat a HTML 5 specifikáció egy másik eleme; a menu. Vannak néhányan, akik előszeretettel használják a <menu> elemet navigációs célokra, ezért érdemes tisztázni, hogy a <menu> egy interaktív elem, amelynek az a dolga, hogy vezérlőelemeket (gombok, rádiógombok, stb.) tartalmazzon.


A webhely html5 kísérleti oldalán megtekinthető egy példa a nav elem használatára.

Írta: htmlinfo

2010. 04 05 at 8:59 am

2 megjegyzés :: 'Szemantikus navigáció a nav elemmel'

Feliratkozás a megjegyzésekre: RSS vagy Trackback küldése: 'Szemantikus navigáció a nav elemmel'.

  1. […] This post was mentioned on Twitter by Monostory Miklós. Monostory Miklós said: Szemantikus navigáció a nav elemmel http://bit.ly/nav-elem […]

  2. Kezd jó lenni az oldal

    LG

    2010. 06 10 at 17:36

Megjegyzés hozzáfűzése