Il tag <head>
Il tag <head> rappresenta l'intestazione della pagina, cioè un contenitore di informazioni che non fanno parte del contenuto vero e proprio ma che sono comunque importanti per il browser.
All'interno del tag <head> è possibile inserire solo i tag <base> <link> <meta> <noscript> <script> <style> e <template> .
Il tag <base>
Il tag <base> serve per definire l'URL di base al quale si riferiranno gli eventuali URL relativi indicati successivamente. E' possibile usare l'attributo href per definire l'URL di base e l'attributo target per definire il comportamento dei link relativi rispetto all'URL di base.
Non necessita del tag di chiusura in quanto è un elemento vuoto.
<head>
<base href="http://www.esempio.it/">
</head>
<body>
<!-- la destinazione del link seguente sarà <base> + percorso relativo = http://www.esempio.it/contatti.html -->
<p>Visita la pagina <a href="contatti.html">contatti</a>.</p>
</body>Il tag <link>
Il tag <link> serve per creare un collegamento tra la pagina e dei documenti esterni, come ad esempio i fogli di stile o files JavaScript.
L'attributo href contiene l'URL del documento linkato e l'attributo type indica il tipo di documento (testo, immagine...).
E' obbligatorio l'attributo rel che definisce il tipo di relazione tra la pagina e il documento linkato.
Non necessita del tag di chiusura in quanto è un elemento vuoto.
| VALORI ATTRIBUTO REL | DESCRIZIONE |
|---|---|
| alternate | Può indicare un foglio di stile alternativo (es. <link rel="alternate stylesheet" href="print.css" title="print stylesheet">). ll foglio di stile alternativo non viene caricato fino a quando non viene selezionato dall’utente e il title è obbligatorio. Oppure può indicare un feed rss (ex. <link rel="alternate" type="application/rss+xml" href=".rss"> o <link rel="alternate" type="application/atom+xml" href=".atom"> ). Oppure può indicare una versione in un'altra lingua del documento (ex. <link rel="alternate" href="https://example.com/fr/" hreflang="fr"/>). Oppure ancora può indicare una versione del documento in un altro formato (ex. <link rel="alternate" type="application/pdf" href="versione-pdf.pdf">). |
| author | Link ad una pagina dell'autore del documento |
| canonical | |
| dns-prefetch | |
| help | Link ad un documento che fornisce aiuto |
| icon | |
| manifest | |
| modulepreload | |
| license | Link ad un documento relativo al copyright del documento |
| next | Link al documento successivo (se il documento corrente si trova in una serie) |
| pingback | |
| preconnect | |
| prefetch | |
| preload | |
| prerender | |
| prev | Link al documento precedente (se il documento corrente si trova in una serie) |
| search | |
| stylesheet | Link ad un file CSS |
<head>
<link rel="shortcut icon" href="http://www.esempio.it/immagini/favicon.png" type="image/png">
<link type="text/css" rel="stylesheet" href="http://www.esempio.it/css/stili.css" media="all">
</head>Il tag <meta>
Il tag <meta> serve per rappresentare diversi tipi di informazioni che non possono essere rappresentati dagli altri tag. Il tipo di informazione fornita viene indicato dall'attributo contenuto nel tag. Gli attributi possibili sono charset, http-equiv e content, name e content.
Non necessita del tag di chiusura in quanto è un elemento vuoto.
Di seguito alcuni dei tag <meta> più diffusi.
| PRIMO ATTRIBUTO | VALORE | SECONDO ATTRIBUTO | VALORE |
|---|---|---|---|
| charset | il set di caratteri utilizzato nella pagina, solitamente "UTF-8" | non presente | non presente |
| http-equiv | "content-type" | content | "text/html; charset=utf-8" |
| "default-style" | content | il foglio di stile di default per la pagina | |
| "refresh" | content | il numero di secondi dopo i quali viene effettuato il refresh della pagina. Ad esempio indicando "30" la pagina si aggiorna ogni 30 secondi. E' possibile aggiungere l'attributo URL con valore l'URL al quale vogliamo reindirizzare il visitatore dopo il numero di secondi indicato dal content | |
| "set-cookie" | content | "cookie-name=nome_del_cookie; expires=data_di_scadenza_del_cookie" | |
| name | "abstract" | content | un riassunto del meta description per migliorare l'indicizzazione della pagina (non previsto dalle specifiche del W3C) |
| "application-name" | content | il nome dell'applicazione | |
| "author" | content | il nome dell'autore della pagina | |
| "canonical" | content | l'URL scelto come principale (con www o senza) | |
| "description" | content | una breve descrizione del contenuto della pagina, visualizzata nei risultati di ricerca | |
| "generator" | content | framework utilizzato per generare la pagina | |
| "robots" | content | "noindex" per non mostrare la pagina e non mostrare un link "Copia cache" nei risultati di ricerca "nofollow" per non considerare i link indicati nella pagina "none", è l'unione di noindex e nofollow "noarchive" per non mostrare un link "Copia cache" nei risultati di ricerca "nosnippet" per non mostrare uno snippet della pagina nei risultati di ricerca "noodp" "notranslate" per non proporre la traduzione della pagina nei risultati di ricerca "noimageindex" per non indicizzare le immagini nella pagina "unavailable_after:data" per non mostrare la pagina nei risultati di ricerca dopo la data indicata è possibile indicare più valori insieme nella forma <meta name="robots" content="noindex, nofollow"> è possibile sostituire "robots" con il nome del crawler per cui vogliamo settare delle impostazioni specifiche (googlebot per indicare Google, googlebot-news per indicare Google News ecc...) ad esempio <meta name="robots" content="nofollow"><meta name="googlebot" content="noindex"> |
|
| "viewport" | content | "width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" per siti ottimizzati per mobile | |
| "HandheldFriendly" | content | "true" per indicare che la pagina è ottimizzata per i dispositivi mobile | |
| "MobileOptimized" | content | "360" per indicare la viewport per IE Mobile | |
| meta specifici per IOS |
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="3600">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="true">
<meta name="description" content="Appunti digitali su html, css, php, drupal e tutto ciò che riguarda il web.">
<meta name="generator" content="Drupal 8 (http://drupal.org)">
</head>Il tag <noscript>
Il tag <noscript> serve per contenere del markup destinato ai browser che non riconoscono gli script, per esempio perchè l'utente ha disabilitato JavaScript.
Il tag <script>
Il tag <script> serve per contenere degli script, tipicamente JavaScript. Questo tag può comparire anche al di fuori dell'<head>. In XML il tag <script> può contenere una sezione <![CDATA[ ... ]]> (character data) all'interno della quale non è necessario fare l'escape dei caratteri come "<" e "&".
Il tag <style>
Il tag <style> serve per contenere degli stili CSS, scritti esattamente come se fossero in un foglio esterno. E' buona norma aggiungere l'attributo type con valore "text/css".
<head>
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>Il tag <template>
Il tag <template> serve per contenere degli elementi che possono essere riutilizzati più volte all'interno del documento.
Il tag <title>
Il tag <title> definisce il titolo dell'intera pagina, visualizzato nella linguetta della scheda del browser, nell'elenco dei preferiti, nella cronologia di navigazione e nei risultati dei motori di ricerca. Può essercene uno solo per pagina.
Il <title> di una pagina è importante ai fini della SEO, perciò dovrebbe contenere un breve riassunto del contenuto del documento seguito dal nome del sito. Il tutto dovrebbe essere non più lungo di 60 caratteri, ovvero il numero massimo di caratteri visualizzati nei risultati dei motori di ricerca.
<!DOCTYPE html>
<html>
<head>
<title>Il titolo da visualizzare nella scheda del browser</title>
</head>
<body>
<!-- Il contenuto della pagina -->
</body>
</html>IE commenti condizionali
I commenti condizionali servono per caricare dei fogli di stile che sono destinati ad una specifica versione del browser Internet Explorer. Questo è utile quando abbiamo delle proprietà CSS non riconosciute dalle vecchie versioni di IE e vogliamo fornire delle regole alternative.
<head>
<!--[if IE]>
Qualunque versione di Internet Explorer dalla 6 alla 9
< ![endif]-->
<!--[if IE 5.5]>
Solo Internet Explorer 5.5
< ![endif]-->
<!--[if IE 6]>
Solo Internet Explorer 6
< ![endif]-->
<!--[if IE 7]>
Solo da Internet Explorer 7
< ![endif]-->
<!--[if gte IE 5]>
Solo Internet Explorer versione uguale o superiore alla 5
< ![endif]-->
<!--[if lt IE 6]>
Solo versioni inferiori ad Internet Explorer 6
< ![endif]-->
<!--[if lte IE 5.5]>
Solo versioni inferiori o uguali ad Internet Explorer 5.5
< ![endif]-->
<!--[if gt IE 6]>
Solo versioni superiori ad Internet Explorer 6
< ![endif]-->
</head>