Personalizza il sito:

pannello di controllo

Sei qui: Homepage » HTML » Intestazioni HTML: guida all’uso

mar 31 2010

18

Intestazioni HTML: guida all’uso

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.

Post correlati

Usi Twitter?

Twitter

Ti è piaciuto questo post?

Segnalalo su Twitter, aiutami a spargere la voce!

 

Classificato in HTML.

18 Commenti a “ Intestazioni HTML: guida all’uso ”

  1. 31 marzo 2010 alle 09:47

    Nicola Pressi

    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.

  2. 31 marzo 2010 alle 09:53

    Tom

    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.

  3. 31 marzo 2010 alle 10:07

    Nicola Pressi

    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!

  4. 31 marzo 2010 alle 11:07

    Tom

    @Nicola: sicuramente non ci sono problemi lato SEO, ma soprattutto pensando all’accessibilità della pagina non posso permettermi di saltare qualche livello :)

  5. 31 marzo 2010 alle 12:11

    Ted

    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.

  6. 31 marzo 2010 alle 13:42

    Lauryn

    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…

  7. 31 marzo 2010 alle 14:22

    Tom

    @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.

  8. 31 marzo 2010 alle 16:58

    Kiko

    Sì, quasi d’accordo. Il punto focale è la coerenza interna al progetto e al disegno.

  9. 31 marzo 2010 alle 17:15

    artingallery

    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.

  10. 4 aprile 2010 alle 03:44

    graziano

    Tanti auguri di buona Pasqua Tom. :)

  11. 16 aprile 2010 alle 00:13

    Daniel

    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/

  12. 19 aprile 2010 alle 19:27

    Michelle

    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…

  13. 26 aprile 2010 alle 17:50

    gap

    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.

  14. 26 aprile 2010 alle 18:10

    Tom

    @gap ti posso assicurare che non è solo estetica, quello è sicuramente uno dei requisiti per avere una pagina accessibile :)

  16. 28 febbraio 2011 alle 16:30

    Dr. U. Piccardo Dentista Genova

    Interessante guida, mi è stata di aiuto per capire alcune cose.

  17. 20 marzo 2011 alle 15:44

    Francesco

    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à.

  18. 11 giugno 2012 alle 14:22

    Andrea

    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.

Scrivi un commento

»
«

Menu secondario

feed

Iscriviti al Feed RSS

categorie

archivio

risorse esterne

extra