Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Structure du document

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éta-informations, y compris celles concernant les résultats des moteurs de recherche et des réseaux sociaux, les icônes de l'onglet du navigateur et du 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 que non visibles, 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>`

Le premier élément de 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 de rendu différent appelé mode quirks. L'inclusion du 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 de <head> et <body>, qui contient tout le contenu du document HTML autre que le doctype. S'il est omis, la langue est implicite, mais vous devez l'inclure pour déclarer la langue du document.

Langue du contenu

L'attribut lang dans 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 s'agit de fr-BF. Cette déclaration permet aux lecteurs d'écran, aux moteurs de recherche et aux services de traduction d'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, de sorte que les technologies d'assistance et les services automatisés peuvent 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'attribut 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 du document, le jeu de caractères, les paramètres de la fenêtre d'affichage , la description, l'URL de base, les liens vers la feuille de style et les icônes, se trouvent dans l'élément <head>. Bien que vous n'ayez peut-être pas besoin de toutes ces fonctionnalités, incluez toujours le jeu de caractères, le titre et les paramètres de la fenêtre d'affichage.

Codage des caractères

Le tout premier élément de <head> doit être la déclaration d'encodage de caractères charset. Il précède 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 dans la plupart des navigateurs est windows-1252, en fonction des 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, même <style> et <script>. Cette petite déclaration signifie que vous pouvez inclure des emoji dans les noms de classe et selectorAPI. Si vous utilisez des emoji, veillez à les utiliser de manière à améliorer l'ergonomie sans nuire à l'accessibilité.

Titre du document

Chaque page, votre 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, la liste des fenêtres ouvertes, l' historique, 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 vues

La balise Meta viewport est essentielle pour la réactivité du site, car elle garantit 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 que récemment dans une spécification. Elle contrôle la taille et l'échelle de la fenêtre d'affichage, empêchant 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 réactif, 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 :

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

Autre contenu `<head>`

L'élément <head> contient beaucoup plus d'informations. En fait, toutes les métadonnées. Bien que la plupart des éléments que vous trouverez dans le <head> soient abordés dans ce module, nous en partagerons d'autres dans le module Métadonnées.

Vous avez vu le jeu de méta-caractè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

L'élément <head> est l'endroit où vous incluez les styles de votre code HTML. Il existe un parcours d'apprentissage 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'style attribut.

Les deux principales façons d'inclure des styles dans votre fichier HTML consistent à inclure une ressource externe à l'aide d'un élément <link> dont l'attribut rel est défini sur stylesheet, ou à inclure directement du code CSS dans l'en-tête de votre document entre les balises d'ouverture et de fermeture <style>.

La balise <link> est la méthode privilégiée pour inclure des feuilles de style. Lier une ou quelques 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 gérer le code CSS à un seul endroit au lieu de le disperser partout, et 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' type="text/css" attribut, 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 code CSS ne sera pas lié.

Vous découvrirez bientôt quelques autres valeurs rel, mais vous apprendrez d'abord d'autres façons d'inclure du code CSS.

Si vous souhaitez que les styles de votre feuille de style externe se trouvent dans une couche en cascade, mais que vous n'avez pas accès à la modification du fichier CSS, vous devez inclure le code CSS avec @import dans un élément <style> :

<style>
  @import "styles.css" layer(firstLayer);
</style>

Lorsque vous utilisez @import pour importer des feuilles de style dans votre document, éventuellement dans des couches en cascade, les instructions @import doivent être les premières instructions de votre <style> ou feuille de style liée, en dehors de la déclaration du jeu de caractères.

Bien que les couches en cascade soient encore assez récentes et que vous ne voyiez peut-être pas le @import dans un élément <style> d'en-tête, 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 souhaitez 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 évite le repeint inutile qui se produit si un élément est stylisé après son premier rendu.

Il existe une seule 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'en-tête, car les feuilles de style des agents utilisateurs masquent l'en-tête 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'en-tête visible avec display: block, puis masquer tout le contenu de l'en-tête, puis, avec un attribut style intégré, rendre visible un bloc de style modifiable.

<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. Il existe 25 valeurs disponibles pour l'rel attribut qui peuvent être utilisées avec <link>, <a> et <area>, ou <form>, et quelques-unes peuvent être utilisées avec toutes. Il est préférable d'inclure celles liées aux méta informations dans l'en-tête et celles liées aux performances dans le <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 module suivant.

Favicon

Utilisez la balise <link> avec rel="icon" pour identifier le favicon de votre document. Un 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 sont réduits, 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 recherche un fichier nommé favicon.ico dans le répertoire de premier niveau (le dossier racine du site Web). Avec <link>, vous pouvez utiliser un autre nom de fichier et un autre emplacement :

<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 des espaces, où les valeurs de largeur et de hauteur sont 16, 32, 48 ou plus dans cette séquence géométrique, l'unité de pixel est omise et le X ne tient pas compte de 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 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érentes 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 plus de cohérence et une bonne expérience utilisateur, utilisez une seule image. Google utilise différents favicons pour chacune de ses applications : il existe une icône de messagerie, une icône d'agenda, par exemple. Toutes les icônes Google utilisent le même jeu de couleurs. Vous savez exactement quel est le contenu d'un onglet ouvert à partir de l'icône.

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 concerne pas uniquement les 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 Machine Learning Workshop, les moteurs de recherche peuvent 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 notre URL préférée :

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

Le lien canonique rel="canonical" est le plus souvent utilisé pour la publication croisée 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'existe aucun fichier de script externe, car, contrairement à ce que l'on croit, 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 inclurez un petit peu de JavaScript pour créer un œuf de Pâques 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 d'interrupteur, nous ajouterons le <script> en bas de la <body> plutôt que dans la <head>. Pourquoi ? Pour deux raisons. Nous voulons nous assurer que les éléments existent avant que le script qui y fait référence ne soit rencontré, car nous ne basons pas ce script sur un événement DOMContentLoaded. De plus, et surtout, 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 pas le téléchargement d'autres éléments tant que l'exécution de JavaScript n'est pas terminée. Pour cette raison, vous trouverez souvent des requêtes JavaScript à la fin du document plutôt que dans l'en-tête.

Deux attributs peuvent réduire la nature bloquante 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 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 téléchargement du script terminé, le rendu est mis en pause pendant l'exécution de JavaScript.

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'defer attribut 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

Il existe un autre élément qui ne se trouve que dans le <head>. L'élément <base>, rarement utilisé, permet de définir une URL et une cible de lien 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 _self ouvre les fichiers lié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 du navigateur, mais qui est extrait de tout contexte pour occuper l'intégralité de l'onglet.

La plupart des développeurs ajoutent l'attribut target aux quelques liens, voire à aucun, 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 de 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>. L'élément <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 autres éléments concernant <base> :

Un document ne peut contenir qu'un seul élément <base>
Il doit précéder toute URL relative, y compris les références de script ou de feuille de style possibles.

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 permet de commenter le code HTML. Tout ce qui se trouve entre  n'est ni visible ni analysé. Vous pouvez placer des commentaires HTML n'importe où sur la page, sauf dans les scripts ou les blocs de style, où vous devez utiliser des commentaires JavaScript et CSS.

Vous avez abordé les bases de ce qui se trouve dans <head>, mais vous souhaitez en savoir plus. Dans les sections suivantes, nous allons découvrir les balises Meta et comment contrôler ce qui s'affiche lorsque votre site Web est lié sur les réseaux sociaux.

Vérifiez vos connaissances

Testez vos connaissances sur la structure des documents.

Comment identifier 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> élément à <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 !

Présentation du HTML

Metadata

Structure du document Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Ajouter à chaque document HTML

<!DOCTYPE html>

<html>

Langue du contenu

<head>

Composants requis dans <head>

Codage des caractères

Titre du document

Métadonnées de vues

Autre contenu <head>

CSS

Autres utilisations de l'élément <link>

Favicon

Autres versions du site

Canonical

Scripts

Couches

Commentaires HTML

Vérifiez vos connaissances

Structure du document

`<!DOCTYPE html>`

`<html>`

`<head>`

Composants requis dans `<head>`

Autre contenu `<head>`

Autres utilisations de l'élément `<link>`