Meta tag HTML5 e altri tag dell'head che ci si scorda sempre

di Francesco Spreafico, .[en] ⇒

L'HTML5 Boilerplate ha reso questa pagina totalmente inutile! Andate a vedere quello!

Perché?

Quante volte hai dovuto iniziare una nuova pagina HTML dal nulla non ricordandoti assolutamente a memoria tutti i meta tag, tutti i link, tutti gli script standard che sai di dover includere in tutte le pagine? Persino ora, con la sintassi HTML5 più breve e facile, devi sempre andare a cercare una pagina esistente e copiarli. Be', ora non ti serve più farlo. E se non conosci o non ti interessa l'HTML5 (anche se dovrebbe), non importa, questo codice funziona dappertutto.

Come?

Copia questo testo (o le parti che ti interessano) e incollalo in una nuova pagina vuota.

<!DOCTYPE html>
<html lang="it">
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="robots" content="all">
	<link rel="stylesheet" href="">
	<link rel="canonical" href="">
	<link rel="alternate" type="application/rss+xml" title="" href=""> 
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="">
	<![endif]-->	
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</body>
</html>

Cosa?

Qualche nota sul codice.

  1. Il nuovo doctype è proprio bello, vero? Come ho detto, usatelo liberamente, funziona.
  2. L'attributo lang in realtà viene ignorato da Google, ma a me piace usarlo comunque. Naturalmente potete cambiare it nella lingua che vi serve.
  3. Il meta tag robots è completamente inutile visto che all (o index, follow, è lo stesso) è quello che succede se non lo mettete, ma se vi serve usare noindex e/o nofollow è qui che dovete scriverli.
  4. Il meta tag canonical è utile quando avete più di un URL che punta alla stessa pagina.
  5. Quell'iconcina RSS che la maggior parte dei browser mostra quando c'è un feed nella pagina che state vedendo? Si configura qui, con il meta tag alternate. (Ha anche altri utilizzi, ma questo è forse il più comune.)
  6. Se ancora supportate IE 6 potreste dover includere alcune regole CSS per sistemare i suoi bug... e i commenti condizionali possono essere il modo migliore per farlo. [if lte IE 6] serve a questo.
  7. Finché IE 8 (e versioni più vecchie) resterà in giro, lo farà anche l'HTML5 shiv. Includendolo, potrete usare gli utili nuovi tag HTML5 semantici senza fare esplodere IE. Se non li usate, non vi serve includere questo script. Naturalmente IE 9 li supporterà, e questo spiega il commento condizionale [if lt IE 9].
  8. Io uso jQuery, quindi ho incluso anche quello (in fondo alla pagina, per motivi di performance, se seguite isuggerimenti di Yahoo). Potete usare ScriptSrc.net per restare aggiornati o scegliere una libreria diversa.

Risorse?

Volete saperne di più su questi argomenti? Ecco alcuni link utili:

Altre risorse HTML5 utili:

PS: I colori usati nel codice sono, naturalmente, quelli di Zenburn.

Salva su Delicious Condividi su Facebook Condividi su Google Buzz Condividi su Twitter http://bit.ly/headtags-it