Raccomandazioni e pratiche comuni per un buon utilizzo delle intestazioni HTML
Le intestazioni all’interno del codice HTML sono elementi ben noti. Sono state però al centro di alcune discussioni sulla semantica: in particolare l’uso del tag h1 ha generato spesso pareri contrastanti per il suo utilizzo nelle pagine diverse dalla homepage.
Seguendo alcune discussioni in rete, e guardando la struttura di alcuni siti come quello di Roger Johansson, ho raccolto alcune indicazioni per una guida il più possibile definitiva, almeno fino alla prossima rivoluzione del web semantico. In questo riassunto ho tenuto conto anche dei requisiti per avere delle pagine quanto più possibile accessibili.
Regole generali per le intestazioni HTML
- Una sola intestazione h1 per pagina
- Coerenza, senza saltare nessun livello, passando da h1 ad h2, h3, e così via.
La struttura delle pagine
Homepage
- h1 per il titolo del sito
- h2 per i titoli delle sezioni principali o per i titoli dei post (blog)
- h3, h4, h5… per titoli e sottotitoli secondari, in ordine di importanza
Pagine interne
- titolo del sito evidenziato con strong o em, ma non h1
- h1 per l’argomento principale della pagina, o il titolo del post (blog)
- h2, h3, h4… per sezioni e sottotitoli, in ordine di importanza
L’elemento più delicato è sicuramente il titolo del sito: noterete che nelle pagine interne non è evidenziato da un h1, che invece viene usato per l’argomento specifico della pagina.
Fino a qualche tempo fa ero convinto che fosse bene utilizzare ovunque un h1 sul titolo del sito, ma ho dovuto ricredermi. In effetti non ha senso identificare questo titolo come l’elemento più importante nelle pagine interne, a maggior ragione se parliamo di un blog. In contesti simili è il soggetto del post ad avere maggior rilevanza: l’importante è che il sito sia comunque identificabile, ma questo può essere fatto anche senza utilizzare un’intestazione.
Io seguirò questi criteri nei miei prossimi progetti e nei futuri redesign. Noterete che questo stesso sito segue regole differenti: sono convinto che potrà essere indicizzato ancora meglio dai motori di ricerca con qualche piccola modifica nelle pagine interne.
Voi quali criteri utilizzate per le intestazioni? Siete d’accordo con queste linee guida o fareste diversamente? Lasciate un commento con il vostro parere, potrebbero emergere idee interessanti.
Assolutamente d’accordo su ogni punto.
Trovo però difficile ricostrutire la stessa struttura degli del sito, senza saltare nessun livello, a seconda che sia nella home o in un’altra pagina del sito.
Hai ragione Nicola, infatti quando deciderò di mettere mano al template di tomstardust.com questo sarà uno dei primi problemi. Nel contenuto dei post ad esempio uso h3 e h4: se nelle pagine interne il titolo passasse ad h1, resterebbe un livello vuoto (h2). E’ un problema, a meno che non decida di mostrare il contenuto del post solo nella pagina interna e non in homepage.
Semanticamente è sicuramente corretto (ed impeccabile) utilizzare tutta la scala delle intestazioni (h1, h2, h3…) senza lasciare “buchi”. D’altro canto in ottica SEO non penso che saltare un h2 possa portare gravi deficit al posizionamento di un sito!
@Nicola: sicuramente non ci sono problemi lato SEO, ma soprattutto pensando all’accessibilità della pagina non posso permettermi di saltare qualche livello :)
Sul passaggio h1/p nel titolo del sito sono d’accordo. Ormai adotto integralmente questo sistema. Per quanto riguarda h1, h2, h3, da un po’ di tempo inizio a usarli con più rigore. Ammetto che prima ero alquanto pasticcione. Però dipende molto anche dall’interesse che si ha a rendere accessibile un sito – l’accessibilità richiede lavoro, se non è esplicitamente richiesta a volte mollo un po’ la presa, sinceramente.
concordo con te ma anche con Nicola: h1 o h2 non penso influiscano più di tanto. certo se al titolo della pagina diamo un h5 allora sì… il problema è proprio l’implementazione nelle pagine interne, ad esempio con wordpress, ma anche con qualsiasi altri siti, in cui per comodità si usa l’include per includere appunto la header con il suo bell’h1, risulta poi complicato da gestire nelle pagine interne.
opto per un uso h1 + h2 sulla home, ma nelle interne h1 + h1…
@Lauryn: in realtà su WordPress (ma anche su altre piattaforme) è possibile differenziare un contenuto a seconda della pagina (con tag condizionali come is_home): certo il lavoro è meno immediato e richiede un po’ più di attenzione, ma non è impossibile da fare.
Sì, quasi d’accordo. Il punto focale è la coerenza interna al progetto e al disegno.
L’unica difficoltà, o meglio l’aggiunta di tempo, è dovuta probabilmente alla modifica dei parametri “innati” di ogni specifico template.
Nulla di impossibile, ma da elaborare.
Tanti auguri di buona Pasqua Tom. :)
Stesse ricerche che ho fatto un pò di tempo fa…. stesse le conclusioni :)
Uno su tutti direi di citare per l’argomento : http://www.h1debate.com/
concordo con te ma anche con Nicola: h1 o h2 non penso influiscano più di tanto. certo se al titolo della pagina diamo un h5 allora sì… il problema è proprio l’implementazione nelle pagine interne, ad esempio con wordpress, ma anche con qualsiasi altri siti, in cui per comodità si usa l’include per includere appunto la header con il suo bell’h1, risulta poi complicato da gestire nelle pagine interne.
opto per un uso h1 + h2 sulla home, ma nelle interne h1 + h1…
concordo con con il fatto che il tag h1 deve essere usato una sola volta per pagina e “sprecarlo” per evidenziare agli spider solamente il titolo del sito web è un peccato.
Sono invece dubbioso sul fatto che non bisogna saltare nessun livello a tutti i costi; è solo una questione estetica.
@gap ti posso assicurare che non è solo estetica, quello è sicuramente uno dei requisiti per avere una pagina accessibile :)
La semantica!
Interessante guida, mi è stata di aiuto per capire alcune cose.
Ciao,
arrivo a questo post dalla pagina che segnala i migliori articoli del 2010.
Vengo dsllsa Formazione basata sulle tecnologie di Internet (E-learning) e vedo che la sintesi nel cyberspazio ha una piena ragione d’essere.
Unica voce fuori dal coro, sono ancora convinto che anche il layout di un blog debba essere tanto consistente da presentare il titolo marcato con : questo a vantaggio di chi vi arriva dai motori di ricerca e che dovebbe sempre trovare l’informazione principale ad accoglierlo.
Concordo pienamente – sulla stessa linea di pensiero – sull’unico per pagina. Mi sembra che Html 5 si discosti troppo dalle regole auree dell’Accessibilità.
Condivido pienamente l’impostazione che suggerisci e l’ho subito implementata nel sito che gestisco, dove finora tipicamente l’h1 era usato per il nome del sito in tutte le pagine.