Nel progettare una pagina web, uno degli aspetti che a volte viene trascurato è la markup hierarchy, e cioè la strutturazione gerarchica della pagina HTML.
Questo aspetto della progettazione è strettamente correlato allo scopo di ottimizzare la pagina per i motori di ricerca (il cosidetto SEO = Search Engine Optimization).
Quello che voglio esprimere riferendomi alla markup hierarchy, in parole povere, è che  l’obiettivo da porci in fase di progettazione è quello di visualizzare il codice contenente il contenuto unico per primo.

Per questo articolo si ringrazia Soh Tanaka, che ha gentilmente concesso il permesso di un adattamento in italiano del proprio articolo sull’argomento.

Perchè mostrare per primo il contenuto unico

Ricordiamoci che il contenuto unico è il cuore di ogni pagina. Quello che differenzia una pagina dall’altra è il contenuto vero della stessa, non certo gli elementi grafici o ripetitivi costituenti la grafica del sito.

Per capirci meglio, cerchiamo di mostrare visivamente ed in maniera estremamente schematica di cosa stiamo parlando:

Come si può vedere, la nostra gerarchia inizia con il contenuto unico, segue con l’header per poi terminare con la sidebar e con il footer.

Il caso pratico

Per andare direttamente al punto della questione vorrei riportare qui un breve esempio pratico di una pagina strutturata secondo i principi appena esposti.
Ottenere un risultato del genere (contenuto inserito per primo nel codice ma mostrato in una posizione diversa) richiede l’utilizzo di un posizionamento css assoluto.

HTML

CSS

#content {
	float: right;
	width: 685px;
	margin: 120px 0 0 0;
	padding: 20px;
}
#header {
	width: 970px;
	position: absolute;
	top: 0; left: 0;
}
#sidecol {
	width: 235px;
	position: absolute;
	top: 150px; left: 0;
}
#footer {
	float: left;
	width: 970px;
}

Accorgimenti finali

E’ necessario ricordare che essendo un posizionamento assoluto, ogni elemento ignorerà il comportamento dell’altro appropriandosi del proprio spazio  anche se questo non è coerente con il resto del layout. Questo significa che se il contenuto unico occupasse meno spazio della barra laterale, il footer verrebbe mostrato in maniera errata.
Risolvere questo problema è piuttosto semplice: basta impostare una altezza minima al box dedicato al contenuto per far sì che questo sia quantomeno alto quanto la sidebar, intervenendo sul css.

#main {
	height: 100%;
	min-height: 724px;
	background: url(stretch.gif) repeat-y;
	position: relative;
	overflow: hidden;
}
*html #main { height: 724px; overflow: visible;}

Preview del risultato finale

Soh Tanaka ha creato una demo online dell’esempio di pagina riportato in questo articolo, visitabile cliccando qui.

Conclusioni

Quello che rende questa gerarchia importante è il comportamento dei motori di ricerca: questi ultimi infatti, scansionano le pagine tramite dei “bot” (cioè dei computer dedicati alla scansione continua del web) i quali utilizzano dei browser testuali simili al famoso Lynx.
Cosa vuol dire questo? Che ciò che un motore di ricerca percepisce di un sito è qualcosa di molto simile al codice sorgente.
Va detto inoltre che per il motore di ricerca le informazioni riportate per prime in una pagina hanno un rilievo maggiore di quelle riportate in fondo (ed ecco perchè mettere il contenuto in cima).

Se avete curiosità di vedere come viene visualizzata una pagina web in un browser testuale potete utilizzare un browser testuale online come questo.

Nell’ambito di questo principio un breve inciso va fatto riguardo i tag html: questi tag forniscono importanti informazioni su cosa considerare più di importante di altro. I tag heading (h1, h2, h3 e così via) indicano ad esempio i titoli, mentre il tag strong indica un contenuto particolarmente rilevante. Questi elementi rientrano nell’ambito della semantica web, argomento al quale presto dedicheremo un discorso a parte.

E’ chiaro che l’utilizzo di una corretta gerarchia HTML non è obbligatorio, nè pregiudica l’indicizzazione da parte dei motori di ricerca. Ma è bene sapere che esiste. Diciamo che conosciuta la regola potremmo più consapevolmente svilupparne le eccezioni.

Se ti è piaciuto questo post