Ett <nav> elementet representerar ett avsnitt i en webbsida som du kan använda för att skapa länkar till andra delar av webbsidan eller länkar inom samma dokument. Har man flera grupper av länkar på en webbsida så behöver inte samtliga vara i ett <nav> element utan enbart de som består av den huvudsakliga navigeringen. Nyckelfrasen här är: “huvudsakliga navigeringen”.
Men hur är det med länkar i en sidfot? Det är vanligt förekommande för en sidfot att ha en lista med länkar till olika delar av en webbsida, men i stället för att använda <nav> elementet så är det lämpligare med <footer> elementet för dessa länkar. Du kan naturligtvis också inkludera rubriker och andra strukturella element i <nav> dock är det inte obligatoriskt. Länkar inom <nav> elementet måste inte nödvändigtvis presenteras i form av en lista utan kan redogöras med annat innehåll, exempelvis länkar inom ett textstycke. Det finns flera sätt man kan använda detta element, exempelvis i form av en lista för navigation mellan sidor enligt följande kodexempel:
<h1>Huvudrubrik</h1>
<nav>
<ul>
<li><a href="index.html">Hem</a></li>
<li><a href="produkter.html">Produkter</a></li>
<li><a href="blogg.html">Blogg</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
Föregående kodexempel producerar följande vid utskrift i en webbläsare:
Det går givetvis att använda sig av elementet utan att behöva förlita sig på listor enligt specifikationen från W3C. Se följande kodexempel:
<h1>Huvudrubrik</h1> <nav> <a href="index.html">Hem</a> <a href="produkter.html">Produkter</a> <a href="blogg.html">Blogg</a> <a href="kontakt.html">Kontakt</a> </nav>
Föregående kodexempel producerar följande vid utskrift i en webbläsare:
Observera att listor (<ul>) utgör blockelement och innehållet skrivs således ut på en ny rad efter varandra medan länkar (<a>) utgör inlineelement som gör att de skrivs ut på samma rad efter varandra. Vidare kan du även använda dig av <nav> elementet i samband med att du inkluderar länkar i en paragraf enligt följande kodexempel:
<nav> <h1>Navigation</h1> <p>Detta är en hemsida och nedan kommer du att hitta <a href="#blogg">bloggen</a>. Bara till höger om den så kommer du att hitta våra <a href="#contact">kontaktuppgifter</a>. Under våra kontaktuppgifter hittar du <a href="#copyright">copyright informationen</a>.</p> </nav>
Föregående kodexempel producerar följande vid utskrift i en webbläsare:
Det är vanligt förekommande att navigation utgör en del av sidhuvudet och i dessa fall är det en god idé att inkludera <nav> elementet i en header, men det är inte nödvändigt. Tumregeln för användning av <nav> elementet är att den ska användas för huvudsaklig navigering och detta kan se olika ut mellan olika webbsidor. Hur kan du avgöra vad som är huvudsaklig navigering? Ett sätt är att använda sig av analytiska verktyg som registrerar hur besökare navigerar sig på din webbsida. Om du har två navigationsmenyer så kan båda bedömas vara huvudsakliga om den data som registreras visar att båda menyer används lika mycket av besökarna. Med det sagt, vilka andra användningsområden finns det för <nav> elementet? Nedan presenteras några exempel:
- Innehållsförteckning: Det är den primära navigeringen för ett särskilt innehåll.
- Föregående/nästa länkar eller knappar (så kallad paginering): De är en viktig del av den övergripande strukturen och hierarkin för exempelvis en blogg eller en webbsida.
- Sökformulär: En sökfunktion är oerhört viktig för navigering av en webbplats, särskilt för större webbplatser som uteslutande är beroende av deras sökmotor.
- Sökväg: Även om sökvägar inte alltid är nödvändiga så kan de utgöra ett viktigt hjälpmedel vid navigering av större webbplatser.
Slutligen vill vi uppmärksamma att det finns ett <menu> element som har introducerats i samband med HTML5 och som ofta missväxlas med <nav> elementet. Det finns webbutvecklare som använder <menu> istället för <nav> för navigationen på en webbsida och detta är fel. Medan <nav> elementet används för huvudsaklig navigation på en webbsida så används <menu> för en grupp av kontroller, vanligtvis i en webbapplikation. Generellt innebär det att dessa kontroller ska utföra en funktion inom sidan, exempelvis någon form av interaktion med hjälp av programmeringsspråket JavaScript. Nästa element som vi ska titta närmare på är <section>.
Montathar Faraon