Le langage de balisage hypertexte (ou HTML) est le langage de balisage standard qui permet de décrire la structure des documents affichés sur le Web. Le langage HTML est constitué d'une série d'éléments et d'attributs utilisés pour baliser tous les composants d'un document afin de le structurer de manière significative.
Les documents HTML sont essentiellement une arborescence de nœuds comprenant des éléments HTML et des nœuds de texte. Les éléments HTML fournissent la sémantique et la mise en forme des documents, y compris la création de paragraphes, de listes et de tableaux, ainsi que l'intégration d'images et de commandes de formulaire. Chaque élément peut avoir plusieurs attributs spécifiés. De nombreux éléments peuvent avoir du contenu, y compris d'autres éléments et du texte. Les autres éléments sont vides. La balise et les attributs définissent leur fonction.
Il existe plusieurs catégories d'éléments, y compris les métadonnées, les sections, le texte, la sémantique intégrée, les formulaires, les interactions, les médias, les composants et les scripts. Nous aborderons la plupart de ces points dans la série. Mais d'abord, qu'est-ce qu'un élément ?
Éléments
Le code HTML est constitué d'une série d'éléments, que vous utilisez pour encapsuler différentes parties du contenu afin qu'il apparaisse ou agisse d'une certaine manière. Les éléments HTML sont délimités par des balises, écrits à l'aide de chevrons (< et >).
Le titre de notre page est un titre de niveau 1 pour lequel nous utilisons la balise <h1>. Le titre réel "Atelier de machine learning" correspond au contenu de notre élément. Le contenu est placé entre les balises d'ouverture et de fermeture. L'élément est dans son intégralité (la balise d'ouverture, la balise de fermeture et le contenu).
La balise de fermeture est identique à la balise d'ouverture, précédée d'une barre oblique.
Les éléments et les balises ne sont pas exactement la même chose, même si de nombreuses personnes utilisent les termes de façon interchangeable. Le nom du tag correspond au contenu entre crochets. La balise inclut les crochets. Dans ce cas, <h1>. Un "élément" désigne les balises d'ouverture et de fermeture, ainsi que l'ensemble du contenu situé entre ces balises, y compris les éléments imbriqués.
<p>This paragraph has some
<strong><em>strongly emphasized</em></strong>
content</p>
Cet élément de paragraphe contient d'autres éléments imbriqués. Lorsque vous imbriquez des éléments, il est important qu'ils soient correctement imbriqués. Les balises HTML doivent être fermées dans l'ordre inverse dans lequel elles ont été ouvertes. Dans l'exemple ci-dessus, notez que <em> est à la fois ouvert et fermé entre les balises d'ouverture et de fermeture <strong>, et que <strong> est à la fois ouvert et fermé entre les balises <p>.
Ils n'apparaissent pas dans les navigateurs. Les balises permettent d'interpréter le contenu de la page.
Le HTML est très indulgent. Par exemple, si les balises de fermeture </li> sont omises, les balises de fermeture sont implicites.
<ul>
<li>Blendan Smooth
<li>Hoover Sukhdeep
<li>Toasty McToastface
</ul>
Même s'il est possible de ne pas fermer un <li>, ce n'est pas une bonne pratique. La balise de fermeture </ul> est obligatoire. Si la balise de fermeture de la liste à puces est omise, le navigateur tente de déterminer où se terminent votre liste et les éléments de la liste, mais vous risquez de ne pas être d'accord avec cette décision.
La spécification de chaque élément indique si la balise de fermeture est obligatoire ou non. La mention "Aucune de ces balises n'est omise" dans la spécification signifie qu'une balise d'ouverture et une balise de fermeture sont obligatoires. La spécification fournit la liste de toutes les balises de fermeture requises.
Si <em> ou <strong> dans l'exemple précédent n'ont pas été fermés, le navigateur peut fermer l'élément ou non. Si vous ne fermez pas un <em>, le contenu peut s'afficher différemment de ce que vous aviez prévu. Si </ul> est omis et que la balise suivante est une balise de fermeture pour le conteneur parent de la liste, vous avez de la chance. En revanche, s'il s'agit d'une balise <h1> ouvrante, le navigateur supposera que l'en-tête fait partie de la liste, y compris les styles qui en héritent. L'omission de certaines balises de fermeture entraîne des problèmes plus importants: le fait de ne pas fermer certaines balises, telles que <script>, <style>, <template>, <textarea> et <title>, interrompt le contenu suivant, comme illustré dans l'exemple suivant.
Même si une partie du contenu est involontairement en italique ou si un titre est mis en retrait, votre entreprise n'en sera pas affectée. Le fait que la majeure partie de votre contenu s'affiche sans style dans une zone de texte de 200 x 300, car vous avez oublié d'ajouter un élément </textarea> ou ne s'affiche pas du tout, car vous avez oublié de fermer une </style>, le site est inutilisable.
Dans certains cas, les navigateurs intègrent des éléments même si les balises ne sont pas présentes dans le balisage. Comme les éléments peuvent être implicites, un élément peut exister même si les balises n'en ont pas. Le navigateur ajoute <body></body> autour de votre contenu et <tbody></tbody> autour des lignes du tableau, même si ce n'est pas le cas. Cela dit, même s'il est valide d'omettre des balises, ce n'est pas le cas. Comme indiqué précédemment, assurez-vous également qu'ils sont correctement imbriqués. À l'avenir, vous serez responsable du balisage et toute autre personne travaillant sur votre code base vous remerciera.
Il existe deux types d'éléments: remplacés et non remplacés.
Éléments non remplacés
Le paragraphe, l'en-tête et les listes balisés dans la section précédente n'ont pas été remplacés. Les éléments non remplacés sont entourés de balises d'ouverture et de fermeture (parfois facultatives), et peuvent inclure du texte et d'autres balises en tant que sous-éléments. Ces balises peuvent transformer une expression ou une image en lien hypertexte, une phrase en en-tête, mettre des mots en avant, etc.
Éléments remplacés et vides
Les éléments remplacés sont remplacés par des objets. Il peut s'agir d'un widget d'interface utilisateur graphique pour la plupart des commandes de formulaire, ou d'un fichier image matriciel ou évolutif pour la plupart des images. Les objets sont remplacés par des objets, chacun ayant une apparence par défaut. Les styles applicables sont limités en fonction du type d'objet et du navigateur. Par exemple, la plupart des navigateurs autorisent l'application d'un style limité aux widgets de l'interface utilisateur et aux pseudo-éléments associés. Dans le cas des images matricielles, la hauteur, la largeur, le rognage et le filtrage sont faciles à utiliser en CSS, mais rien d'autre. En revanche, les graphiques vectoriels évolutifs utilisant un langage de balisage XML semblable au HTML sont entièrement évolutifs (sauf s'ils contiennent des images matricielles). Ils sont également entièrement personnalisables. Notez que la possibilité de styliser un SVG intégré à partir du CSS lié au fichier HTML qui l'intègre dépend de la configuration du SVG.
Dans cet exemple, les deux éléments <img> et <input> remplacés sont respectivement remplacés par du contenu non textuel: une image et un objet d'interface utilisateur graphique.
<input type="range">
<img src="switch.svg" alt="light switch">
Sortie du code HTML ci-dessus:
Les éléments remplacés et les éléments vides sont souvent confondus. Les éléments void sont tous des éléments auto-fermants et sont représentés par une seule balise. Cela signifie qu'il n'existe pas de balise de fermeture pour un élément vide. Si vous le souhaitez, vous pouvez inclure une barre oblique à la fin de la balise, ce qui facilite la lecture du balisage pour de nombreuses personnes. Pour poursuivre avec cet exemple, nous fermons nous-mêmes la balise à l'aide d'une barre oblique:
<input type="range"/>
<img src="switch.svg" alt="light switch"/>
La barre oblique à la fin est un élément ancien: elle permet d'indiquer que l'élément se ferme automatiquement et qu'il n'y a pas de balise de fin ou de fermeture correspondante.
Les éléments NULL ne peuvent pas contenir de texte ni d'éléments imbriqués. Les éléments nuls incluent, entre autres, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> et <wbr>.
La plupart des éléments remplacés sont vides, mais pas tous. Les éléments video, picture, object et iframe sont remplacés, mais ne sont pas nuls. Ils peuvent tous contenir d'autres éléments ou du texte, et doivent donc être accompagnés d'une balise de fermeture.
La plupart des éléments vides sont remplacés, mais là encore, pas tous, comme nous l'avons vu avec base, link, param et meta. Pourquoi un élément vide, qui ne peut pas comporter de contenu, n'est-il pas remplacé et n'affiche donc rien à l'écran ? Pour fournir des informations sur le contenu. Ces informations sont fournies par les attributs des éléments.
Attributs
Vous avez peut-être remarqué que la balise d'ouverture des exemples <img> et <input> comportait bien plus que le type d'élément. Ces bits supplémentaires des paires nom/valeur séparées par un espace (bien que l'ajout d'une valeur soit parfois facultatif) sont appelés attributs. Ce sont les attributs qui rendent le langage HTML incroyablement puissant. Dans cette série, nous aborderons des centaines d'attributs et de valeurs d'attribut, mais nous nous contenterons ici de vous expliquer en quoi ils consistent en général et comment les inclure.
Les attributs fournissent des informations sur l'élément. L'attribut, tout comme le reste de la balise d'ouverture, n'apparaîtra pas dans le contenu. Toutefois, il permet de définir la manière dont le contenu sera présenté aux utilisateurs voyants et non-voyants (technologies d'assistance et moteurs de recherche).
Les attributs n'apparaissent que dans la balise d'ouverture. La balise d'ouverture commence toujours par le type de l'élément. Le type peut être suivi de zéro ou de plusieurs attributs, séparés d'un ou de plusieurs espaces. La plupart des noms d'attributs sont suivis d'un signe égal qui l'associe à la valeur de l'attribut, entouré de guillemets ouvrant et fermant.
Dans cet exemple, nous avons un lien d'ancrage à deux attributs. Ces deux attributs ont converti le contenu "Registration" en un lien d'ancrage interne qui fait défiler l'écran jusqu'à l'attribut id="register" dans l'onglet actuel du navigateur lorsque l'utilisateur clique sur le lien, appuie dessus ou l'active avec le clavier ou un autre appareil.
Les attributs définissent le comportement, les liens et la fonctionnalité des éléments. Nous aborderons d'autres attributs dans la section Attributs de cette série. Pour l'instant, notez simplement que certains attributs sont globaux, ce qui signifie qu'ils peuvent apparaître dans la balise d'ouverture de n'importe quel élément. Certains ne s'appliquent qu'à plusieurs éléments, mais pas tous, tandis que d'autres sont spécifiques à un élément ou ne concernent qu'un seul élément.
La plupart des attributs sont des paires nom/valeur. Les attributs booléens, dont la valeur est "true", "false" ou identique au nom de l'attribut, peuvent être inclus en tant qu'attribut seul: la valeur n'est pas nécessaire.
<img src="switch.svg" alt="light switch" ismap />
Cette image comporte trois attributs: src, alt et ismap. L'attribut src permet d'indiquer l'emplacement du composant Image SVG. L'attribut alt fournit un texte alternatif décrivant le contenu de l'image. L'attribut ismap est booléen et ne nécessite aucune valeur. Ceci est juste pour expliquer
ce que sont les attributs. Nous aborderons ces attributs plus en détail dans la section Images.
Les attributs de guillemets ne sont pas toujours obligatoires, mais cela arrive parfois. Si la valeur comprend un espace ou des caractères spéciaux, les guillemets sont nécessaires. C'est pourquoi nous vous recommandons toujours de les citer. Si la valeur de l'attribut est délimitée par des guillemets, il n'est pas nécessaire d'utiliser un ou plusieurs espaces entre les attributs. Toutefois, pour des raisons de sécurité et pour des raisons de lisibilité, nous vous recommandons d'utiliser des guillemets et des espaces.
HTML n'est pas sensible à la casse, mais certaines valeurs d'attribut le sont. Les valeurs définies dans la spécification ne sont pas sensibles à la casse. Les chaînes qui ne sont pas définies en tant que mots clés sont généralement sensibles à la casse, y compris les valeurs id et class.
Notez que si une valeur d'attribut est sensible à la casse dans le code HTML, elle l'est également lorsqu'elle est utilisée dans un sélecteur d'attribut en CSS et en JavaScript.
Pour faciliter la lecture du balisage, il est recommandé (mais pas obligatoire) de baliser votre code HTML en minuscules pour tous les noms de vos éléments et de vos attributs dans vos balises, et de placer toutes les valeurs d'attributs entre guillemets. Si vous entendez le terme "balisage de style XHTML", c'est ce que cela signifie, ainsi que les éléments vides à fermeture automatique qui se terminent par une barre oblique.
Apparence des éléments
L'apparence par défaut des éléments sémantiques est définie par les feuilles de style des user-agents. La plupart des navigateurs utilisent des feuilles de style réelles à cet effet, tandis que d'autres les simulent dans le code. Le résultat final est le même. Bien que certaines contraintes sur les feuilles de style des user-agents soient définies par la spécification HTML, les navigateurs ont une latitude importante, ce qui signifie que quelques différences existent entre les navigateurs.
L'élément que vous choisissez (et donc les balises que vous utilisez) doivent être adaptés au contenu que vous affichez, car les tags ont une signification sémantique. La sémantique, ou role, d'un élément est importante pour les technologies d'assistance et, dans certains cas, pour les moteurs de recherche. Le code HTML doit être utilisé pour structurer le contenu, et non pour définir son apparence. L'apparence relève du domaine CSS. Bien que de nombreux éléments qui modifient l'apparence du contenu, tels que <h1>, <strong> et <em>, ont une signification sémantique, l'apparence peut et sera généralement modifiée avec les styles de l'auteur.
<h1>This header has both <strong>strong</strong> and <em>emphasized</em> content</h1>
Élément, attributs et JavaScript
Le modèle objet de document (DOM) est la représentation des données de la structure et du contenu du document HTML. Lorsque le navigateur analyse le code HTML, il crée un objet JavaScript pour chaque élément et section de texte détecté. Ces objets sont appelés nœuds : nœuds d'élément et nœuds de texte, respectivement.
Une interface permet de définir les fonctionnalités de chaque élément HTML. L'API DOM HTML permet d'accéder à chaque élément HTML et de le contrôler via le DOM. Elle fournit des interfaces pour l'élément HTML et toutes les classes HTML qui en héritent. L'interface HTMLElement représente l'élément HTML et tous ses nœuds descendants. Tous les autres éléments l'implémentent via une interface qui en hérite. Chaque interface héritante possède un constructeur, des méthodes et des propriétés. Via les propriétés HTMLElement héritées, vous pouvez accéder à tous les attributs globaux, ainsi qu'aux événements input, pointer, transition et animation. Via le sous-type d'un élément individuel, tel que HTMLAnchorElement et HTMLImageElement, vous pouvez accéder aux valeurs et aux méthodes d'attribut spécifiques à l'élément.
Testez vos connaissances
Tester vos connaissances en HTML
Les éléments HTML sont utilisés pour l'application des styles.
Sélectionnez les éléments remplacés.
<img><p><ul><input>Sélectionnez toutes les affirmations vraies.