{"id":129,"date":"2024-08-12T12:05:55","date_gmt":"2024-08-12T12:05:55","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=129"},"modified":"2024-08-23T11:45:21","modified_gmt":"2024-08-23T11:45:21","slug":"tag-html-semantici-accessibilita","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/tag-html-semantici-accessibilita\/","title":{"rendered":"Come usare i tag HTML semantici per l'accessibilit\u00e0"},"content":{"rendered":"<p>Abbiamo visto i tag principali da conoscere per strutturare il contenuto nell&#8217;articolo: <a href=\"https:\/\/www.accessibilita.digital\/come-sviluppare-un-sito-web-accessibile\/\">Come sviluppare un sito web accessibile<\/a>, ora vale la pena accennare ai tag che si occupano di <b>dividere effettivamente tutte le sezioni principali della pagina<\/b>.<\/p>\n<h2 class=\"western\">I tag semantici<\/h2>\n<p>Se \u00e8 vero che i titoli vengono usati per <b>organizzare<\/b><b> il contenuto<\/b>, abbiamo dei tag \u201ccontenitori\u201d da usare per <b>creare la struttura<\/b> che definisce le varie sezioni di un documento web.<\/p>\n<p>Avete forse pensato al tag \u201cdiv\u201d? Ci siamo vicini, ma non \u00e8 del tutto esatto: il tag \u201cdiv\u201d \u00e8 molto generico e si applica a qualsiasi caso, ma <b>esistono degli elementi molto pi\u00f9 \u201csemantici\u201d<\/b>, cio\u00e8 con un significato che si adatta al contesto d\u2019utilizzo, che andrebbero utilizzati quando possibile.<\/p>\n<p>I principali sono:<\/p>\n<ul>\n<li><strong>header<\/strong>, indica la testata di una sezione, pu\u00f2 essere usato all\u2019interno di alcuni altri tag<\/li>\n<li><strong>footer<\/strong>, indica il fondo di una sezione, pu\u00f2 essere usato all\u2019interno di alcuni altri tag<\/li>\n<li><strong>main<\/strong>, generalmente \u00e8 solo uno per pagina proprio perch\u00e9 \u00e8 il contenitore \u201cprincipale\u201d, \u00e8 buona pratica aprirlo subito dopo l\u2019apertura del body e chiuderlo subito prima della chiusura del body.<\/li>\n<li><strong>section<\/strong>, indica la presenza di <b>una sezione di contenuto<\/b>, pensiamo ad esempio alle sezioni della pagina che riguardano i \u201cprodotti correlati\u201d o \u201cultime news\u201d, ognuna potrebbe essere inserita dentro un proprio tag \u201csection\u201d<\/li>\n<li><strong>article<\/strong>, generalmente usato per le <strong>singole entit\u00e0<\/strong> come un prodotto, un articolo di giornale, un post, un commento<\/li>\n<li><strong>nav<\/strong>, si usa per <b>indicare la presenza di elementi di navigazione<\/b>, come i men\u00f9, pu\u00f2 ad esempio essere inserito dentro un \u201caside\u201d e contenere elementi \u201cul\/li\u201d per creare una <b>navigazione laterale<\/b><\/li>\n<li><strong>aside<\/strong>, indica la porzione che sta a lato in una pagina, ad esempio per la barra laterale che contiene le ultime news o gli ultimi commenti<\/li>\n<\/ul>\n<p>Non fraintendiamoci, il classico <i>&lt;div class=\u201dcontainer\u201d&gt;<\/i> va benissimo per molti casi, tuttavia se dobbiamo <b>racchiudere ci<\/b><b>\u00f2 che riguarda un\u2019<\/b><b>entit\u00e0<\/b>, come nel caso di un listato di articoli di blog o un elenco di prodotti, meglio usare il tag <i>article&gt; <\/i>per i singoli elementi.<\/p>\n<p>Ad esempio, per la sezione che contiene i <b>prodotti correlati<\/b>, potremmo usare una struttura HTML di questo genere:<\/p>\n<pre class=\"language-css\"><code>body &gt; main &gt; section#prodotti-correlati &gt; div.container &gt; ul &gt; li &gt; article &gt; h2 &gt; a<\/code><\/pre>\n<p>Note: la classe \u201ccontainer\u201d viene generalmente usata in <b>framework CSS come Bootstrap<\/b>, del quale parleremo prossimamente per quanto riguarda l\u2019accessibilit\u00e0.<\/p>\n<p>In linea generale, questi tag che abbiamo visto <b>possono avere un uso piuttosto ampio e a volte ambiguo<\/b>: quando \u00e8 meglio usare \u201csection\u201d rispetto ad \u201carticle\u201d? Oppure, quando dobbiamo considerare un insieme di link come un elemento di navigazione e quindi usare il \u201cnav\u201d? In effetti sono concetti discutibili e <b>non c\u2019\u00e8 una regola specifica<\/b>.<\/p>\n<p>L\u2019approccio pi\u00f9 logico \u00e8 <b>usare il buon senso<\/b>, difficilmente avremo bisogno di un \u201c<b>aside<\/b>\u201d per il contenuto principale della pagina, o di usare due \u201c<b>header<\/b>\u201d uno di seguito all\u2019altro.<\/p>\n<p>\u00c8 anche vero che <b>i tag \u201cheader\u201d e \u201cfooter\u201d potrebbero essere usati pi\u00f9 volte<\/b>, ad esempio all\u2019interno di ogni tag \u201carticle\u201d, ma non dobbiamo per forza scervellarci e impazzire per ogni singolo caso. Cerchiamo quantomeno di <b>impostare correttamente i tag principali<\/b>, poi con l\u2019esperienza impareremo quale soluzione \u00e8 pi\u00f9 corretta rispetto alle altre.<\/p>\n<p>Esistono poi altri tag, meno diffusi ma comunque importanti, come &lt;search&gt; e &lt;hgroup&gt;, che \u00e8 utile almeno conoscere.<\/p>\n<p>Approfondimento: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\" rel=\"nofollow noopener\">MDN: HTML elements reference<\/a><\/p>\n<h2>Leggi anche<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.accessibilita.digital\/come-possiamo-rendere-accessibile-un-sito-web\/\">Come possiamo rendere accessibile un sito web<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/accessibilita-gli-obblighi-da-giugno-2025-per-i-privati\/\">Accessibilit\u00e0: Gli obblighi da Giugno 2025 per i privati<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/perche-un-sito-web-dovrebbe-essere-accessibile\/\">Perch\u00e9 un sito web dovrebbe essere accessibile?<\/a><\/li>\n<li><a href=\"https:\/\/www.accessibilita.digital\/che-cose-laccessibilita-web\/\">Che cos\u2019\u00e8 l\u2019accessibilit\u00e0 web?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Abbiamo visto i tag principali da conoscere per strutturare il contenuto nell&#8217;articolo: Come sviluppare un sito web accessibile, ora vale la pena accennare ai tag che si occupano di dividere effettivamente tutte le sezioni principali della pagina. I tag semantici Se \u00e8 vero che i titoli vengono usati per organizzare il contenuto, abbiamo dei tag [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":243,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/129"}],"collection":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/comments?post=129"}],"version-history":[{"count":4,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/129\/revisions"}],"predecessor-version":[{"id":223,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/129\/revisions\/223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/243"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}