HTML - L'élément principal
L'élément HTML <head>est un conteneur pour les éléments suivants :
<title>, <style>,
<meta>, <link>, <script>et <base>.
L'élément HTML <head>
L' <head>élément est un conteneur de métadonnées (données sur les données) et est placé entre la <html>balise et la <body>balise.
Les métadonnées HTML sont des données sur le document HTML. Les métadonnées ne sont pas affichées.
Les métadonnées définissent généralement le titre du document, le jeu de caractères, les styles, les scripts et d'autres méta-informations.
L'élément HTML <title>
L' <title>élément définit le titre du document. Le titre ne doit contenir que du texte et s'affiche dans la barre de titre du navigateur ou dans l'onglet de la page.
L' <title>élément est obligatoire dans les documents HTML !
Le contenu d'un titre de page est très important pour l'optimisation des moteurs de recherche (SEO) ! Le titre de la page est utilisé par les algorithmes des moteurs de recherche pour décider de l'ordre lors de la liste des pages dans les résultats de recherche.
L' <title>élément :
- définit un titre dans la barre d'outils du navigateur
- donne un titre à la page lorsqu'elle est ajoutée aux favoris
- affiche un titre pour la page dans les résultats des moteurs de recherche
Alors, essayez de rendre le titre aussi précis et significatif que possible !
Un simple document HTML :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page
Title</title>
</head>
<body>
The content of the document......
</body>
</html>
L'élément HTML <style>
L' <style>élément est utilisé pour définir les informations de style pour une seule page HTML :
Exemple
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
L'élément HTML <link>
L' <link>élément définit la relation entre le document actuel et une ressource externe.
La <link>
balise est le plus souvent utilisée pour créer un lien vers des feuilles de style externes :
Exemple
<link rel="stylesheet" href="mystyle.css">
Conseil : Pour tout savoir sur CSS, consultez notre didacticiel CSS .
L'élément HTML <meta>
L' <meta>élément est généralement utilisé pour spécifier le jeu de caractères, la description de la page, les mots-clés, l'auteur du document et les paramètres de la fenêtre d'affichage.
Les métadonnées ne seront pas affichées sur la page, mais sont utilisées par les navigateurs (comment afficher le contenu ou recharger la page), par les moteurs de recherche (mots clés) et d'autres services Web.
Exemples
Définissez le jeu de caractères utilisé :
<meta charset="UTF-8">
Définissez des mots-clés pour les moteurs de recherche :
<meta name="keywords" content="HTML, CSS, JavaScript">
Définissez une description de votre page Web :
<meta name="description" content="Free Web tutorials">
Définir l'auteur d'une page :
<meta name="author" content="John Doe">
Actualiser le document toutes les 30 secondes :
<meta http-equiv="refresh" content="30">
Configuration de la fenêtre d'affichage pour que votre site Web ait une belle apparence sur tous les appareils :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Exemple de <meta>balises :
Exemple
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John
Doe">
Définition de la fenêtre d'affichage
La fenêtre d'affichage est la zone visible par l'utilisateur d'une page Web. Cela varie selon l'appareil - il sera plus petit sur un téléphone portable que sur un écran d'ordinateur.
Vous devez inclure l' <meta>élément suivant dans toutes vos pages Web :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cela donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page.
La width=device-widthpartie définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui varie selon l'appareil).
La initial-scale=1.0partie définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Voici un exemple de page Web sans la balise Meta Viewport et de la même page Web avec la balise Meta Viewport :
Astuce : Si vous naviguez sur cette page avec un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessous pour voir la différence.
L'élément HTML <script>
L' <script>élément est utilisé pour définir les JavaScripts côté client.
Le JavaScript suivant écrit "Hello JavaScript!" dans un élément HTML avec id="demo":
Exemple
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Conseil : Pour tout savoir sur JavaScript, consultez notre didacticiel JavaScript .
L'élément HTML <base>
L' <base>élément spécifie l'URL de base et/ou la cible pour toutes les URL relatives d'une page.
La <base>balise doit avoir un href ou un attribut cible présent, ou les deux.
Il ne peut y avoir qu'un seul <base>
élément dans un document !
Exemple
Spécifiez une URL par défaut et une cible par défaut pour tous les liens d'une page :
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39"
alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Résumé du chapitre
- L'
<head>élément est un conteneur de métadonnées (données sur les données) - L'
<head>élément est placé entre la<html>balise et la<body>balise - L'
<title>élément est obligatoire et il définit le titre du document - L'
<style>élément est utilisé pour définir les informations de style pour un seul document - La
<link>balise est le plus souvent utilisée pour créer un lien vers des feuilles de style externes - L'
<meta>élément est généralement utilisé pour spécifier le jeu de caractères, la description de la page, les mots-clés, l'auteur du document et les paramètres de la fenêtre d'affichage. - L'
<script>élément est utilisé pour définir les JavaScripts côté client - L'
<base>élément spécifie l'URL de base et/ou la cible pour toutes les URL relatives dans une page
Éléments d'en-tête HTML
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <title> | Defines the title of a document |
| <base> | Defines a default address or a default target for all links on a page |
| <link> | Defines the relationship between a document and an external resource |
| <meta> | Defines metadata about an HTML document |
| <script> | Defines a client-side script |
| <style> | Defines style information for a document |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .