Les documents HTML incluent une déclaration de type de document et l'élément racine <html>. L'en-tête et le corps du document sont imbriqués dans l'élément <html>.
Bien que l'en-tête du document ne soit pas visible en dehors du code, il est essentiel au bon fonctionnement d'un site. Il contient toutes les métadonnées, y compris les informations pour les moteurs de recherche et les résultats des réseaux sociaux, les icônes pour l'onglet du navigateur et le raccourci de l'écran d'accueil mobile, ainsi que le comportement et la présentation de votre contenu. Dans cette section, vous allez découvrir les composants qui, bien qu'invisibles, sont présents sur presque toutes les pages Web.
Pour créer le site MachineLearningWorkshop.com (MLW), commencez par inclure les composants qui doivent être considérés comme essentiels pour chaque page Web : le type de document, la langue humaine du contenu, le jeu de caractères et, bien sûr, le titre ou le nom du site ou de l'application.
Ajouter à chaque document HTML
Plusieurs éléments sont essentiels pour chaque page Web. Les navigateurs affichent le contenu si ces éléments sont manquants, mais vous devez les inclure.
<!DOCTYPE html>
La première chose dans tout document HTML est le préambule. Pour le HTML, vous n'avez besoin que de <!DOCTYPE html>. Cela ressemble à un élément HTML, mais il s'agit en fait d'un nœud spécial appelé doctype. Le doctype indique au navigateur d'utiliser le mode standard.
Lorsqu'il est omis, les navigateurs utilisent un mode d'affichage différent appelé mode Quirks.
L'inclusion de l'attribut doctype permet d'éviter le mode quirks.
<html>
L'élément <html> est l'élément racine d'un document HTML. Il s'agit du parent des éléments <head> et <body>, qui contient tout ce qui se trouve dans le document HTML, à l'exception du doctype. Si elle est omise, la langue est implicite, mais vous devez l'inclure pour déclarer la langue du document.
Langue du contenu
L'attribut lang de la balise <html> définit la langue principale du document. La valeur est un code de langue ISO suivi d'une région facultative.
Par exemple, le français au Canada est fr-CA, tandis qu'au Burkina Faso, il est fr-BF. Cette déclaration aide les lecteurs d'écran, les moteurs de recherche et les services de traduction à identifier la langue du document.
Vous pouvez utiliser l'attribut lang sur d'autres balises pour identifier les exceptions à la langue principale du document. Comme dans l'en-tête, l'attribut lang dans le corps n'a aucun effet visuel. Il ajoute de la sémantique, ce qui permet aux technologies d'assistance et aux services automatisés d'identifier la langue d'un contenu spécifique.
En plus de définir la langue du document et les exceptions à cette langue de base, l'attribut peut être utilisé dans les sélecteurs CSS.
<span lang="fr-fr">Ceci n'est pas une pipe.</span> peut être ciblé avec les sélecteurs d'attributs et de langue
[lang|="fr"]
et :lang(fr).
<head>
Entre les balises d'ouverture et de fermeture <html>, nous trouvons les deux enfants :
<head> et <body> :
<!DOCTYPE html>
<html lang="en-US">
<head>
</head>
<body>
</body>
</html>
<head> contient les métadonnées d'un site ou d'une application, tandis que <body> contient le contenu visible. Le reste de cette section se concentre sur les composants imbriqués dans l'élément <head>.
Composants requis dans <head>
Les métadonnées du document, y compris le titre, le jeu de caractères, les paramètres de la fenêtre d'affichage, la description, l'URL de base, les liens vers les feuilles de style et les icônes, se trouvent dans l'élément <head>. Vous n'aurez peut-être pas besoin de toutes ces fonctionnalités, mais incluez toujours les paramètres de jeu de caractères, de titre et de fenêtre d'affichage.
Codage des caractères
Le tout premier élément de <head> doit être la déclaration d'encodage des caractères charset. Il est placé avant le titre pour s'assurer que le navigateur peut afficher les caractères de ce titre et tous les caractères du reste du document.
L'encodage par défaut de la plupart des navigateurs est windows-1252, selon les paramètres régionaux. Toutefois, vous devez utiliser UTF-8, qui permet l'encodage de tous les caractères sur un à quatre octets.
Pour définir l'encodage des caractères sur UTF-8, incluez :
<meta charset="utf-8" />
En déclarant UTF-8 (sans tenir compte de la casse), vous pouvez même inclure des emoji dans votre titre.
L'encodage des caractères est hérité dans tout le document, y compris <style> et <script>. Cette petite déclaration signifie que vous pouvez inclure des emoji dans les noms de classe et le selectorAPI. Si vous utilisez des emoji, veillez à ce qu'ils améliorent l'expérience utilisateur sans nuire à l'accessibilité.
Titre du document
Chaque page, y compris la page d'accueil et toutes les pages supplémentaires, doit avoir un titre unique.
Le contenu du titre du document, le texte entre les balises d'ouverture et de fermeture <title>, s'affiche dans l'onglet du navigateur, dans la liste des fenêtres ouvertes, dans l'historique, dans les résultats de recherche et, sauf s'il est redéfini avec les balises <meta>, dans les cartes de réseaux sociaux.
<title>Machine Learning Workshop</title>
Métadonnées de la fenêtre d'affichage
La balise Meta viewport est essentielle pour la réactivité du site. Elle permet de s'assurer que le contenu s'affiche correctement, quelle que soit la largeur de la fenêtre d'affichage. Bien que la balise Meta viewport existe depuis 2007, elle n'a été documentée dans une spécification que récemment. Il contrôle la taille et l'échelle de la fenêtre d'affichage, ce qui empêche le contenu de se réduire pour s'adapter aux écrans plus petits.
<meta name="viewport" content="width=device-width" />
Le code précédent signifie "rendre le site responsif, en commençant par faire en sorte que la largeur du contenu soit égale à la largeur de l'écran". En plus de width, vous pouvez définir le zoom et l'évolutivité, mais ils sont tous deux définis par défaut sur des valeurs accessibles. Si vous souhaitez être explicite, incluez les éléments suivants :
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
La fenêtre d'affichage fait partie de l'audit d'accessibilité Lighthouse. Votre site sera validé s'il est évolutif et qu'aucune taille maximale n'est définie.
Jusqu'à présent, le plan de notre fichier HTML est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
</body>
</html>
Autres contenus <head>
Le <head> est bien plus complexe. Toutes les métadonnées, en fait.
La plupart des éléments que vous trouverez dans <head> sont abordés dans ce module, mais nous vous en présenterons d'autres dans le module sur les métadonnées.
Vous avez vu le jeu de métacaractères et le titre du document, mais il existe de nombreuses autres métadonnées en dehors des balises <meta> qui doivent être incluses.
CSS
C'est dans <head> que vous devez inclure les styles pour votre code HTML. Il existe un parcours de formation dédié au CSS si vous souhaitez en savoir plus sur les styles, mais vous devez savoir comment les inclure dans vos documents HTML.
Il existe trois façons d'inclure le CSS : <link>, <style> et l'attribut style.
Les deux principales méthodes pour inclure des styles dans votre fichier HTML consistent à inclure une ressource externe à l'aide d'un élément <link> avec l'attribut rel défini sur stylesheet, ou à inclure le CSS directement dans l'en-tête de votre document entre les balises d'ouverture et de fermeture <style>.
La balise <link> est la méthode recommandée pour inclure des feuilles de style. Associer une ou plusieurs feuilles de style externes est bénéfique à la fois pour l'expérience des développeurs et pour les performances du site. Vous pouvez ainsi gérer le CSS en un seul endroit au lieu de le répartir partout. De plus, les navigateurs peuvent mettre en cache le fichier externe, ce qui signifie qu'il n'a pas besoin d'être téléchargé à nouveau à chaque navigation sur une page.
La syntaxe est <link rel="stylesheet" href="styles.css">, où styles.css est le nom de fichier et l'emplacement relatif de votre feuille de style. Vous pouvez voir l'attribut type="text/css", mais il n'est pas obligatoire. L'attribut rel définit la relation, qui est stylesheet dans ce cas. Si vous omettez l'attribut rel, votre CSS ne sera pas associé.
Vous découvrirez d'autres valeurs rel dans un instant, mais vous allez d'abord apprendre d'autres façons d'inclure du CSS.
Si vous souhaitez que les styles de votre feuille de style externe se trouvent dans un calque en cascade, mais que vous n'avez pas accès à la modification du fichier CSS, vous devez inclure le CSS avec @import dans un <style> :
<style>
@import "styles.css" layer(firstLayer);
</style>
Lorsque vous utilisez @import pour importer des feuilles de style dans votre document, éventuellement dans des calques en cascade, les instructions @import doivent être les premières instructions de votre <style> ou de la feuille de style associée, en dehors de la déclaration du jeu de caractères.
Les calques en cascade sont encore assez récents. Vous ne verrez peut-être pas le @import dans un <style> d'en-tête, mais vous verrez souvent des propriétés personnalisées déclarées dans un bloc de style d'en-tête :
<style>
:root {
--theme-color: #226DAA;
}
</style>
Les styles ajoutés avec <link>, <style> ou les deux doivent être placés dans l'en-tête. Bien qu'ils fonctionnent lorsqu'ils sont inclus dans le corps du document, vous devez ajouter des styles dans l'en-tête pour des raisons de performances. Cela peut sembler contre-intuitif, car vous pouvez penser que vous voulez que votre contenu se charge en premier. Toutefois, il est préférable que le navigateur sache comment afficher le contenu lorsqu'il est chargé. L'ajout de styles en premier empêche le repeint inutile qui se produit si un élément est stylisé après son premier rendu.
Il existe une façon d'inclure des styles que vous n'utiliserez jamais dans le <head> de votre document : les styles intégrés. Vous n'utiliserez probablement jamais de styles intégrés dans l'élément "head" (tête) car les feuilles de style des agents utilisateurs masquent l'élément "head" par défaut. Toutefois, si vous souhaitez créer un éditeur CSS sans JavaScript, par exemple pour tester les éléments personnalisés de votre page, vous pouvez rendre l'élément "head" visible avec display: block, puis masquer tout ce qui se trouve dans l'élément "head". Ensuite, avec un attribut style intégré, rendez un bloc de style modifiable visible.
<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
head { display: block; }
head * { display: none; }
:root {
--theme-color: #226DAA;
}
</style>
Vous pouvez ajouter des styles intégrés à l'élément <style>.
Autres utilisations de l'élément <link>
L'élément link permet de créer des relations entre le document HTML et les ressources externes. Certaines de ces ressources peuvent être téléchargées, d'autres sont informatives. Le type de relation est défini par la valeur de l'attribut rel. 25 valeurs sont disponibles pour l'attribut rel. Elles peuvent être utilisées avec <link>, <a> et <area>, ou <form>, et certaines peuvent être utilisées avec tous les attributs. Il est préférable d'inclure les informations liées aux métadonnées dans l'en-tête et celles liées aux performances dans <body>.
Vous allez maintenant inclure trois autres types dans votre en-tête : icon, alternate et canonical. Vous ajouterez un quatrième type, rel="manifest", dans le prochain module.
Favicon
Utilisez la balise <link> avec rel="icon" pour identifier la favicon de votre document. Une favicon est une petite icône qui s'affiche dans l'onglet du navigateur, généralement à gauche du titre du document. Lorsque les onglets rétrécissent, le titre peut disparaître, mais l'icône reste visible. La plupart des favicons sont des logos d'entreprise ou d'application.
Si vous ne déclarez pas de favicon, le navigateur recherchera un fichier nommé favicon.ico dans le répertoire de premier niveau (dossier racine du site Web). Avec <link>, vous pouvez utiliser un nom de fichier et un emplacement différents :
<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />
Le code précédent indique "utiliser mlwicon.png comme icône pour les scénarios où une taille de 16 px, 32 px ou 48 px est appropriée". L'attribut "sizes" accepte la valeur any pour les icônes évolutives ou une liste de valeurs widthXheight carrées séparées par un espace. Lorsque les valeurs de largeur et de hauteur sont de 16, 32, 48 ou plus dans cette séquence géométrique, l'unité de pixel est omise et le X n'est pas sensible à la casse.
<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />
Il existe deux types d'icônes non standards pour le navigateur Safari :
apple-touch-icon pour les appareils iOS et mask-icon pour les onglets épinglés sur macOS.
apple-touch-icon n'est appliqué que lorsque l'utilisateur ajoute un site à l'écran d'accueil : vous pouvez spécifier plusieurs icônes avec différents sizes pour différents appareils.
mask-icon ne sera utilisé que si l'utilisateur épingle l'onglet dans Safari sur ordinateur : l'icône elle-même doit être un SVG monochrome, et l'attribut color remplit l'icône avec la couleur nécessaire.
Bien que vous puissiez utiliser <link> pour définir une image complètement différente sur chaque page ou même à chaque chargement de page, ne le faites pas. Pour assurer la cohérence et une bonne expérience utilisateur, utilisez une seule image. Google utilise différentes favicons pour chacune de ses applications (une icône de messagerie, une icône d'agenda, par exemple). Mais toutes les icônes Google utilisent le même jeu de couleurs. L'icône vous permet de savoir exactement ce que contient un onglet ouvert.
Autres versions du site
Utilisez la valeur alternate de l'attribut rel pour identifier les traductions ou les représentations alternatives du site.
Imaginons que nous ayons des versions du site traduites en français et en portugais brésilien :
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
Lorsque vous utilisez alternate pour une traduction, l'attribut hreflang doit être défini.
La valeur alternative ne sert pas uniquement aux traductions. Par exemple, l'attribut type peut définir l'URI alternatif d'un flux RSS lorsque l'attribut type est défini sur application/rss+xml ou application/atom+xml.
Lien vers une version PDF fictive du site :
<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />
Si la valeur rel est alternate stylesheet, elle définit une feuille de style alternative et l'attribut title doit être défini pour donner un nom à ce style alternatif.
Canonical
Si vous créez plusieurs traductions ou versions de l'atelier sur le machine learning, les moteurs de recherche risquent de ne pas identifier la source faisant autorité. Utilisez rel="canonical" pour identifier l'URL préférée du site ou de l'application.
Incluez l'URL canonique sur toutes vos pages traduites et sur la page d'accueil, en indiquant l'URL de votre choix :
<link rel="canonical" href="https://www.machinelearning.com" />
Le lien canonique rel="canonical" est le plus souvent utilisé pour le cross-posting avec des plates-formes de publication et de blogs afin de créditer la source d'origine. Lorsqu'un site syndique du contenu, il doit inclure le lien canonique vers la source d'origine.
Scripts
La balise <script> inclut des scripts. Le type par défaut est JavaScript. Si vous utilisez un autre langage de script, incluez l'attribut type avec le type MIME ou type="module" pour un module JavaScript.
Seuls les modules JavaScript et JavaScript sont analysés et exécutés.
Les balises <script> peuvent être utilisées pour encapsuler votre code ou pour télécharger un fichier externe. Dans MLW, il n'y a pas de fichier de script externe, car contrairement à ce que l'on pense, vous n'avez pas besoin de JavaScript pour un site Web fonctionnel. Il s'agit d'un parcours de formation HTML, et non JavaScript.
Vous allez inclure un petit bout de code JavaScript pour créer un Easter egg plus tard :
<script>
document.getElementById('switch').addEventListener('click', function() {
document.body.classList.toggle('black');
});
</script>
Cet extrait crée un gestionnaire d'événements pour un élément dont l'ID est switch.
Avec JavaScript, vous devez éviter de faire référence à un élément avant qu'il n'existe. Comme switch n'existe pas encore, nous n'inclurons pas encore le gestionnaire d'événements.
Lorsque nous ajouterons l'élément de l'interrupteur, nous ajouterons <script> en bas de <body> plutôt que dans <head>. Pourquoi ? Pour deux raisons. Nous voulons nous assurer que les éléments existent avant que le script qui les référence ne soit rencontré, car nous ne basons pas ce script sur un événement DOMContentLoaded.
De plus, JavaScript n'est pas seulement bloquant pour le rendu, mais le navigateur arrête de télécharger tous les éléments lorsque les scripts sont téléchargés et ne reprend le téléchargement des autres éléments qu'une fois l'exécution de JavaScript terminée. C'est pourquoi vous trouverez souvent des requêtes JavaScript à la fin du document plutôt que dans l'en-tête.
Deux attributs peuvent réduire le caractère bloquant du téléchargement et de l'exécution de JavaScript : defer et async. Avec defer, le rendu HTML n'est pas bloqué pendant le téléchargement, et le code JavaScript ne s'exécute qu'une fois le rendu du document terminé. Avec async, le rendu n'est pas bloqué pendant le téléchargement non plus, mais une fois le script téléchargé, le rendu est mis en pause pendant l'exécution de JavaScript.
async. Remarque : Les scripts de module chargés avec <script type="module"> ont defer activé par défaut.
Pour inclure le JavaScript de MLW dans un fichier externe, vous pouvez écrire :
<script src="js/switch.js" defer></script>
L'ajout de l'attribut defer diffère l'exécution du script jusqu'à ce que tout soit rendu, ce qui empêche le script de nuire aux performances. Les attributs async et defer ne sont valides que sur les scripts externes.
Couches
Un autre élément n'est disponible que dans <head>.. L'élément <base>, qui est rarement utilisé, permet de définir une URL de lien et une cible par défaut. L'attribut href définit l'URL de base pour tous les liens relatifs.
L'attribut target, valide sur <base> ainsi que sur les liens et les formulaires, définit l'endroit où ces liens doivent s'ouvrir. La valeur par défaut de _self ouvre les fichiers associés dans le même contexte que le document actuel. Les autres options incluent _blank, qui ouvre chaque lien dans une nouvelle fenêtre, le _parent du contenu actuel, qui peut être identique à self si l'ouvreur n'est pas un iframe, ou _top, qui se trouve dans le même onglet de navigateur, mais qui est sorti de tout contexte pour occuper l'intégralité de l'onglet.
La plupart des développeurs ajoutent l'attribut target aux liens (le cas échéant) qu'ils souhaitent ouvrir dans une nouvelle fenêtre sur les liens ou le formulaire eux-mêmes, plutôt que d'utiliser <base>.
<base target="_top" href="https://machinelearningworkshop.com" />
Si notre site Web se trouvait imbriqué dans un iFrame sur un site comme Yummly, l'inclusion de l'élément <base> signifierait que lorsqu'un utilisateur clique sur un lien dans notre document, le lien se charge en dehors de l'iFrame, occupant toute la fenêtre du navigateur.
L'un des inconvénients de cet élément est que les liens d'ancrage sont résolus avec <base>. <base> convertit efficacement le lien <a href="#ref"> en <a target="_top" href="https://machinelearningworkshop.com#ref">, ce qui déclenche une requête HTTP vers l'URL de base avec le fragment joint.
Quelques informations supplémentaires sur <base> :
- Il ne peut y avoir qu'un seul élément
<base>dans un document. - Il doit être placé avant toute URL relative, y compris les éventuelles références de script ou de feuille de style.
Le code se présente maintenant comme suit :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Commentaires HTML
Le script est placé entre des chevrons, des tirets et un point d'exclamation, ce qui correspond à la façon de commenter le code HTML. Tout ce qui se trouve entre <!-- et --> n'est pas visible ni analysé. Vous pouvez placer des commentaires HTML n'importe où sur la page, sauf dans les blocs de script ou de style, où vous devez utiliser des commentaires JavaScript et CSS.
Vous avez vu les bases de ce qui se trouve dans <head>, mais vous souhaitez aller au-delà. Dans les sections suivantes, nous allons découvrir les balises Meta et comment contrôler ce qui s'affiche lorsque votre site Web est associé à un réseau social.
Vérifiez vos connaissances
Testez vos connaissances sur la structure des documents.
Comment identifier la langue du document ?
language à la balise HTML.lang à la balise HTML.Add the <lang> à <head>.Sélectionnez les éléments pouvant être inclus dans <head>.
<p><title><meta>