<head>
<head> contient les métadonnées de la page : des données sur les données.
Ces métadonnées définissent les informations de la page (langage, description...), son titre, le style css, les scripts javascript...
<head> est placé avant <body>.
Cette balise représente une partie non visible du code à l'affichage dans le navigateur.
<head> est constitué de ces balises :
<title>: balise du titre du site (visible comme étant le nom de l'onglet)<link>: import de fichier css ou autre que javascript<meta>balises donnant des informations sur la page<style>: écriture de code css<script>: écriture de code javascript ou import de fichier javascript<base>: indique l'url et la cible par défaut des liens de la page
<head> utilise les attributs globaux
<title>
- le titre de la page, soit le nom de l'onglet
- le nom donné au favori
- le titre du résultat d'un moteur de recherche
<title> sur la page
Code
Aperçu dans le navigateur
<title> utilise les attributs globaux
<link>
<link> importe un fichier externe pour être interprété par le navigateur, le plus souvent une feuille de style CSS ou une icône<link> est une balise orpheline (qui ne se ferme pas)
href et rel sont obligatoire
Code
Aperçu dans le navigateur
<link> utilise les attributs globaux
href
- Obligatoire avec la balise
<link> - S’utilise toujours avec l’attribut
rel
<link rel="valeur" href="url">
| Valeur | Description | Infos |
|---|---|---|
| url |
|
|
<link rel="valeur" href="url"> |
rel
href
- Obligatoire avec la balise
<link> - S’utilise toujours avec l’attribut
href
<link rel="valeur" href="url">
| Valeur | Description | Infos |
|---|---|---|
| stylesheet |
|
|
<link rel="stylesheet" href="url"> |
||
| icon |
|
|
<link rel="icon" href="url"> |
||
| alternate |
Indique que l'url pointe vers une version alternative de la page
|
|
<link rel="alternate" href="url"> |
||
| author |
Indique que l'url pointe vers le site web de l'auteur du site ou de la page web actuelle
|
|
<link rel="author" href="url"> |
||
| help |
Indique que l'url pointe vers un document d'aide
|
|
<link rel="help" href="url"> |
||
| license |
Indique que l'url pointe vers un document fournissant les termes du copyright
|
|
<link rel="license" href="url"> |
||
| search |
Indique que l'url pointe vers un document utilisé pour rechercher dans le document actuel et ses pages associées
|
|
<link rel="search" href="url"> |
||
| canonical |
Indique que l'url pointe vers un document canonique
|
|
<link rel="canonical" href="url"> |
||
| prefetch |
Optimisation du chargement de la page : Spécifie que le navigateur peut télécharger et mettre en cache de manière préventive le fichier mentionné par l' url (priorité faible)
|
|
<link rel="prefetch" href="url"> |
||
| dns-prefetch |
Optimisation du chargement de la page : Effectue une résolution des noms de domaine pour l'origine de la ressource spécifiée par l' url de manière préventive
|
|
<link rel="dns-prefetch" href="url"> |
||
| preload |
Optimisation du chargement de la page : Indique que le navigateur doit télécharger et mettre en cache le fichier mentionné par l' url au plus tôt (priorité haute), le type de la ressource est renseigné par l'attribut as
|
|
<link rel="preload" href="url"> |
||
| next |
Indique que la page actuelle fait partie d'une série, et que la page suivante est renseigné par l' url
|
|
<link rel="next" href="url"> |
||
| prev |
Indique que la page actuelle fait partie d'une série, et que la page précédente est renseigné par l' url
|
|
<link rel="prev" href="url"> |
type
href++Conseillé avec l'attribut rel="stylesheet" et rel="icon"
<link rel="valeur" type="valeur" href="url">
| Valeur | Description | Infos |
|---|---|---|
| type de document |
|
|
<link rel="valeur" type="valeur" href="url"> |
media
- Indique pour quel périphérique, le code CSS est destiné.
- Possibilité d'indiquer plusieurs média
- Les opérateurs and (et), not (sauf) et , (ou) permettent de les joindre ou d'affiner la zone de sortie
| Valeur | Description | Infos |
|---|---|---|
| all |
|
|
|
||
| screen | Correspond aux écrans d'ordinateur |
|
|
||
| Correspond au rendu à l'impression et à la prévisualisation avant impression |
|
|
|
<link rel="valeur" href="url" media="valeur">
| Valeur | Description | Infos |
|---|---|---|
| aspect-ratio |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (aspect-ratio: valeur)"> |
||
| width |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (width: valeur)"> |
||
| height |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (height: valeur)"> |
||
| color |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (color: valeur)"> |
||
| color-index |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (color-index: valeur)"> |
||
| monochrome |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (monochrome: valeur)"> |
||
| grid |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (grid: valeur)"> |
||
| orientation |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (orientation: valeur)"> |
||
| resolution |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (resolution: valeur)"> |
||
| scan |
|
|
<link rel="valeur" href="url" media="zone d'affichage opérateur (scan: valeur)"> |
hreflang
href
<link rel="valeur" href="url" hreflang="valeur">
| Valeur | Description | Infos |
|---|---|---|
| Code de la langue |
|
|
<link rel="valeur" href="url" hreflang="valeur"> |
crossorigin
<link rel="valeur" href="url" crossorigin="valeur">
| Valeur | Description | Infos |
|---|---|---|
| anonymous |
|
|
<link rel="valeur" href="url" crossorigin="anonymous"> |
||
| use-credentials | Demande d'origine croisée sera envoyée avec les informations d'identification, les cookies et le certificat |
|
<link rel="valeur" href="url" crossorigin="use-credentials"> |
sizes
href
rel="icon"
<link rel="icon" href="url" sizes="valeur">
| Valeur | Description | Infos |
|---|---|---|
| hauteur x largeur |
|
|
<link rel="icon" href="url" sizes="valeur"> |
||
| any | S'utilise pour les images vectoriel (svg) |
|
<link rel="icon" href="url" type="image/svg+xml" sizes="any"> |
<meta>
<meta> utilise les attributs globaux
charset
<meta charset="valeur">
| Valeur | Description | Infos |
|---|---|---|
| Code du jeu de caractéres |
|
|
<meta charset="valeur"> |
content
name et http-equiv
<meta name="valeur" content="information"><meta http-equiv="valeur" content="information">
name
- Cet attribut fournit des renseignements concernant l'auteur, la page html, et tout autres informations pouvant être utile au navigateur et aux moteurs de recherche
- Fonctionne avec l'attribut
content
<meta name="valeur" content="information">
| Valeur | Description | Infos | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| author | Indique le nom de l'auteur du document |
|
||||||||||
<meta name="author" content="nom de l'auteur"> |
||||||||||||
| description | Désigne une courte description de la page html |
|
||||||||||
<meta name="description" content="description de la page"> |
||||||||||||
| keywords |
|
|
||||||||||
<meta name="keywords" content="mots-clé1,mots-clé2,..."> |
||||||||||||
| generator | Indique le logiciel utilisé pour la conception de la page web |
|
||||||||||
<meta name="generator" content="nom de l'application"> |
||||||||||||
| robots |
Définit la manière qu'ont les moteurs de recherche d'indexer, de référencer la page web
|
|||||||||||
<meta name="robots" content="valeur"> |
||||||||||||
http-equiv
- Cet attribut donne des directives au serveur sur le jeu de caractéres, la sécurité, la compatibilité, le rafraichissement de la page et le style css par défaut
- Fonctionne avec l'attribut
content
<meta http-equiv="valeur" content="information">
| Valeur | Description | Infos |
|---|---|---|
| content-type |
|
|
<meta http-equiv="content-type" content="code de jeu de caractères"> |
||
| content-security-policy |
|
|
<meta http-equiv="content-security-policy" content="règle"> |
||
| default-style | Définit le nom du de la feuille de style alternative par défaut, le fichier CSS doit être lié au document pour que cela fonctionne |
|
<meta http-equiv="default-style" content="nom de la feuille de style"> |
||
| refresh | Indique un intervalle de temps entre chaque rafraichissement de la page |
|
<meta http-equiv="refresh" content="nombre de seconde"> |
<style>
<style> permet d'ajouter du code CSS à la page HTML en coursCe code CSS ne sera appliqué qu'à la page courante
Code
Aperçu dans le navigateur
<style> utilise les attributs globaux
media
- Indique pour quel périphérique, le code CSS est destiné.
- Possibilité d'indiquer plusieurs média
- Les opérateurs and (et), not (sauf) et , (ou) permettent de les joindre ou d'affiner la zone de sortie
| Valeur | Description | Infos |
|---|---|---|
| all |
|
|
|
||
| screen | Correspond aux écrans d'ordinateur |
|
|
||
| Correspond au rendu à l'impression et à la prévisualisation avant impression |
|
|
|
<style media="valeur">Code Css</style>
| Valeur | Description | Infos |
|---|---|---|
| aspect-ratio |
|
|
<style media="zone d'affichage opérateur (aspect-ratio: valeur)"> |
||
| width |
|
|
<style media="zone d'affichage opérateur (width: valeur)"> |
||
| height |
|
|
<style media="zone d'affichage opérateur (height: valeur)"> |
||
| color |
|
|
<style media="zone d'affichage opérateur (color: valeur)"> |
||
| color-index |
|
|
<style media="zone d'affichage opérateur (color-index: valeur)"> |
||
| monochrome |
|
|
<style media="zone d'affichage opérateur (monochrome: valeur)"> |
||
| grid |
|
|
<style media="zone d'affichage opérateur (grid: valeur)"> |
||
| orientation |
|
|
<style media="zone d'affichage opérateur (orientation: valeur)"> |
||
| resolution |
|
|
<style media="zone d'affichage opérateur (resolution: valeur)"> |
||
| scan |
|
|
<style media="zone d'affichage opérateur (scan: valeur)"> |
<base>
<base> définit l'URL de base qui servira à reformer les liens relatif de la page courante
- Il ne peut y avoir qu'une seule balise
<base>dans une page. <base>doit contenir au moins un des deux attributs.
Code
Aperçu dans le navigateur
<base> utilise les attributs globaux
href
<base href="url">
| Valeur | Description | Infos |
|---|---|---|
| url |
|
|
<base href= |
target
<base target="valeur">
| Valeur | Description | Infos |
|---|---|---|
| _blank | L'ouverture des liens se passe dans une nouvelle fenêtre ou un nouvel onglet |
|
<base target="_blank"> |
||
| _self |
|
|
<base target="_self"> |
||
| _parent |
|
|
<base target="_parent"> |
||
| _top |
|
|
<base target="_top"> |
<script>
<script> permet :
- d'ajouter du code javascript à la page HTML en cours
- d'importer un fichier javascript
Code
Aperçu dans le navigateur
<script> utilise les attributs globaux
src
- Définit le lien vers un fichier javascript externe
- Très utile pour charger le même code javascript sur plusieurs pages
<script src="url">
| Valeur | Description | Infos |
|---|---|---|
| url |
|
|
<script src="url"></script> |
async
src doit être téléchargé en parallèle de l'affichage de la page et exécuté aussitôt
src
<script src="url" async>
| Valeur | Description | Infos |
|---|---|---|
| Booléen |
async a la valeur false par défaut. Le fait de placer async à l'intérieur de la balise le rendra à true
|
|
<script src="url" async></script> |
defer
src doit être téléchargé en parallèle de l'affichage de la page et exécuté dès que la page sera entièrement chargé
src
<script src="url" defer>
| Valeur | Description | Infos |
|---|---|---|
| Booléen |
defer a la valeur false par défaut, le fait de placer defer à l'intérieur de la balise le rendra à true
|
|
<script src="url" defer></script> |
crossorigin
Cette demande est gérée par CORS (Cross-Origin Resource Sharing) qui détermine si le navigateur est autorisé ou non à charger le contenu externe.
<script src="url" crossorigin="valeur">
| Valeur | Description | Infos |
|---|---|---|
| anonymous |
|
|
<script src="url" crossorigin="anonymous"></script> |
||
| use-credentials | Demande d'origine croisée sera envoyée avec les informations d'identification, les cookies et le certificat |
|
<script src="url" crossorigin="use-credentials"></script> |
referrerpolicy
src
src
- L'en-tête Referer contient l'adresse de la page web précédente.
Elle est définie suite au clique d'un lien qui aboutit à la page courante. Cela permet de suivre la provenance des internautes et d'en tirer des informations à analyser - L'origine est définie par le protocole, l'hôte et le port (si indiqué) de la page courante.
Par exemple : https://www.monsiteweb.com:443
Le protocole est https
L'hôte est www.monsiteweb.com
Le port est 443
<script src="url" referrerpolicy="valeur"></script>
| Valeur | Description | Infos |
|---|---|---|
| no-referrer-when-downgrade |
|
|
<script src="url" referrerpolicy="no-referrer-when-downgrade"></script> |
||
| no-referrer | Signifie qu'aucune information d'en-tête Referer ne sera envoyée | |
<script src="url" referrerpolicy="no-referrer"></script> |
||
| origin |
Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer
|
|
<script src="url" referrerpolicy="origin"></script> |
||
| same-origin |
Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer s'il a la même origine
|
|
<script src="url" referrerpolicy="same-origin"></script> |
||
| origin-when-cross-origin |
Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer lorsqu'il n'a pas la même origine, sinon envoi l'url complète
|
|
<script src="url" referrerpolicy="origin"></script> |
||
| strict-origin |
Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer lorsque le protocole est le même
|
|
<script src="url" referrerpolicy="strict-origin"></script> |
||
| strict-origin-when-cross-origin |
Envoi les informations d'origine du fichier saisi dans l'attribut src comme en-tête Referer lorsqu'il n'a pas la même origine, sinon envoi l'url compléte si le protocole est le même
|
|
<script src="url" referrerpolicy="strict-origin-when-cross-origin"></script> |
||
| unsafe-url |
|
|
<script src="url" referrerpolicy="unsafe-url"></script> |
type
- L'attribut type indique le type du fichier lié par l'attribut
src - Il sert à identifier également le script inséré entre <script> et </script>
<script type="valeur"></script>
| Valeur | Description | Infos |
|---|---|---|
| type de document |
|
|
<script type="valeur"></script> |