Balises et éléments

Un élément, c'est en général trois choses à la suite : une balise ouvrante, du contenu et une balise fermante avec une barre oblique.

Les parties d'un élément

Regarde <p>Bread is ready.</p>. La balise ouvrante <p> dit qu'un paragraphe commence ici. La balise fermante </p>, avec une barre oblique après le premier chevron, dit qu'il se termine. Tout ce qui se trouve entre les deux est le contenu. L'ensemble, balises plus contenu, est l'élément. On dit souvent balise pour parler d'un élément, et à l'oral ce n'est pas grave, mais la différence aide quand tu lis de la documentation : une balise est le morceau entre chevrons, un élément est la pièce finie de la page.

Les attributs ajoutent des détails

Une balise ouvrante peut porter des attributs, des réglages supplémentaires écrits sous la forme name="value". Dans <a href="menu.html">Menu</a>, l'attribut href indique où mène le lien. Dans <html lang="en">, l'attribut lang indique la langue. Mets la valeur entre guillemets droits ; la norme accepte certaines valeurs sans guillemets, mais les guillemets ne posent jamais de problème. Plusieurs attributs se séparent par des espaces, et leur ordre n'a pas d'importance. Quelques attributs, comme required sur un champ de formulaire, sont booléens : écrire le nom seul suffit à les activer.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

Imbrication : fermer dans l'ordre inverse

Les éléments se placent à l'intérieur d'autres éléments. Dans l'exemple ci-dessus, <strong> est à l'intérieur de <p>. La règle est la même qu'avec les parenthèses en calcul : ce qui a été ouvert en dernier doit être fermé en premier. <p><strong>7 am</p></strong> est faux, car le paragraphe se ferme alors que l'élément strong est encore ouvert. Les navigateurs devineront ce que tu voulais dire, mais des erreurs différentes mènent à des suppositions différentes. Indenter les éléments enfants de deux espaces, comme le font les exemples de ce cours, rend l'imbrication facile à voir.

Les éléments vides

Certains éléments ne peuvent pas avoir de contenu, ils n'ont donc pas de balise fermante. On les appelle des éléments vides. Les plus courants sont <br> (un saut de ligne), <hr> (une rupture thématique), <img>, <input>, <meta> et <link>. Tu les verras parfois écrits avec une barre oblique, comme <br /> ; en HTML, la barre est permise et ignorée, donc les deux formes fonctionnent.

Le sens, pas l'apparence

Dans un paragraphe, tu peux marquer des mots avec <strong> pour une forte importance et avec <em> pour une emphase, celle qui change la façon de prononcer une phrase. Les navigateurs affichent strong en gras et em en italique, mais ce qui compte, c'est le sens. Un lecteur d'écran peut les lire avec une autre voix, et un moteur de recherche les traite comme des mots importants. Si tu veux seulement du gras pour décorer, c'est un travail pour CSS. <b> et <i> existent toujours pour un texte mis à part sans importance particulière, comme un nom de bateau ou un mot étranger.

Caractères spéciaux et commentaires

Comme < ouvre une balise, tu ne peux pas le taper comme du texte ordinaire. Écris plutôt une référence de caractère : < pour « inférieur à », > pour « supérieur à », et & pour l'esperluette elle-même. Un commentaire, <!-- like this -->, est ignoré par le navigateur et pratique pour des notes personnelles. Enfin, HTML réduit les espaces : dix espaces ou trois retours à la ligne dans ton fichier s'affichent comme une seule espace. La mise en page vient des éléments et de CSS, pas de la barre d'espace.