headings, terza parte

Scuotendo l'alberoE ultima, che mi sono annoiato da solo. Comunque, riprendendo le fila del discorso, l’elemento problematico è <h1>. Che cosa rappresenta in un sito? Un po’ di ragionamenti qui e su Italian Webdesign e una piccola riflessione piuttosto ovvia mi induce a pensare che le cose siano state date un po’ per scontate, senza rifletterci, riportando in una pagina Web il tipico approccio che si utilizza in un word processor, ammesso che si usino gli stili di paragrafo. Il Titolo 1 è il titolo del documento, e via a scendere.

Di conseguenza, ecco che <h1> diventa il nome del sito, e via così. Vale questo comportamento per un sito? Nì. Sembra più una consuetudine, che il frutto di un’analisi.

Da qualsiasi punto di vista si osservi l’outline (semantica, accessibilità, SEO, usabilità, architettura), a me sembra che la scelta di usare <h1> in modo ripetitivo come nome del sito su tutte le pagine sia poco sensata. Sulla home page ok, <h1> è il nome del sito, stabilisce un contesto corretto.

Ma per tutte le pagine successive <h1> dovrebbe essere il titolo che descrive, introduce l’argomento principale (come da definizione, “a heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically”.

Mai più che il nome del sito descrive l’argomento della sezione che introduce. Quindi, per questo sito per ora ho deciso di fare così: nella home il nome del sito è <h1>, mentre per le singole pagine il tag viene attribuito al titolo del post. Mi sembra più pulito e chiaro.

Anche guardando la pagina con Document Map mi sembra tutto più chiaro e significativo, e ho scoperto (sic, era sotto il naso da anni) un illustre sito che fa la stessa cosa.

Ho aggiunto anche degli <h2> nascosti, che servono a introdurre le sezioni a cui si riferiscono, e fine della saga. Per ora…

Ma come faccio a farlo con WordPress?

Giusta domanda. Ci vogliono due header diversi, uno per la home e uno per le pagine singole. Di solito nei template WordPress il nome del sito è in header.php, poi c’è index.pxp che carica il loop e mostra gli ultimi post, clic sul titolo di un post e questo viene rappresentato in single.php.

Sì, ma come faccio ad avere header diversi in modo da attribuire elementi diversi al nome del sito?

Abbastanza semplice. Basta cercare nella cartella del tema il file che carica il contenuto della home, di solito index.php. Osservando il codice, all’inizio ci sarà certamente una riga simile a questa:

<?php get_header(); ?>

Il nostro obiettivo è fare in modo che single.php (il post) carichi invece di header.php un altro header, in cui il nome del sito non sia marcato <h1>. Nel mio caso ho chiamato questo file header_single.php. È del tutto uguale a header.php, tranne che per il nome del sito ho usato un semplice <p>.

Ok, ma come faccio a caricare questo file? In single.php, ho sostituito la riga precedente con questa:

<?php include(TEMPLATEPATH . '/header_single.php'); ?>

La costante TEMPLATEPATH è una cosa piuttosto interessante, che approfondirò. Ok, magari è una banalità, ma io sono un principiante…

Annunci

8 pensieri su “headings, terza parte

  1. Pingback: Conclusioni sugli headings | Italian webdesign

  2. Il punto secondo me è questo: ‘a heading element briefly describes the topic of the section it introduces’. Dunque, in un sito web, a differenza di un giornale dove hai il contesto materiale che ti dice quale testata (appunto…) stai leggendo, non è autoevidente a chi appartiene la pagina interna sulla quale stai navigando: l’ per il nome del sito in tutte le pagine può quindi ragionevolmente servire a ricordare ed evidenziare che è quella la sezione dalla quale tutte le altre dipendono e discendono.
    E per WordPress, sì, se vuoi cambiare dalla home alle pagine interne – anche se, come avrai capito, non sarei così d’accordo 😉 – puoi usare i tag condizionali, nello specifico ‘is_home() ‘.

  3. Ciao Paolo. È proprio in base a quella definizione e a qualche ragionamento che qui ho deciso di fare così: nella home il titoli1 è il nome del sito, e titolo2 i titoli dei post. Nella pagina dei post singoli titolo1 è il titolo del post. Ti sembra che nelle pagine singole non sia evidente il nome del sito? c’è almeno tre volte: nel title della finestra, nella breadcrumb (nascosta, per ora), nel corpo della pagina. Mi sembra davvero fin troppo 🙂
    Per cambiare la struttura delle pagine ho preferito usare templatepath, senza ricorrere a elaborazioni, mentre userò sicuramente i tag condizionali per definire i cambi di struttura e/o stile nelle singole pagine.

  4. Certo che sì, putroppo è un po’ il prezzo che si paga per la semplicità “come da progetto” di HTML. Con altri markup, e anche coi prossimi di W3C, la situazione è molto più definita. Basta dare un occhio a Docbook o a DITA per vedere come la situazione sia ben più chiara in altre DTD. Non è un difetto di HTML, ovvio. Per quelle che erano le sue specifiche funziona benissimo. Però, rispetto a quei tempi ora i documenti sul Web son ben più complessi e hanno bisogno di maggiore definizione.
    Quindi, ci si arrangia un po’ 🙂

  5. Povero TBL, ha già fatto tanto per noi con la sua semplificazione di SGML! Cmq, sì, assolutamente d’accordo, abbiamo bisogno oramai di etichette più complesse e semantiche. Attendiamo tempi migliori, sempre che arrivino 😉

  6. Pingback: Cambio il web - il blog» Blog Archive » MICROFORMATS, empowering tour markup for web 2.0 di John Allsopp (2007)

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...