due chiacchiere

Intestazioni multiple in html5

Prima dell’avvento di HTML5, i tag per le intestazioni (da <h1> ad <h6>) erano relativamente facili da capire. Nel corso degli ultimi anni, in particolare, il loro uso è stato “standardizzato” dai promotori dell’accessibilità, dai guru della SEO e dai sostenitori della semantica del web. Così pian piano ci siamo abituati a vedere un singolo elemento H1 in ogni pagina, con gli altri disposti in sequenza, possibilmente senza salti o mancanze. Anche questo blog, si è adeguato, nel tempo, adottando quest’approccio. Che a quanto pare è sempre gradito a Google, che indicizza quest’informazione sfruttandone la semantica implicitamente associata. Con l’introduzione del nuovo linguaggio, ho scoperto, tutto questo non è più valido, e sebbene all’inizio la cosa mi abbia un po’ sconvolto, leggendo vari articoli sull’argomento mi sono alla fine chiesto come abbiamo fatto a farne a meno finora. Ancora una volta, per poter vedere i benefici, bisogna iniziare a pensare in termini di semantica dei contenuti, non più di aspetto grafico o struttura logica e sequenziale.

Ecco un riassunto delle novità che vedremo presto sui migliori schermi:

  • invece di un singolo elemento h1 per pagina, la tendenza di HTML5 è di incoraggiare fino ad un’intestazione principale per ogni <section>
  • sebbene sia consentito iniziare una sezione con <h2> o altre intestazioni di livello più basso, l’uso di h1 è suggerito per semplificare la portabilità delle <section> all’interno di vari contesti, ad esempio la pagina del singolo articolo e quella dell’archivio con gli ultimi 5 articoli
  • un nuovo tag <hgroup> consentirà di raggruppare intestazioni che “lavorano insieme”, ad esempio un titolo ed un sottotitolo, per rafforzarne il legame semantico; questo tag non va usato sempre e comunque, ma solo quando ha senso raggruppare intestazioni correlate tra loro
  • per aiutarti a verificare la corretta strutturazione del codice sorgente, esiste uno strumento chiamato HTML5 Outliner
  • la struttura attualmente usata in XHTML con un’unica intestazione principale, è un caso “limite”, ma comunque sintatticamente valido in HTML5

L’ultimo punto, comunque, non deve essere un salvagente per i più pigri: il semplice fatto che il codice non si “romperà” non significa che si stia sfruttando al meglio la potenza espressiva del nuovo linguaggio. In altre parole, non basterà cambiare la riga in cima alle pagine, scrivendo html5 al posto di xhtml, per essere con la coscienza a posto. Servirà un ripensamento semantico del contenuto e la marcatura conseguente dei vari pezzi.

Commenti

  1. CyberAngel ha detto:

    Questo è proprio un argomento scacciafighe!
    Interessante però.

    1. camu ha detto:

      @CyberAngel: vero ahahah

  2. Francesco ha detto:

    Ciao, dove va a finire però l’XHTML 1.0 Strict cui si sono adeguati tanti accademici della Crusca dell’Accessibilità?
    Alcuni esperti consigliano di stare alla finestra e guardare…

    1. camu ha detto:

      @Francesco: bentornato innanzitutto, sentivamo la tua mancanza da queste parti 🙂 In merito alla tua domanda, è la stessa che si saranno posti tutti quelli che avevano dei bellissimi siti fatti in HTML 4, quando arrivò XHTML. Non si può rimanere ancorati al passato, ma nessuno è COSTRETTO a passare al nuovo formato. Però adeguarsi alle tecnologie che evolvono è segno che il tenutario sta al passo con i tempi 🙂 I browser continueranno a digerire anche i linguaggi precedenti ancora per un bel po’, quindi non c’è da preoccuparsi…

  3. Francesco ha detto:

    Ciao Camu,

    prima di tutto la giustificazione: ho le dita in un template accessibile per PhpBB, dei cui sviluppi ti terrò informato.

    Sarebbe interessante conoscere lo stato dell’arte delle tecnologie utilizzate (spero che i 386 con 10 Mega di Hard Disk non circolino più di tanto) e valutare quanto si possa investire su Html 5.

    Aspettiamo…

    1. camu ha detto:

      @Francesco: beh stando ad autorevoli statistiche sulla diffusione dei browser nel mondo, più del 50% dei browser in uso implementa HTML5 (IE8, Firefox 3.6, Safari). Ma ognuno dovrebbe tenere un occhio sulle proprie statistiche specifiche per capire se i tempi sono maturi per passare ad HTML5. Al momento più dell’85% dei miei visitatori usa un browser che capisce HTML5, quindi per me i tempi sono maturi 🙂 Detto questo, passerà ancora un po’ prima che io riesca a trovare il tempo per riscrivere tutto con il nuovo linguaggio eheh

  4. Francesco ha detto:

    Camu, esattamente i dati che attendevo in una valutazione ragionevole, e ti soccorrono i tempi tecnici della riscrittura.
    Anch’io chiedo qualche piccolo sacrificio ai non vedenti: i miei template hanno una o (Joomla) due immagini decorative (grandi e descritte) che non aggiungono contenuto al testo.
    Infatti non posso mettere un’immagine in background nel (finto) frame del menu perchè poi non scorre, e se volessi utilizzare il Foglio di stile per l’header dovrei creare un tag vuoto… quelle formule che tanto deprechi.
    Per non parlare dei che creano la veste grafica del sito e agevolano la navigazione.

Lascia un commento