{"id":2883,"date":"2010-07-06T13:04:52","date_gmt":"2010-07-06T11:04:52","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=2883"},"modified":"2023-02-27T14:57:07","modified_gmt":"2023-02-27T14:57:07","slug":"html5-contenuti-correlati-e-semantica","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/html5-contenuti-correlati-e-semantica\/","title":{"rendered":"HTML5 – Contenuti correlati e semantica"},"content":{"rendered":"

\"html5<\/a>Nei miei ultimi post<\/a> ho accennato spesso all’importanza della semantica nelle pagine web<\/strong>. Gli standard si stanno evolvendo e l’importanza di utilizzare elementi HTML secondo il contesto in cui servono \u00e8 sempre pi\u00f9 pressante.<\/p>\n

\u00c8 di pochi giorni fa la notizia della pubblicazione del sito www.html5rocks.com da parte di Google<\/a>: una risorsa per sviluppatori web<\/strong> che vogliono approfondire la conoscenza di HTML5<\/strong> e rimanere aggiornati sui suoi sviluppi.<\/p>\n

Anche questa novit\u00e0 ci porta a pensare che nei prossimi tempi dovremo cercare di entrare sempre pi\u00f9 nell’ottica di sviluppo secondo il concetto di Web semantico<\/a>.<\/p>\n

Oggi voglio introdurre alcuni elementi che hanno una determinata funzione nel contesto della pagina web, ma approfondendo questi tag voglio soffermarmi sulla loro peculiarit\u00e0 semantica.<\/p>\n

Gli elementi figure e figcaption<\/h3>\n

Nella tradizione della stampa possiamo pensare alle immagini come elementi che contribuiscono a dare valore al testo che accompagnano<\/strong>, descritte, a loro volta, da una didascalia. HTML5 prevede due elementi che servono proprio ad offrire questa funzionalit\u00e0.<\/p>\n

Il tag <figure> \u00e8 descritto dal W3C<\/strong> come l’elemento che serve a specificare importanti informazioni correlate con il testo<\/strong> della pagina, ma che se vengono spostate non vanno ad interferire con il flusso del contenuto<\/strong>.<\/p>\n

Il tag <figcaption><\/strong> \u00e8 indicato per una compilare una didascalia o legenda<\/strong> relativa all’elemento <figure>.<\/p>\n

[html]
\n<figure>
\n\t<img src="https:\/\/www.artera.net\/wp-content\/uploads\/2010\/06\/html5-browsers.jpg" alt="html5 – browsers" \/>
\n\t<figcaption>Le icone dei <a href="https:\/\/www.artera.net\/it\/blog\/programmazione\/html5-e-la-compatibilita-tra-i-browser">browser pi\u00f9 utilizzati<\/a><\/figcaption>
\n<\/figure><\/p>\n

[\/html]<\/p>\n

\"Esempio<\/a><\/p>\n

Il tag figure \u00e8 indicato per specificare una parte di contenuto, non necessariamente una immagine<\/strong>. Esso pu\u00f2 includere testo, o codice, ma in ogni caso, l’importante \u00e8 che questo sia in linea con il resto del testo<\/strong> e che, nel caso venga rimosso, non vada ad intaccare il flusso di informazioni della pagina<\/strong>.<\/p>\n

Sicuramente pu\u00f2 venire in mente, a questo punto,\u00a0 il tag aside<\/strong> gi\u00e0 introdotto tra i miei post passati<\/a>. Anche l’elemento aside serve per specificare un contenuto correlato<\/strong> in riferimento al testo della pagina.<\/p>\n

Dunque, cosa usare? <figure> o <aside>?<\/p>\n

Anche in questo caso \u00e8 importante capire il significato del contenuto che bisogna inserire (contesto semantico):<\/p>\n