La zone d'en-tête d'un document HTML est essentielle pour la structure et le fonctionnement de la page web. Dans ce tutoriel, vous apprendrez ce qui se cache exactement dans la zone d'en-tête et comment l'utiliser efficacement. Nous aborderons les métainformations, les titres, l'encodage des caractères ainsi que le lien vers les feuilles de style et les scripts.
Principales découvertes
- La zone d'en-tête () ne contient aucun contenu visible, mais des métainformations.
- La balise Title définit le titre qui s'affiche dans la barre du navigateur.
- Les métabalises, comme la balise Charset, sont importantes pour l'encodage des caractères.
- Les feuilles de style et les scripts peuvent être liés dans la zone d'en-tête.
Guide étape par étape
1. La zone d'en-tête à proprement parler
La zone d'en-tête (head) d'un document HTML est introduite par les balises et est fermée par. Cette zone ne doit pas être confondue avec la barre de menu ou le logo qui font partie d'un en-tête. La zone d'en-tête a uniquement pour but de fournir des métainformations sur le document.
2. La balise Title
Dans la zone d'en-tête, vous définissez le titre de la page web avec la balise <title>.
3. Les métabalises
Un élément central de la zone d'en-tête est ce qu'on appelle les métabalises. La balise Charset est particulièrement importante. Indiquez UTF-8 pour un encodage international des caractères afin de garantir que tous les caractères sont affichés correctement.
4. La balise Meta Charset
La balise Meta Charset s'écrit ainsi: . C'est une norme courante qui prend en charge les jeux de caractères internationaux. Contrairement à d'autres balises, la balise Meta n'a pas de balise de fermeture, car elle n'a pas de contenu entre les deux.
5. Attributs dans les balises HTML
Dans HTML, des attributs peuvent également être utilisés. Ceux-ci sont spécifiés dans la balise elle-même et séparés par un espace. La balise Charset a l'attribut charset, auquel est attribuée la valeur « UTF-8 ».
6. Meta Description
Une autre métabalise importante est la Meta Description, qui est définie par . Cette description est souvent affichée dans les moteurs de recherche lorsque votre page est trouvée et est donc significative pour le SEO.
7. Autres métabalises
En plus des métabalises précédentes, il existe de nombreuses autres, telles que la balise Robots, qui donne des instructions aux moteurs de recherche, et la balise Viewport, qui est utilisée pour les designs responsives. Ce sont cependant des aspects supplémentaires et vont au-delà des principes de base.
8. Lien vers les feuilles de style
Dans la zone d'en-tête, vous pouvez également lier des feuilles de style. Cela se fait avec la balise . Cela charge une feuille de style CSS externe dans le document HTML, ce qui conduit à un design cohérent.
9. Lien vers les scripts
Pour utiliser JavaScript sur votre page web, vous pouvez intégrer des scripts dans la zone d'en-tête. Cela se fait avec la balise . Cela vous permet d'ajouter des fonctions et de la logique à votre page, améliorant ainsi l'expérience utilisateur.
10. La zone d'en-tête et sa fonction
En résumé, la zone d'en-tête est un lieu pour des métainformations et des liens, et non pour le contenu visible. Le véritable contenu d'une page web est inséré dans la balise -. Cela est important pour la structure et la performance de votre page web.
Résumé – Zone d'en-tête et métainformations en HTML, CSS et JavaScript
La zone d'en-tête est d'une importance centrale pour définir des informations et des réglages de base pour votre page web. Dans ce guide, vous avez appris comment intégrer efficacement des titres, des encodages de caractères ainsi que des feuilles de style et des scripts.
Questions fréquemment posées
Comment la zone d'en-tête est-elle définie en HTML?La zone d'en-tête est introduite par et est fermée par.
Quel est l'objectif de la balise Title?La balise Title définit le titre de la page web qui apparaît dans la barre du navigateur.
Qu'est-ce qu'une métabalise et à quoi sert-elle?Une métabalise contient des métainformations sur le document, comme des encodages de caractères ou des descriptions.
Comment insérer une feuille de style?Une feuille de style est liée par.
Quelle est la différence entre la zone d'en-tête et la zone de corps?La zone d'en-tête contient des métainformations, tandis que la zone de corps contient le contenu visible de la page web.
