Structure du document

Les documents HTML comprennent 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 le titre du document ne soit pas visible par le visiteur voyant, il est essentiel que votre site fonctionne. Il contient toutes les méta-informations, y compris celles concernant les moteurs de recherche et les résultats des réseaux sociaux, les icônes de 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 découvrirez les composants qui, bien qu'ils ne soient pas visibles, sont présents sur presque toutes les pages Web.

Pour créer le site MachineLearningWorkshop.com (MLW), commencez par inclure les éléments qui doivent être considérés comme essentiels pour chaque page Web: le type de document, la langue utilisée dans son contenu, le jeu de caractères et, bien entendu, le titre ou le nom du site ou de l'application.

Ajouter à chaque document HTML

Plusieurs fonctionnalités doivent être considérées comme essentielles pour chaque page Web. Les navigateurs afficheront quand même le contenu si ces éléments sont manquants, mais les intégreront. Définitivement.

<!DOCTYPE html>

La première chose dans tout document HTML est le préambule. Pour le HTML, tout ce dont vous avez besoin est <!DOCTYPE html>. Cela peut ressembler à un élément HTML, mais ce n'est pas le cas. Il s'agit d'un type spécial de nœud appelé "doctype". Le doctype indique au navigateur d'utiliser le mode standard. Si cette valeur est omise, les navigateurs utilisent un autre mode d'affichage, appelé mode quirks. Inclure le doctype permet d'éviter les quirks.

<html>

L'élément <html> est l'élément racine d'un document HTML. Il s'agit du parent de <head> et de <body>. Il contient tout le contenu du document HTML à l'exception du doctype. Si cet attribut est omis, il sera implicite, mais il est important de l'inclure, car il s'agit de l'élément sur lequel la langue du contenu du document est déclarée.

Langue du contenu

L'attribut de langue lang ajouté à la balise <html> définit la langue principale du document. La valeur de l'attribut lang correspond à un code de langue ISO à deux ou trois lettres suivi de la région. La région est facultative, mais recommandée, car la langue peut varier considérablement d'une région à l'autre. Par exemple, le français est très différent au Canada (fr-CA) et au Burkina Faso (fr-BF). Cette déclaration de langue permet aux lecteurs d'écran, aux moteurs de recherche et aux services de traduction de connaître la langue du document.

L'attribut lang n'est pas limité à la balise <html>. Si la page contient du texte dans une langue différente de celle du document principal, l'attribut lang doit être utilisé pour identifier les exceptions à cette langue. Tout comme lorsqu'il est inclus dans l'en-tête, l'attribut lang dans le corps n'a aucun effet visuel. Il ajoute uniquement de la sémantique, ce qui permet aux technologies d'assistance et aux services automatisés de connaître la langue du contenu concerné.

En plus de définir la langue du document et des exceptions à cette langue de base, l'attribut peut être utilisé dans des sélecteurs CSS. <span lang="fr-fr">Ceci n'est pas une pipe.</span> peut être ciblé à l'aide des sélecteurs d'attribut et de langue [lang|="fr"] et :lang(fr).

Imbriqués 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>

L'en-tête <head>, ou l'en-tête des métadonnées du document, contient toutes les métadonnées d'un site ou d'une application. Le corps comporte le contenu visible. Le reste de cette section se concentre sur les composants imbriqués dans les <head></head> d'ouverture et de fermeture.

Composants requis dans <head>

Les métadonnées du document, y compris le titre du document, le jeu de caractères, les paramètres de 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>. Même si vous n'avez pas besoin de toutes ces fonctionnalités, incluez toujours les paramètres du jeu de caractères, du titre et de la fenêtre d'affichage.

Codage des caractères

Le tout premier élément du fichier <head> doit être la déclaration d'encodage des caractères charset. Il est placé avant le titre afin que le navigateur puisse afficher les caractères du titre et tous les caractères du reste du document.

Dans la plupart des navigateurs, l'encodage par défaut est windows-1252, en fonction des paramètres régionaux. Vous devez toutefois utiliser UTF-8, car il permet d'encoder tous les caractères, y compris ceux dont vous ne saviez même pas qu'ils étaient, sur un à quatre octets. Il s'agit également du type de codage requis par HTML5.

Pour définir l'encodage des caractères sur UTF-8, ajoutez:

<meta charset="utf-8" />

En déclarant UTF-8 (non sensible à la casse), vous pouvez même inclure des emoji dans le titre (mais ne l'utilisez pas).

L'encodage des caractères s'applique à tous les éléments du document, y compris <style> et <script>. Cette petite déclaration signifie que vous pouvez inclure des emoji dans les noms de classe et dans l'API selectorAPI (encore une fois, ne l'utilisez pas). Si vous utilisez des emoji, veillez à les utiliser de façon à améliorer la facilité d'utilisation sans nuire à l'accessibilité.

Titre du document

Votre page d'accueil et toutes les pages supplémentaires doivent avoir un titre unique. Le contenu du titre du document, le texte situé 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 des balises <meta>, dans les fiches de réseaux sociaux.

<title>Machine Learning Workshop</title>

Métadonnées de la fenêtre d'affichage

L'autre balise Meta à considérer comme essentielle est la balise Meta viewport. Elle contribue à la réactivité du site et permet au contenu de s'afficher correctement par défaut, quelle que soit la largeur de la fenêtre d'affichage. Bien que la balise Meta pour la fenêtre d'affichage existe depuis juin 2007, elle n'est que documentée dans une spécification lors de la sortie du premier iPhone. Comme cela permet de contrôler la taille et l'échelle d'une fenêtre d'affichage, et d'éviter que le contenu du site ne soit réduit pour s'adapter à un site de 960 pixels sur un écran de 320 pixels, il est vivement recommandé.

<meta name="viewport" content="width=device-width" />

Le code précédent signifie « rendre le site responsif, en commençant par faire de la largeur du contenu la largeur de l'écran ». En plus de width, vous pouvez définir le zoom et l'évolutivité, mais ils utilisent tous deux des valeurs accessibles par défaut. Si vous souhaitez être explicite, incluez les informations suivantes:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

Viewport fait partie de l'audit d'accessibilité Lighthouse. Votre site sera validé s'il est évolutif et si aucune taille maximale n'est définie.

Jusqu'ici, la présentation de notre fichier HTML est la suivante:

<!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>

<head> offre bien d'autres possibilités. Toutes les métadonnées, en fait. La plupart des éléments que vous trouverez dans <head> sont abordés ici, tout en enregistrant de nombreuses options <meta> pour le chapitre suivant.

Vous avez vu le jeu de caractères méta et le titre du document, mais il y a beaucoup plus de métadonnées en dehors des balises <meta> qui doivent être incluses.

CSS

<head> vous permet d'ajouter des styles à 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 du code 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 du code CSS directement dans l'en-tête de votre document dans les balises d'ouverture et de fermeture <style>.

Il est préférable d'utiliser la balise <link> pour inclure des feuilles de style. L'association d'une seule feuille de style externe ou de plusieurs feuilles de style externes est bénéfique à la fois pour l'expérience des développeurs et les performances du site: vous gérez le CSS de manière centralisée au lieu de le répartir partout. De plus, les navigateurs peuvent mettre en cache le fichier externe, ce qui signifie qu'il n'est pas nécessaire de le télécharger à nouveau à chaque navigation sur les pages.

La syntaxe est <link rel="stylesheet" href="styles.css">, où styles.css est l'URL de votre feuille de style. Vous verrez souvent type="text/css". Ce n'est pas nécessaire. Si vous incluez des styles dans un format autre que CSS, l'attribut type est nécessaire. Toutefois, comme il n'existe aucun autre type, cet attribut n'est pas nécessaire. L'attribut rel définit la relation: dans ce cas, stylesheet. Dans le cas contraire, votre CSS ne sera pas associé.

Vous découvrirez bientôt d'autres valeurs rel, mais voyons d'abord d'autres façons d'inclure le CSS.

Si vous souhaitez que vos styles de feuilles de style externes se trouvent dans un calque cascade, mais que vous n'êtes pas autorisé à modifier le fichier CSS pour y insérer les informations du calque, vous pouvez 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 dans la <style> ou la feuille de style associée, en dehors de la déclaration de jeu de caractères.

Bien que les couches en cascade soient encore assez récentes et que vous ne remarquiez peut-être pas la @import dans une <style> "head", vous verrez souvent des propriétés personnalisées déclarées dans un bloc de style "head" :

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

Les styles, via <link> ou <style>, ou les deux, doivent figurer dans l'en-tête. Ils fonctionneront s'ils sont inclus dans le corps du document, mais vous devez les intégrer dans l'en-tête pour des raisons de performances. Cela peut sembler contre-intuitif, car vous pensez peut-être que vous voulez que votre contenu se charge en premier, mais que vous voulez en fait que le navigateur sache comment afficher le contenu une fois chargé. L'ajout de styles permet d'éviter le repeindre inutile qui se produit si un élément est stylisé après son premier rendu.

Le seul moyen d'inclure des styles que vous n'utiliserez jamais dans le <head> de votre document est la suivante: les styles intégrés. Vous n'utiliserez probablement jamais de styles intégrés dans l'en-tête, car les feuilles de style des user-agents le masquent par défaut. Toutefois, si vous souhaitez créer un éditeur CSS sans JavaScript, par exemple, afin de pouvoir tester les éléments personnalisés de votre page, vous pouvez rendre l'en-tête visible avec display: block, puis tout masquer, puis, à l'aide d'un attribut style intégré, rendre visible un bloc de style modifiable par le contenu.

<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 sur le <style>, mais il est beaucoup plus amusant de styliser votre <style> dans votre style. Je m'enfuis.

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. Actuellement, 25 valeurs sont disponibles pour l'attribut rel. Elles peuvent être utilisées avec <link>, <a> et <area>, ou <form>. Quelques-unes peuvent être utilisées avec toutes les valeurs. Il est préférable d'inclure celles qui concernent les méta-informations dans l'en-tête et celles qui concernent les performances dans le <body>.

Vous allez maintenant inclure trois autres types dans votre en-tête: icon, alternate et canonical. (Vous inclurez un quatrième type, rel="manifest", dans le module suivant.)

Favicon

Utilisez la balise <link> avec la paire attribut/valeur rel="icon" pour identifier le favicon à utiliser pour votre document. Un favicon est une très petite icône qui s'affiche dans l'onglet du navigateur, généralement à gauche du titre du document. Lorsque vous ouvrez trop d'onglets, ils sont réduits et le titre peut disparaître complètement, mais l'icône reste toujours visible. La plupart des favicons sont des logos d'entreprises ou d'applications.

Si vous ne déclarez pas de favicon, le navigateur recherche un fichier nommé favicon.ico dans le répertoire de premier niveau (dossier racine du site Web). Avec <link>, vous pouvez utiliser un nom et un emplacement de fichier différents:

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

Le code précédent indique "Utilisez mlwicon.png comme icône pour les cas où une taille de 16, 32 ou 48 pixels est logique." 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 16, 32, 48 ou plus dans cette séquence géométrique, l'unité en pixels est omise, et 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 spéciaux et non standards pour le navigateur Safari: apple-touch-icon pour les appareils iOS et mask-icon pour les onglets épinglés sous macOS. apple-touch-icon n'est appliqué que lorsque l'utilisateur ajoute un site à son écran d'accueil: vous pouvez spécifier plusieurs icônes avec des sizes différentes pour différents appareils. mask-icon ne sera utilisé que si l'utilisateur épingle l'onglet dans Safari pour ordinateur: l'icône elle-même doit être un SVG monochrome et l'attribut color remplit l'icône avec la couleur requise.

Bien que vous puissiez utiliser <link> pour définir une image complètement différente sur chaque page, voire à chaque chargement de page, ne le faites pas. Pour garantir la cohérence et une bonne expérience utilisateur, n'utilisez qu'une seule image. Twitter utilise l'oiseau bleu: lorsque vous le voyez dans un onglet de navigateur, vous savez que cet onglet ouvre une page Twitter sans cliquer dessus. Google utilise des favicons différents pour chacune de ses applications: une icône de courrier, une icône d'agenda, par exemple. Cependant, toutes les icônes Google utilisent le même jeu de couleurs. Encore une fois, vous savez exactement à quoi correspond le contenu d'un onglet ouvert grâce à l'icône.

Les autres versions du site

Nous utilisons la valeur alternate de l'attribut rel pour identifier les traductions, ou d'autres représentations, du site.

Imaginons que nous ayons traduit des versions du site 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.

L'autre valeur ne concerne pas seulement les traductions. Par exemple, l'attribut type peut définir l'URI de substitution d'un flux RSS lorsque l'attribut type est défini sur application/rss+xml ou application/atom+xml. Ajoutons un lien vers une version fictive du site PDF.

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

Si la valeur rel est alternate stylesheet, elle définit une autre feuille de style et l'attribut title doit être défini en lui attribuant un nom.

Canonical

Si vous créez plusieurs traductions ou versions de l'atelier de machine learning, les moteurs de recherche risquent de ne pas savoir quelle version fait autorité. Pour ce faire, utilisez rel="canonical" afin d'identifier l'URL préférée du site ou de l'application.

Incluez l'URL canonique sur toutes les pages traduites et sur la page d'accueil, en indiquant notre URL préférée:

<link rel="canonical" href="https://www.machinelearning.com" />

Le lien canonique rel="canonical" est généralement utilisé pour des publications croisées avec des publications et des plates-formes 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> permet d'inclure des scripts. Le type par défaut est JavaScript. Si vous incluez un autre langage de script, incluez l'attribut type avec le type MIME, ou type="module" s'il s'agit d'un module JavaScript. Seuls les modules JavaScript et JavaScript sont analysés et exécutés.

Les tags <script> permettent d'encapsuler votre code ou de télécharger un fichier externe. Dans MLW, il n'y a pas de fichier de script externe, car contrairement aux idées reçues, un site Web fonctionnel n'a pas besoin de JavaScript. Il s'agit d'un parcours de formation en HTML, et non d'un parcours JavaScript.

Par la suite, vous allez inclure du code JavaScript pour créer un easter egg:

<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 ayant l'ID switch. Avec JavaScript, vous ne souhaitez pas faire référence à un élément antérieur à celui-ci. Comme il n'existe pas encore, nous ne l'inclurons pas encore. Lorsque nous ajoutons l'élément d'interrupteur d'éclairage, nous ajoutons <script> en bas de <body> plutôt que dans <head>. Pourquoi ? Deux raisons. Nous voulons nous assurer que les éléments existent avant que le script qui les référence soit rencontré, car ce script n'est pas basé sur un événement DOMContentLoaded. En outre, JavaScript ne se contente pas de bloquer le rendu. De plus, le navigateur cesse de télécharger tous les éléments lorsque les scripts sont téléchargés et ne recommence pas à télécharger les autres éléments tant que l'exécution de JavaScript n'est pas terminée. C'est pourquoi les requêtes JavaScript se trouvent souvent à 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, l'affichage HTML n'est pas bloqué pendant le téléchargement et le code JavaScript ne s'exécute qu'une fois l'affichage du document terminé. Avec async, l'affichage n'est pas non plus bloqué pendant le téléchargement. Toutefois, une fois le téléchargement du script terminé, l'affichage est mis en pause pendant l'exécution du code JavaScript.

en cas d&#39;utilisation de &quot;async&quot; et &quot;defer&quot;.

Pour inclure le code JavaScript de MLW dans un fichier externe, vous pouvez écrire:

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

L'ajout de l'attribut defer reporte 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 ne se trouve que dans le <head>. (pas très souvent utilisé). L'élément <base> permet de définir une cible et une URL de lien par défaut. L'attribut href définit l'URL de base de 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. Par défaut, _self ouvre les fichiers associés dans le même contexte que le document actuel. Les autres options incluent _blank, qui ouvre tous les liens dans une nouvelle fenêtre, le _parent du contenu actuel, qui peut être identique à lui-même si l'ouverture n'est pas un iFrame, ou _top, qui se trouve dans le même onglet du navigateur, mais qui sort de n'importe quel contexte pour occuper l'intégralité de l'onglet.

La plupart des développeurs ajoutent l'attribut target aux quelques liens (le cas échéant) qu'ils souhaitent ouvrir dans une nouvelle fenêtre sur les liens ou le formulaire eux-mêmes, au lieu d'utiliser <base>.

<base target="_top" href="https://machinelearningworkshop.com" />

Si notre site Web est imbriqué dans un iFrame sur un site tel que Yummly, l'inclusion de l'élément <base> signifie qu'un utilisateur clique sur un lien de notre document. Dans ce cas, le lien sort de l'iFrame et occupe la totalité de 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">, déclenchant ainsi une requête HTTP vers l'URL de base avec le fragment associé.

Autres points à noter concernant <base>: un document ne peut contenir qu'un seul élément <base>, et celui-ci doit être placé avant toute URL relative, y compris les éventuelles références à un script ou à une 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" src="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

Notez que le script est entouré de crochets, de tirets et d'un bang. C'est ainsi que vous commentez le code HTML. Nous laissons le script commenté jusqu'à ce que le contenu réel soit présent sur la page. Aucun élément compris entre <!-- et --> n'est visible ni analysé. Les commentaires HTML peuvent être placés n'importe où sur la page, y compris dans l'en-tête ou le corps, à l'exception des scripts et des blocs de style, où vous devez utiliser respectivement les commentaires JavaScript et CSS.

Vous avez découvert les principes de base de <head>, mais vous souhaitez en savoir plus. Dans les sections suivantes, nous allons vous présenter les balises Meta et vous expliquer comment contrôler ce qui s'affiche lorsque votre site Web est associé à un lien sur les réseaux sociaux.

Testez vos connaissances

Testez vos connaissances sur la structure des documents.

Comment identifiez-vous la langue du document ?

Ajoutez l'attribut language à la balise HTML.
Réessayez.
Ajoutez l'attribut lang à la balise HTML.
Bonne réponse !
Add the <lang> dans <head>.
Réessayez.

Sélectionnez les éléments qui peuvent être inclus dans le <head>.

<p>
Réessayez.
<title>
Bonne réponse !
<meta>
Bonne réponse !