Nei miei ultimi post ho accennato spesso all’importanza della semantica nelle pagine web. Gli standard si stanno evolvendo e l’importanza di utilizzare elementi HTML secondo il contesto in cui servono è sempre più pressante.
È di pochi giorni fa la notizia della pubblicazione del sito www.html5rocks.com da parte di Google: una risorsa per sviluppatori web che vogliono approfondire la conoscenza di HTML5 e rimanere aggiornati sui suoi sviluppi.
Anche questa novità ci porta a pensare che nei prossimi tempi dovremo cercare di entrare sempre più nell’ottica di sviluppo secondo il concetto di Web semantico.
Oggi voglio introdurre alcuni elementi che hanno una determinata funzione nel contesto della pagina web, ma approfondendo questi tag voglio soffermarmi sulla loro peculiarità semantica.
Gli elementi figure e figcaption
Nella tradizione della stampa possiamo pensare alle immagini come elementi che contribuiscono a dare valore al testo che accompagnano, descritte, a loro volta, da una didascalia. HTML5 prevede due elementi che servono proprio ad offrire questa funzionalità.
Il tag <figure> è descritto dal W3C come l’elemento che serve a specificare importanti informazioni correlate con il testo della pagina, ma che se vengono spostate non vanno ad interferire con il flusso del contenuto.
Il tag <figcaption> è indicato per una compilare una didascalia o legenda relativa all’elemento <figure>.
[html]
<figure>
<img src="https://www.artera.net/wp-content/uploads/2010/06/html5-browsers.jpg" alt="html5 – browsers" />
<figcaption>Le icone dei <a href="https://www.artera.net/it/blog/programmazione/html5-e-la-compatibilita-tra-i-browser">browser più utilizzati</a></figcaption>
</figure>
[/html]
Il tag figure è indicato per specificare una parte di contenuto, non necessariamente una immagine. Esso può includere testo, o codice, ma in ogni caso, l’importante è che questo sia in linea con il resto del testo e che, nel caso venga rimosso, non vada ad intaccare il flusso di informazioni della pagina.
Sicuramente può venire in mente, a questo punto, il tag aside già introdotto tra i miei post passati. Anche l’elemento aside serve per specificare un contenuto correlato in riferimento al testo della pagina.
Dunque, cosa usare? <figure> o <aside>?
Anche in questo caso è importante capire il significato del contenuto che bisogna inserire (contesto semantico):
- nel caso di un contenuto correlato e non essenziale: <aside>
- nel caso di un contenuto essenziale, ma la cui posizione all’interno del flusso di informazioni non è importante: <figure>
Il tag <aside> più da vicino
Abbiamo parlato dell’elemento aside come di un contenitore di informazioni correlate. Inizialmente il W3C aveva definito il tag <aside> proprio come contenitore di informazioni correlate. Non era stato preso in considerazione il fatto che potesse essere utilizzato come sidebar del sito internet, quindi il suo elemento target non sarebbe più stato l’articolo (contenuto), ma l’intera pagina web.
Dopo alcune discussioni dovute anche ai “lamenti dei programmatori“, il W3C ha ridefinito il tag aside.
Ora <aside> può essere usato in entrambi i contesti:
- nel caso faccia parte di un tag <article> allora il suo contenuto deve essere strettamente legato ad esso (ad esempio un glossario, un contenuto secondario, ecc…)
- nel caso non faccia parte di un tag <article> allora il suo contenuto deve essere legato alla pagina cosituendo un box informativo che completa le informazioni della pagina (una lista di links, una breve descrizione, ecc…)
Concludendo…
Il metodo corretto per iniziare a comprendere meglio l’utilizzazione di questi elementi è di iniziare ad utilizzarli, anche marginalmente, nei nostri siti internet in modo da poter sviluppare e allo stesso tempo approfondire tutte queste novità prestando sempre attenzione alla componente semantica per non lavorare su contesti errati.
