GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(html): add section on styles and scripts in <head>

Browse Source
This commit is contained in:
Gauthier Daniels 2025-05-13 13:54:28 +02:00
parent 814efdce81
commit 5258ffdbca
2 changed files with 54 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/pages/docs/html/balise-head/+Page.mdx
View File

@ -45,4 +45,39 @@ Voici un aperçu de certains éléments courants que tu peux y trouver :
Cette balise est encore souvent utilisée, mais son importance est que très légère dans le référencement moderne. Cette balise est encore souvent utilisée, mais son importance est que très légère dans le référencement moderne.
À titre d'information : [Google ne l'utilise pas](https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag?hl=fr). À titre d'information : [Google ne l'utilise pas](https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag?hl=fr).
</Callout> </Callout>
## 🎨 Styles et scripts
La balise `<head>` permet également d'inclure des ressources externes telles que des feuilles de style _(CSS)_ et des scripts _(JavaScript)_.
Ces ressources permettent de styliser la page et d'ajouter des fonctionnalités interactives.
<tabs.htmlStylesAndScripts />
Dans cet exemple, une feuille de style externe appelée `styles.css` est liée au document HTML à l'aide de la balise `<link>`.
De même, un script JavaScript externe appelé `app.js` est inclus à l'aide de la balise `<script>`.
Ces fichiers sont chargés lorsque la page est ouverte, ce qui permet d'appliquer des styles et d'ajouter des fonctionnalités à la page.
<Callout type="warning" title="Inclusion des fichiers JavaScript dans la balise `<head>`">
Il est recommandé d'inclure les fichiers JavaScript à la fin de la balise `<body>` pour améliorer les performances de chargement de la page.
En effet, cela permet au navigateur de charger le contenu visible avant d'exécuter les scripts, ce qui améliore l'expérience utilisateur.
</Callout>
## 🌐 Le référencement
Tu l'auras remarqué, j'ai parlé de référencement à plusieurs reprises dans cet article. Mais alors, qu'est-ce que c'est ?
Le **référencement** _(ou SEO pour Search Engine Optimization)_ est l'ensemble des techniques visant à
améliorer la visibilité d'un site web dans les résultats des moteurs de recherche.
Il est essentiel de bien structurer la balise `<head>` pour optimiser le référencement de ta page.
Les moteurs se basent sur les informations fournies dans cette balise pour indexer et classer les pages web.
Mais bien entendu, le référencement ne se limite pas à la balise `<head>` ! 😉
## 📚 Conclusion
La balise `<head>` est un élément essentiel de toute page HTML. Elle fournit des informations essentielles pour la structure
d'une page HTML, y compris le titre, les métadonnées et les liens vers des ressources externes.

18
app/pages/docs/html/balise-head/tabs.tsx
View File

@ -19,6 +19,24 @@ const htmlBasicHeadSnippets = [
}, },
]; ];
const htmlStylesAndScriptsSnippets = [
{
name: "Exemple d'inclusion de styles et de scripts",
codeLanguage: "html",
withLineNumbers: true,
code: `<head>
<!-- Feuille de style CSS -->
<link rel="stylesheet" href="/styles/styles.css">
<!-- Script JavaScript -->
<script src="/scripts/app.js"></script>
</head>`,
},
];
export default { export default {
htmlBasicHead: () => <Snippet snippets={htmlBasicHeadSnippets} />, htmlBasicHead: () => <Snippet snippets={htmlBasicHeadSnippets} />,
htmlStylesAndScripts: () => (
<Snippet snippets={htmlStylesAndScriptsSnippets} />
),
}; };