Tag HTML <nav>
Il tag HTML <nav> definisce una sezione di link di navigazione. Scopri come utilizzare il tag <nav> con esempi pratici.
Il tag <nav> è uno degli elementi HTML5. Definisce una sezione di link di navigazione, sia all'interno del documento corrente che verso altri documenti. I blocchi di navigazione tipici sono il menu principale di un sito, un sommario, una breadcrumb trail o un indice. Contrassegnarli con <nav> migliora sia la struttura del documento che la sua semantica, aiutando browser, screen reader e motori di ricerca a comprendere la pagina.
Un documento HTML può contenere più elementi <nav> — ad esempio, uno per la navigazione a livello di sito e uno per la navigazione interna alla pagina.
Quando usare <nav> (e quando no)
<nav> è destinato ai blocchi principali di link di navigazione, non a qualsiasi gruppo di link nella pagina. Riservalo alle aree di navigazione primarie e riconoscibili che un utente cercherebbe.
Non è necessario racchiudere ogni elenco di link in un <nav>:
- Link di utilità nel footer (informativa sulla privacy, termini, copyright) sono spesso una scelta discrezionale. Un breve insieme di link legali/utilitari può semplicemente stare nell'elemento
<footer>senza un<nav>aggiuntivo. Riserva<nav>nel footer per un vero menu secondario. - La paginazione (precedente/successivo, numeri di pagina) è anch'essa discrezionale — si tratta di navigazione, quindi un
<nav>è accettabile, ma un semplice link "articolo successivo" non ne ha bisogno. - I link all'interno del contenuto all'interno di un paragrafo o del corpo di un articolo non appartengono a un
<nav>.
Una buona regola pratica: se rimuovere il blocco renderebbe più difficile spostarsi nel sito o nel documento, probabilmente è un <nav>. L'elemento <nav> si trova comunemente accanto agli elementi <header>, <main> e <aside> che strutturano una pagina HTML5.
Il tag <nav> non può essere nidificato nell'elemento <address>.
Accessibilità: il landmark di navigazione
Un elemento <nav> espone automaticamente un landmark navigation alle tecnologie assistive, consentendo agli utenti di screen reader di raggiungerlo direttamente. Per questo motivo non dovresti aggiungere role="navigation" manualmente — l'elemento lo implica già.
Quando una pagina contiene più di un <nav>, assegna a ciascuno un nome accessibile univoco affinché gli utenti possano distinguerli. Usa aria-label (per un'etichetta letterale breve) o aria-labelledby (per puntare a un'intestazione visibile):
<!-- Primary site navigation -->
<nav aria-label="Primary">
<a href="/">Home</a>
<a href="/products">Products</a>
<a href="/contact">Contact</a>
</nav>
<!-- Breadcrumb navigation on the same page -->
<nav aria-label="Breadcrumb">
<a href="/">Home</a>
<a href="/products">Products</a>
<span aria-current="page">Laptops</span>
</nav>Non includere la parola "navigazione" nell'etichetta (ad esempio aria-label="Main navigation") — le tecnologie assistive la annunciano già come landmark di navigazione, quindi verrebbe letta due volte. Usa aria-current="page" per contrassegnare il link della pagina corrente.
Sintassi
Il tag <nav> viene usato in coppia. Il contenuto è scritto tra i tag di apertura (<nav>) e di chiusura (</nav>).
Esempio di utilizzo del tag HTML <nav>:
Esempio del tag HTML nav
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> |
<a href="/learn-css.html">CSS</a> |
<a href="/learn-javascript.html">JavaScript</a> |
<a href="/learn-php.html">PHP</a>
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>Esempio del tag <nav>:
Esempio del tag HTML nav
<!DOCTYPE html>
<html>
<head>
<style>
nav {
display: flex;
flex-wrap: wrap;
}
nav a {
text-decoration: none;
display: block;
padding: 15px 25px;
text-align: center;
background-color: rgb(189, 185, 185);
color: #464141;
margin: 0;
font-family: sans-serif;
}
nav a:hover {
background-color: #777777;
color: #ffffff;
}
</style>
</head>
<body>
<h1>Example of the HTML nav tag:</h1>
<nav aria-label="Primary">
<a href="/">Home</a>
<a href="/quiz">Quizzes</a>
<a href="/snippets">Snippets</a>
<a href="/tools">Tools</a>
<a href="/string-functions">String Functions</a>
</nav>
</body>
</html>Esempio di creazione di un menu a tendina con il tag HTML <nav>:
L'esempio seguente crea un menu a tendina con puro CSS, mostrando un <ul> nidificato al passaggio del mouse (:hover).
Questo menu a tendina realizzato solo con CSS serve a illustrare la struttura di <nav>, non come codice pronto per la produzione. Poiché i sottomenu si aprono solo al passaggio del mouse (:hover), non sono raggiungibili da tastiera né dalla maggior parte degli screen reader, il che non rispetta le WCAG. Un vero menu a tendina deve anche rispondere al focus da tastiera (:focus-within) ed esporre lo stato tramite attributi come aria-expanded e aria-haspopup — di solito con una piccola quantità di JavaScript.
Esempio del tag nav per la creazione di un menu a tendina
<!DOCTYPE html>
<html>
<head>
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
position: relative;
list-style-type: none;
}
nav ul li:hover {
background: rgba(19, 20, 123, 0.67);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px 30px;
color: #ffffff;
text-decoration: none;
background-color: rgba(35, 17, 134, 0.8);
font-family: sans-serif;
}
nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 10px;
color: #ffffff;
text-transform: uppercase;
}
nav ul ul li a:hover {
background: rgba(19, 20, 123, 0.67);
}
</style>
</head>
<body>
<h1>Dropdown menu with the HTML nav tag:</h1>
<nav aria-label="Primary">
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/quiz">Quizzes</a>
<ul>
<li>
<a href="/quiz/html-basic">HTML Basics</a>
</li>
<li>
<a href="/quiz/css-basic">CSS Basics</a>
</li>
<li>
<a href="/quiz/javascript-basic">JavaScript Basics</a>
</li>
<li>
<a href="/quiz/php-basic">PHP Basics</a>
</li>
<li>
<a href="/quiz/es6-basic">ES6 Basics</a>
</li>
</ul>
</li>
<li>
<a href="/snippets">Snippets</a>
<ul>
<li>
<a href="/snippets/angularjs">Angular JS</a>
</li>
<li>
<a href="/snippets/apache">Apache</a>
</li>
<li>
<a href="/snippets/git">Git</a>
</li>
<li>
<a href="/snippets/linux">Linux</a>
</li>
<li>
<a href="/snippets/nodejs">Node.Js</a>
</li>
<li>
<a href="/snippets/symfony">Symfony</a>
</li>
</ul>
</li>
<li>
<a href="/tools">Tools</a>
<ul>
<li>
<a href="/tools/html-encoder">HTML ENCODER/DECODER</a>
</li>
<li>
<a href="/tools/css-maker">CSS MAKER</a>
</li>
<li>
<a href="/tools/password-generator">PASSWORD GENERATOR</a>
</li>
<li>
<a href="/tools/image-base64">Base 64</a>
</li>
<li>
<a href="/tools/code-diff">CODE DIFF</a>
</li>
</ul>
</li>
<li>
<a href="/string-functions">String Functions</a>
<ul>
<li>
<a href="/tools/string-reverse">STRING REVERSE</a>
</li>
<li>
<a href="/tools/string-word-count">STRING WORD COUNT</a>
</li>
<li>
<a href="/tools/string-remove-empty-lines">EMPTY LINES REMOVER</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>Attributi
Il tag <nav> supporta gli Attributi Globali e gli Attributi degli Eventi.. Si noti che gli attributi globali si applicano a tutti gli elementi HTML.
Come applicare stili a un tag HTML <nav>
<nav> è un contenitore semantico senza un aspetto visivo predefinito, quindi lo stile viene applicato con CSS. Un pattern comune è assegnare alla barra uno sfondo e disporre i link orizzontalmente, rimuovendo la sottolineatura predefinita dei link e spaziandoli:
nav {
background-color: #333;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 15px;
}Per disporre i link in una riga, Flexbox (display: flex sul <nav>) è l'approccio moderno, come mostrato nel secondo esempio sopra.