Balises utilisées dans la section tête

Cet article explique les balises utilisées dans la section tête.

Il explique les balises utilisées dans la section head, telles que <link>, <script>, <style>.

YouTube Video

Balises utilisées dans la section tête

Balise <title>

1<title>Document Title</title>

• La balise <title> définit le titre du document. Ce titre est affiché dans l'onglet du navigateur et est utilisé dans les favoris et les résultats de recherche.

Balise <link>

• La balise <link> est utilisée pour lier des ressources externes au document actuel. Elle est couramment utilisée pour lier des fichiers CSS externes, mais peut également être utilisée pour des icônes et d'autres ressources externes.

L'attribut rel de la balise <link>

L'attribut rel est utilisé pour spécifier la relation entre la ressource liée et le document actuel dans la balise <link>. Il existe de nombreux types de valeurs pour l'attribut rel, mais nous expliquerons ici les plus importantes et fréquemment utilisées.

stylesheet

1<link rel="stylesheet" href="styles.css">

• stylesheet est utilisé pour lier une feuille de style externe.

icon

1<link rel="icon" href="favicon.ico" type="image/x-icon">

• rel="icon" définit l'icône affichée dans l'onglet du navigateur ou le favori. En spécifiant le favicon correct, la marque du site et la reconnaissance visuelle sont améliorées.

preload

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• preload est utilisé pour charger les ressources à l'avance avant le début du rendu de la page. Il est particulièrement utile pour les ressources où le timing est important, comme les polices ou les grandes images. Cela améliore les performances et renforce l'expérience utilisateur.

canonical

1<link rel="canonical" href="https://example.com/page.html">

• canonical est utilisé pour informer les moteurs de recherche sur la version canonique d'une page. En cas de contenu dupliqué, indiquer l'URL canonique aide à consolider le classement dans les moteurs de recherche du point de vue du SEO et garantit que le contenu est correctement indexé.

alternate

1<link rel="alternate" hreflang="en" href="https://example.com/en/">

• alternate est utilisé pour indiquer aux moteurs de recherche et navigateurs les pages de différentes langues ou formats. Dans les sites multilingues, vous pouvez spécifier l'URL pour chaque version linguistique en combinaison avec l'attribut hreflang pour fournir aux utilisateurs des pages dans la langue appropriée.

manifest

1<link rel="manifest" href="/manifest.json">

• Le manifest fournit au navigateur un fichier manifeste contenant des informations de configuration pour une PWA (Progressive Web App). Ce fichier contient des informations telles que l'icône de l'application, la couleur du thème et le mode d'affichage, ce qui aide à installer et exécuter la PWA sur les appareils mobiles.

dns-prefetch

1<link rel="dns-prefetch" href="//example.com">

• Lors de la référence à des ressources externes, effectuer la résolution DNS du domaine à l'avance peut améliorer la vitesse de chargement de la page. Cela est particulièrement efficace pour les pages avec de nombreuses ressources externes ou lorsque l'on souhaite une expérience utilisateur rapide.

Balise <style>

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>

• La balise <style> est utilisée pour définir des feuilles de style internes. Elle est utilisée pour appliquer des styles CSS aux éléments de la page, vous permettant d'écrire du CSS sans utiliser de fichiers externes.

Balise <script>

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>

• La balise <script> est utilisée pour intégrer du code JavaScript dans un document HTML. Vous pouvez également lier des fichiers JavaScript externes, contrôlant le comportement dynamique de la page. Utilisez l'attribut src pour spécifier le fichier script.

Les attributs async et defer

La balise <script> prend en charge deux attributs, async et defer, qui affectent le moment du chargement et de l'exécution des scripts. Normalement, les scripts sont traités séquentiellement par le navigateur, mais l'utilisation de ces attributs peut améliorer les performances de la page et l'expérience de chargement.

L'attribut async

1<script src="script.js" async></script>

• L'utilisation de l'attribut async permet de charger le script de manière asynchrone. Le navigateur charge le script en parallèle avec d'autres ressources et l'exécute immédiatement après le chargement.
• async convient principalement aux scripts indépendants et est utilisé lorsque le script ne dépend pas du chargement d'autres scripts ou du DOM.

L'attribut defer

1<script src="script.js" defer></script>

• L'utilisation de l'attribut defer permet de charger le script de manière asynchrone mais de l'exécuter après que l'analyse HTML soit terminée. L'exécution du script ne bloque pas l'affichage de la page, améliorant ainsi l'expérience utilisateur.
• defer est efficace lorsque les scripts doivent être exécutés après que le DOM est complètement chargé. Par exemple, il est adapté lorsque vous souhaitez que le script s'exécute après que la mise en page et les éléments de la page soient entièrement chargés.

Politique CORS et l'attribut crossorigin

Lors du chargement de scripts externes, des restrictions de sécurité peuvent être imposées en fonction de la politique Same-Origin. Dans de tels cas, l'attribut crossorigin peut être utilisé pour permettre le partage de ressources.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

L'attribut crossorigin peut être défini avec les deux valeurs suivantes :.

• anonymous : Envoie des requêtes sans inclure d'informations d'identification.
• use-credentials : Envoie des requêtes en incluant des informations d'identification.

L'attribut type

La balise <script> peut utiliser l'attribut type pour spécifier le type de script. Par défaut, JavaScript est utilisé, mais vous pouvez également spécifier certains types de scripts (par exemple, JavaScript de type module ou langage de modèle).

Modules JavaScript

1<script type="module" src="module.js"></script>

• Depuis ECMAScript 2015 (ES6), les modules JavaScript ont été introduits, permettant de diviser le code entre plusieurs modules, améliorant ainsi la réutilisabilité. En spécifiant type="module", vous pouvez traiter le script comme un module.

• Les modules peuvent être divisés en d'autres modules en utilisant import et export.

Scripts autres que JavaScript

1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>

• Des scripts autres que JavaScript peuvent également être spécifiés dans la balise <script>. Par exemple, utilisez type="application/ld+json" pour décrire des données structurées comme JSON-LD. Ici, JSON-LD est un format qui structure les données sur une page web, permettant aux moteurs de recherche et à d'autres applications de comprendre les données plus en profondeur.

Remarques sur l'utilisation de la balise <script>

• Ordre des scripts : les bibliothèques dont dépendent les scripts doivent être chargées avant les scripts dépendants. Par exemple, les scripts utilisant jQuery doivent être chargés après jQuery lui-même.
• Optimisation des performances : pour éviter d'affecter la vitesse de chargement de la page, chargez les scripts uniquement lorsque cela est nécessaire et évitez de lancer des scripts inutiles.
• Mesures de sécurité : lors de l'utilisation de scripts externes, assurez-vous qu'ils sont chargés à partir de sources fiables pour éviter l'insertion de scripts malveillants.

La balise <base>

1<base href="https://example.com/">

• La balise <base> définit l'URL de base pour toutes les URLs relatives du document. L'URL spécifiée dans l'attribut href devient la base pour les chemins relatifs dans les liens et les images. Elle est généralement utilisée une seule fois par page.

La balise <noscript>

1<noscript>Your browser does not support JavaScript!</noscript>

• La balise <noscript> définit le contenu qui est affiché lorsque JavaScript est désactivé dans le navigateur. Elle est utilisée pour fournir un contenu alternatif dans les environnements où JavaScript n'est pas pris en charge.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video