Tag di navigazione

2.1 Collegamenti ancora

La navigazione all'interno di una pagina HTML aiuta gli utenti a passare rapidamente a diverse sezioni del documento. È particolarmente utile per le pagine lunghe con una grande quantità di contenuto. In HTML ci sono diversi modi per realizzare tale navigazione, incluso l'uso di collegamenti ancora, dell'attributo id, oltre alla navigazione con Javascript.

I collegamenti ancora sono il modo più comune di navigazione all'interno di una pagina. Permettono agli utenti di passare a parti specifiche del documento usando i tag ancora.

Esempio di utilizzo:

Creazione di ancore con l'attributo id:

    
      <h2 id="section1">Section 1</h2>
      <p>Content of section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Content of section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Content of section 3...</p>
    
  

Creazione di collegamenti ad ancore:

    
      <nav>
        <ul>
          <li><a href="#section1">Vai a Section 1</a></li>
          <li><a href="#section2">Vai a Section 2</a></li>
          <li><a href="#section3">Vai a Section 3</a></li>
        </ul>
      </nav>
    
  

Navigazione usando l'attributo name

L'attributo name può essere utilizzato anche per creare ancore, anche se il suo utilizzo è meno comune ed è considerato obsoleto.

Esempio

    
      <a name="top"></a>
      <p>Top of the page...</p>
      <a name="bottom"></a>
      <p>Bottom of the page...</p>
      <nav>
        <ul>
          <li><a href="#top">Vai a Top</a></li>
          <li><a href="#bottom">Vai a Bottom</a></li>
        </ul>
      </nav>
    
  

2.2 Scrolling con JavaScript

JavaScript offre possibilità più flessibili per la navigazione all'interno della pagina. Con i metodi scrollIntoView, scrollTo, e altri, puoi realizzare scrolling fluido verso diversi elementi della pagina.

Esempio di utilizzo:

Questo codice scorre la pagina in modo fluido verso l'elemento specificato quando viene premuto un pulsante.

    
      <button onclick="scrollToSection('section1')">Vai a Section 1</button>
      <button onclick="scrollToSection('section2')">Vai a Section 2</button>
      <button onclick="scrollToSection('section3')">Vai a Section 3</button>

      <h2 id="section1">Section 1</h2>
      <p>Content of section 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Content of section 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Content of section 3...</p>
    
  

    
     // Funzione per lo scrolling fluido verso una sezione specifica della pagina
      function scrollToSection(sectionId) {
        // Trova l'elemento per il suo ID
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 Tag <nav>

Il tag <nav> in HTML5 è destinato a definire una sezione della pagina contenente collegamenti di navigazione. Questo tag aiuta a indicare semanticamente i blocchi di navigazione, migliorando la struttura della pagina web e rendendola più accessibile sia per gli utenti che per i motori di ricerca.

Il tag <nav> è usato per raggruppare collegamenti che sono destinati alla navigazione del sito o all'interno del documento corrente. Questi possono includere menu principali, menu secondari, breadcrumbs, elenchi di pagine e altri elementi di navigazione.

Sintassi

    
      <nav>
        <!-- Elementi di navigazione -->
      </nav>
    
  

Esempio di utilizzo

    
      <header>
        <h1>Il mio sito</h1>
        <nav>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">Chi siamo</a></li>
            <li><a href="#services">Servizi</a></li>
            <li><a href="#contact">Contatti</a></li>
          </ul>
        </nav>
      </header>
    
  

Spiegazione

• Tag <header>: usato per creare l'intestazione della pagina, che include il menu di navigazione.
• Tag <nav>: contiene un elenco di collegamenti che portano a diverse sezioni della pagina.
• Tag <ul> e <li>: usati per creare un elenco di collegamenti di navigazione.
• Tag <a>: definisce i collegamenti stessi, su cui gli utenti possono cliccare per passare ad altre parti della pagina o del sito.

2.4 Applicazione del tag <nav>

Il tag <nav> è usato per raggruppare collegamenti di navigazione, come:

• Menu principale del sito
• Menu secondari
• Breadcrumbs
• Collegamenti alle pagine di paginazione
• Altri collegamenti di navigazione

Menu principale del sito

    
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">Chi siamo</a></li>
          <li><a href="#services">Servizi</a></li>
          <li><a href="#contact">Contatti</a></li>
        </ul>
      </nav>
    
  

Menu secondario

    
      <nav>
        <ul>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#support">Supporto</a></li>
          <li><a href="#privacy">Privacy</a></li>
        </ul>
      </nav>
    
  

Breadcrumbs

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Home</a></li>
          <li><a href="/category">Categoria</a></li>
          <li>Pagina corrente</li>
        </ol>
      </nav>
    
  

Vantaggi dell'utilizzo del tag <nav>

Markup semantico

L'uso del tag <nav> aiuta i motori di ricerca e le tecnologie per persone con disabilità a capire meglio la struttura della pagina. Questo rende il sito più accessibile e ne migliora l'SEO.

Miglioramento della struttura della pagina

Il tag <nav> separa chiaramente gli elementi di navigazione dal contenuto principale, rendendo il markup della pagina più logico e strutturato.

Facilità di stilizzazione

Gli elementi di navigazione racchiusi nel tag <nav> sono facili da stilizzare con CSS per migliorare l'aspetto e l'usabilità.