{"id":164037,"date":"2024-10-31T09:00:00","date_gmt":"2024-10-31T08:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/tag-semantici-html5-header-nav-main-footer\/"},"modified":"2024-10-31T09:00:00","modified_gmt":"2024-10-31T08:00:00","slug":"tag-semantici-html5-header-nav-main-footer","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/tag-semantici-html5-header-nav-main-footer\/","title":{"rendered":"Tag Semantici HTML5: Header, Nav, Main, Section, Article e Footer"},"content":{"rendered":"

I tag semantici HTML5<\/strong> hanno trasformato il modo in cui strutturiamo le pagine web. Prima della loro introduzione, l’unico modo per definire le sezioni di una pagina era utilizzare <div><\/code> con classi CSS convenzionali. Oggi disponiamo di elementi dedicati che comunicano chiaramente il ruolo di ogni area della pagina. In questo articolo analizzeremo in profondit\u00e0 ogni tag semantico, con esempi pratici di utilizzo e un layout completo di pagina.<\/p>\n

Header e Footer: Intestazione e Pi\u00e8 di Pagina<\/h2>\n

Il tag <header><\/code> rappresenta il contenuto introduttivo<\/strong> di una pagina o di una sezione. Nella maggior parte dei siti web, l’header principale contiene il logo, il menu di navigazione, eventualmente una barra di ricerca e altri elementi di identit\u00e0 del brand. Ma il tag <header><\/code> non \u00e8 limitato all’intestazione della pagina: pu\u00f2 essere usato anche all’interno di un <article><\/code> o una <section><\/code> per introdurre quella specifica sezione.<\/p>\n

Allo stesso modo, il tag <footer><\/code> rappresenta il contenuto conclusivo<\/strong>. Il footer principale della pagina tipicamente contiene informazioni di copyright, link ai social media, contatti, link alla privacy policy e alla sitemap. Come l’header, il footer pu\u00f2 essere usato anche all’interno di article e section per informazioni conclusive di quella sezione, come l’autore di un articolo, la data di pubblicazione o i tag associati.<\/p>\n

Una pagina pu\u00f2 contenere pi\u00f9<\/strong> tag <header><\/code> e <footer><\/code> (uno per ogni sezione che lo necessita), ma generalmente un solo header e un solo footer sono al livello superiore del body. Non devono essere annidati: un <header><\/code> non pu\u00f2 contenere un altro <header><\/code>, e lo stesso vale per il <footer><\/code>.<\/p>\n

Nav: La Navigazione del Sito<\/h2>\n

Il tag <nav><\/code> identifica una sezione di navigazione<\/strong>, ovvero un insieme di link che permettono all’utente di spostarsi tra le pagine del sito o all’interno della pagina corrente. Non tutti i gruppi di link devono essere racchiusi in un <nav><\/code>: questo tag \u00e8 riservato ai blocchi di navigazione principali<\/strong>, come il menu principale, la navigazione nel footer o un indice dei contenuti.<\/p>\n

La struttura tipica di un <nav><\/code> utilizza una lista non ordinata per i link:<\/p>\n

<nav aria-label=\"Navigazione principale\">\n  <ul>\n    <li><a href=\"\/\">Home<\/a><\/li>\n    <li><a href=\"\/servizi\">Servizi<\/a><\/li>\n    <li><a href=\"\/chi-siamo\">Chi Siamo<\/a><\/li>\n    <li><a href=\"\/contatti\">Contatti<\/a><\/li>\n  <\/ul>\n<\/nav><\/code><\/pre>\n
Quando una pagina contiene pi\u00f9 elementi <nav><\/code> (ad esempio, navigazione principale e navigazione nel footer), \u00e8 buona pratica differenziarli con l’attributo aria-label<\/code> per aiutare gli utenti di screen reader a distinguerli. Ad esempio: aria-label=\"Navigazione principale\"<\/code> e aria-label=\"Navigazione footer\"<\/code>.<\/p>\n
Main: Il Contenuto Principale<\/h2>\n
Il tag <main><\/code> identifica il contenuto principale<\/strong> della pagina, quello unico e specifico di quella pagina. Esclude elementi ripetuti su pi\u00f9 pagine come header, footer, navigazione e sidebar. Ogni pagina dovrebbe avere un solo<\/strong> elemento <main><\/code>, e questo non deve essere annidato all’interno di <article><\/code>, <aside><\/code>, <footer><\/code>, <header><\/code> o <nav><\/code>.<\/p>\n
L’importanza del tag <main><\/code> per l’accessibilit\u00e0<\/strong> \u00e8 enorme. Gli screen reader offrono una scorciatoia per saltare direttamente al contenuto principale, bypassando header e navigazione. Senza il tag <main><\/code>, gli utenti con disabilit\u00e0 visive devono navigare attraverso ogni elemento della pagina per raggiungere il contenuto che cercano, un’esperienza frustrante che pu\u00f2 richiedere molti secondi o minuti.<\/p>\n
Per il SEO, il tag <main><\/code> aiuta i motori di ricerca a identificare rapidamente quale porzione della pagina contiene il contenuto editoriale rilevante, distinguendolo dagli elementi di interfaccia. Google ha confermato di utilizzare questa informazione per migliorare la comprensione del contenuto.<\/p>\n
Section e Article: Sezioni e Contenuti Indipendenti<\/h2>\n
I tag <section><\/code> e <article><\/code> sono probabilmente i pi\u00f9 confusi tra i tag semantici, ma la distinzione \u00e8 importante.<\/p>\n
Il tag <section><\/code> rappresenta una sezione tematica<\/strong> di contenuto, ovvero un raggruppamento logico di contenuti correlati. Ogni section dovrebbe idealmente avere un heading che ne definisce il tema. Ad esempio, una homepage potrebbe avere una section per i servizi, una per le testimonianze e una per i contatti. Il criterio chiave: una section ha senso solo nel contesto del documento che la contiene.<\/p>\n
Il tag <article><\/code> rappresenta un contenuto autosufficiente e indipendente<\/strong> che avrebbe senso anche se estratto dal contesto della pagina. Un post di blog, un commento, un articolo di giornale, una scheda prodotto o un widget autonomo sono tutti esempi appropriati di <article><\/code>. Il criterio chiave: un article potrebbe essere ripubblicato altrove (in un feed RSS, in un’altra pagina) mantenendo il suo significato completo.<\/p>\n
I due tag possono essere annidati<\/strong>: un article pu\u00f2 contenere pi\u00f9 section (ad esempio, le sezioni di un lungo articolo), e una section pu\u00f2 contenere pi\u00f9 article (ad esempio, una sezione “Articoli recenti” con pi\u00f9 post).<\/p>\n
Aside, Figure, Time e Address<\/h2>\n
Il tag <aside><\/code> identifica contenuto tangenzialmente correlato<\/strong> al contenuto principale. In una pagina di blog, l’aside pu\u00f2 contenere la sidebar con categorie, tag cloud e articoli correlati. All’interno di un article, pu\u00f2 contenere una nota, un’informazione aggiuntiva o un box di approfondimento. Il contenuto di un aside potrebbe essere rimosso senza che il contenuto principale perda significato.<\/p>\n
Il tag <figure><\/code> racchiude un contenuto autosufficiente<\/strong> come un’immagine, un diagramma, un grafico o un blocco di codice, opzionalmente accompagnato da una didascalia <figcaption><\/code>. La posizione di un figure nel flusso del documento non \u00e8 essenziale: potrebbe essere spostato in un’appendice senza alterare il flusso del testo principale.<\/p>\n
Il tag <time><\/code> rappresenta una data o un orario<\/strong> in formato leggibile dall’uomo, con l’attributo datetime<\/code> che fornisce il valore in formato machine-readable (ISO 8601). Ad esempio: <time datetime=\"2024-10-31\">31 ottobre 2024<\/time><\/code>. I motori di ricerca e i feed reader utilizzano questo dato per ordinare cronologicamente i contenuti.<\/p>\n
Il tag <address><\/code> indica le informazioni di contatto<\/strong> per l’autore o il proprietario del documento o dell’articolo pi\u00f9 vicino. Pu\u00f2 contenere email, indirizzi fisici, numeri di telefono e link ai profili social. Non \u00e8 destinato a contenere indirizzi generici citati nel testo (come l’indirizzo di un luogo descritto in un articolo).<\/p>\n
Esempio di Layout Completo con Tag Semantici<\/h2>\n
Ecco come si presenta una pagina web completa strutturata con tutti i tag semantici HTML5:<\/p>\n
<header>\n  <a href=\"\/\"><img src=\"logo.svg\" alt=\"Nome Azienda\"><\/a>\n  <nav aria-label=\"Navigazione principale\">\n    <ul>\n      <li><a href=\"\/\">Home<\/a><\/li>\n      <li><a href=\"\/blog\">Blog<\/a><\/li>\n      <li><a href=\"\/contatti\">Contatti<\/a><\/li>\n    <\/ul>\n  <\/nav>\n<\/header>\n\n<main>\n  <article>\n    <header>\n      <h1>Titolo dell'Articolo<\/h1>\n      <time datetime=\"2024-10-31\">31 Ottobre 2024<\/time>\n    <\/header>\n    <section>\n      <h2>Prima Sezione<\/h2>\n      <p>Contenuto della sezione...<\/p>\n    <\/section>\n    <footer>\n      <address>Scritto da <a href=\"mailto:autore@email.com\">Nome Autore<\/a><\/address>\n    <\/footer>\n  <\/article>\n  <aside>\n    <h2>Articoli Correlati<\/h2>\n    <ul>...<\/ul>\n  <\/aside>\n<\/main>\n\n<footer>\n  <p>&copy; 2024 Nome Azienda<\/p>\n  <nav aria-label=\"Navigazione footer\">...<\/nav>\n<\/footer><\/code><\/pre>\n
Questa struttura \u00e8 chiara, accessibile, SEO-friendly e facile da mantenere. Ogni sezione ha un significato esplicito che browser, motori di ricerca e tecnologie assistive possono interpretare correttamente. Per approfondire il concetto di semantica e i suoi benefici, consulta il nostro articolo sull’HTML semantico per SEO e accessibilit\u00e0<\/a>.<\/p>\n
Hai bisogno di aiuto con la struttura semantica<\/strong> del tuo sito web? G Tech Group<\/strong> offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a support@gtechgroup.it<\/strong> o via WhatsApp al 0465 84 62 45<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
I tag semantici HTML5 hanno trasformato il modo in cui strutturiamo le pagine web. Prima della loro introduzione, l’unico modo per definire le sezioni di…<\/p>\n","protected":false},"author":2,"featured_media":164217,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"1246","_seopress_titles_title":"Tag Semantici HTML5: Header, Nav, Main, Footer %%sep%% %%sitename%%","_seopress_titles_desc":"Guida completa ai tag semantici HTML5: header, nav, main, section, article, aside e footer. Scopri quando e come usare ogni tag.","_seopress_robots_index":"","footnotes":""},"categories":[1246],"tags":[1551,563,787],"class_list":["post-164037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-accessibilita-web","tag-seo","tag-sviluppo-web"],"_links":{"self":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/comments?post=164037"}],"version-history":[{"count":0,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/posts\/164037\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media\/164217"}],"wp:attachment":[{"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/media?parent=164037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/categories?post=164037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gtechgroup.it\/blog\/wp-json\/wp\/v2\/tags?post=164037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}