HTML5 ha introdotto una serie di nuovi tag utili per definire in maniera più precisa e strutturata la semantica delle nostre pagine web. Abbiamo già affrontato questo argomento in un'analisi generale delle principali novità anche in ottica SEO, oggi vogliamo invece concentrarci su un tag molto utile e spesso compreso o utilizzato male.

Il tag ASIDE

Stiamo parlando del tag

aside

ovvero il tag che la specifica ufficiale definisce come

[…] l'elemento che rappresenta una sezione della pagina che consiste di contenuto collegato in maniera tangente al contenuto che lo circonda e che ne potrebbe essere considerato separato. Queste sezioni di solito sono rappresentate come "barre laterali" sulla carta stampata.

Risulta (abbastanza) chiaro da queste definizione che il contenuto del tag aside ha due caratteristiche:

  • è collegato al contenuto principale (ma in maniera "tangente", cioè non necessariamente diretta)
  • potrebbe essere considerato anche separatamente dal contenuto principale

La citazione della carta stampata ci fa pensare a quei box di approfondimento o di informazioni aggiuntive che a volte vediamo sui giornali come contenuti separati dal resto dell'articolo, tipograficamente diversi da ciò che li circonda proprio per indicarne anche in maniera visiva la separazione.

Uso

In ambito web, l'uso del tag aside è a nostro modo di vedere utile in svariate situazioni.

  • Contenuti effettivamente "laterali". Immaginiamo un articolo sull'utilizzo delle novità semantiche di HTML5 all'interno del quale c'è un piccolo box che spiega che cos'è la semantica (in termini generali): per questo contenuto è perfetto usare aside dal momento che si tratta di un elemento collegato in maniera indiretta all'articolo principale della pagina e che avrebbe un senso anche slegato da quella specifica pagina
  • Lista di link ad articoli correlati al contenuto principale. Anche in questo caso, si tratta di contenuto "tangente" alla pagina in questione e che potrebbe "vivere" anche di vita propria
  • Sidebar. Parliamo qui della classica sidebar con blogroll, pubblicità, box di ricerca e quant'altro che quasi ogni blog e sito web utilizza. L'uso di aside per questo elemento della pagina è ancora un po' dibattuto ma la community di developer sembra aver accettato la possibilità di usare questo tag per la sidebar – sebbene, anche a nostro modo di vedere, il collegamento fra questa e il resto del contenuto (quantomeno dal punto di vista semantico) è spesso piuttosto debole. C'è da dire che in questo caso il legame è spesso con il sito in generale (pensiamo al blogroll) quindi ha comunque un senso utilizzare aside per questi contenuti

Esempio

Vediamo un esempio di una pagina web completa in cui utilizziamo aside sia nella sua definizione "ristretta" (cioè per indicare contenuto correlato all'articolo corrente) sia in modalità più "rilassata" cioè per quegli elementi quali il blogroll o la pubblicità che sono legati al sito in generale e non direttamente alla pagina corrente

<body><br />        <header><br />            Intestazione del nostro sito<br />        </header><br />        <article><br />            <h1><br />                La semantica e HTML5<br />            </h1><br />            <p><br />                primo paragrafo con un sacco di contenuti estremamente interessanti<br />            </p><br />            <p><br />                secondo paragrafo dell'articolo con contenuti ancora più interessanti<br />            </p><br />            <aside><br />                <!-- utilizzo "canonico" di aside per indicare contenuto correlato e laterale rispetto al contenuto principale della pagina --><br />                <h1>Che cos'è la semantica</h1><br />                <p><br />                    definizione generale del concetto di semantica<br />                </p><br />            </aside><br />        </article><br />        <aside><br />            <!-- utilizzo di aside per indicare contenuto "laterale" rispetto al sito in generale, ad esempio il blogroll o la pubblicità --><br />            <h2>Blogroll</h2><br />            <ul><br />                <li>a href="#">link uno</li><br />                <li>a href="#">link due</li><br />                <li>a href="#">link tre</li><br />            </ul><br />        </aside><br />    </body>

Conclusioni

Abbiamo visto la definizione e l'utilizzo di questo tag, a nostro modo di vedere molto utile in chiave semantica (e dunque anche per una corretta indicizzazione e posizionamento sui motori di ricerca) per indicare contenuto non prioritario sulle nostre pagine. Il nostro invito, dunque, è di iniziare ad utilizzarlo per rendere, anche con questi piccoli sforzi, il web un posto migliore.