Cours HTML / Syntaxe HTML : balises, attributs et imbrication

La syntaxe HTML définit comment les éléments, les balises, les attributs, le texte et les commentaires sont écrits dans un document HTML. La plupart des éléments utilisent une balise de début et une balise de fin, les attributs se trouvent dans la balise de début, et les éléments imbriqués doivent se fermer dans l'ordre inverse de celui dans lequel ils ont été ouverts.

Syntaxe de base des éléments et des balises HTML

Un élément HTML est généralement écrit avec une balise de début, un contenu et une balise de fin.

<tagname>Contenu</tagname>

• <tagname> est la balise de début qui marque le point où l’élément commence.
• Contenu est le texte ou autre contenu contenu par l’élément.
• </tagname> est la balise de fin qui marque le point où l’élément se termine.

Le code suivant crée un élément p. La balise de début est <p>, le contenu est Syntaxe HTML, et la balise de fin est </p>.

<p>Syntaxe HTML</p>

Les noms de balises dans la syntaxe HTML sont insensibles à la casse ASCII. Cependant, l’utilisation des lettres minuscules est la convention habituelle car elle rend le balisage cohérent et facile à lire.

Les éléments vides n’ont pas de balises de fin

Tous les éléments HTML n'utilisent pas une balise de fermeture. Un élément vide ne peut pas contenir de contenu et ne doit pas avoir de balise de fermeture.

<br>

<img src="image.webp" alt="Lever de soleil sur un océan bleu">

<input type="text" name="username">

<meta charset="utf-8">

br, img, input et meta sont des éléments vides courants. Ne pas écrire de balises de fermeture inexistantes comme </br> ou </img>.

Une barre oblique finale, comme dans <br />, est autorisée dans une balise de début HTML pour un élément vide, mais elle n'a pas de fonction d'auto-fermeture en HTML et est inutile.

Comment écrire les attributs HTML

Les attributs configurent un élément ou fournissent des informations supplémentaires. Ils sont écrits à l'intérieur de la balise de départ, avec le nom de l'attribut et sa valeur séparés par un signe égal (=). Pour un usage pratique des attributs, comparez les attributs for, id et name dans Associer correctement label et input.

<tagname attribute="value">Contenu</tagname>

Par exemple, ce code donne à un élément blockquote un attribut id dont la valeur est quote-01.

<blockquote id="quote-01">

  Texte cité

</blockquote>

HTML prend en charge les valeurs d'attribut entre guillemets doubles, guillemets simples et — dans des cas restreints — sans guillemets. Utiliser systématiquement les guillemets doubles est une convention pratique car les espaces et plusieurs caractères spéciaux ne sont pas autorisés dans les valeurs non citées.

<p style="color: red;">Texte rouge</p>

Dans l'exemple incorrect suivant, l'espace termine la valeur style non citée après color:. Le navigateur n'interprète donc pas l'attribut comme prévu.

<p style=color: red;>Texte rouge</p>

Les attributs booléens tels que disabled, checked et required sont vrais lorsqu'ils sont présents. Ils peuvent être écrits en utilisant uniquement le nom de l'attribut.

<input type="text" disabled>

Fermer les éléments imbriqués dans le bon ordre

Lorsqu'un élément est placé à l'intérieur d'un autre, fermez l'élément intérieur avant l'élément extérieur. Le balisage suivant est correctement imbriqué car l'élément strong est entièrement contenu par l'élément p.

<p>Cette phrase contient du <strong>texte important</strong>.</p>

L'exemple suivant est incorrectement imbriqué car les plages des deux éléments se chevauchent.

<p>Cette phrase contient du <strong>texte important</p></strong>

Un navigateur peut corriger le balisage mal formé lors de son analyse, mais le Document Object Model (DOM, modèle objet du document) résultant peut différer de la structure que vous aviez prévue. Ne comptez pas sur la récupération des erreurs par le navigateur comme substitut à un balisage valide.

Comment écrire des commentaires HTML

Un commentaire HTML commence par <!-- et se termine par -->. Les commentaires ne sont pas affichés comme contenu de la page, ils peuvent donc documenter l'objectif du balisage ou laisser une note temporaire pour les développeurs.

<!-- Ce commentaire ne s’affiche pas sur la page. -->

Un commentaire peut s'étendre sur plusieurs lignes.

<!--

  Ceci est un commentaire

  HTML sur plusieurs lignes.

-->

Ne pas imbriquer un commentaire HTML dans un autre. Les délimiteurs de commentaires imbriqués peuvent entraîner la fin du commentaire ailleurs que là où vous l'attendez.

<!--

  <!-- Ne pas imbriquer les commentaires. -->

-->

Structure de base d'un document HTML

L'exemple suivant montre une structure minimale et pratique pour un document HTML en français. Exercez-vous à trouver et à revérifier les erreurs dans Trouver des erreurs et valider un document HTML.

<!doctype html>

<html lang="fr">

  <head>

    <meta charset="utf-8">

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

    <title>Titre du document</title>

  </head>

  <body>

    <h1>Titre de la page</h1>

    <p>Le contenu de la page se trouve ici.</p>

  </body>

</html>

• <!doctype html> sélectionne le mode de rendu orienté standards utilisé pour les documents HTML modernes.
• <html lang="fr"> est l'élément du document, et lang="fr" identifie le français comme langue principale.
• <head> contient les métadonnées du document telles que l'encodage des caractères, la configuration de la fenêtre d'affichage et le titre du document.
• <body> contient les titres, paragraphes, images, liens et autres contenus présentés sur la page.

Comment vérifier la syntaxe HTML

Les navigateurs tentent d'afficher un document même lorsque son balisage contient des erreurs. Une page apparaissant à l'écran ne prouve donc pas que sa syntaxe est correcte. Vérifiez l'imbrication et les attributs, et utilisez le Nu Html Checker pour identifier les erreurs et avertissements de balisage.

Pour les règles précises couvrant les balises, les attributs, les éléments vides et les commentaires, consultez la section sur la syntaxe HTML de la norme vivante WHATWG.

Attributs booléens et caractères littéraux

Un attribut booléen est déterminé par sa présence, et non par une chaîne telle que "false." checked="false" est toujours présent, donc il commence coché, et "false" n'est pas une valeur d'attribut booléen conforme. Supprimez checked pour commencer décoché. Ne traitez pas les attributs booléens comme des attributs ordinaires ayant une valeur de chaîne.

<label><input type="checkbox" name="news" value="yes" checked> Actualités</label>
<label><input type="checkbox" name="updates" value="yes"> Mises à jour</label>

Seul le premier contrôle doit commencer coché. Pour afficher l'élément littéral <p>, écrivez ses crochets comme < et >. Utilisez & pour une esperluette littérale lorsque l'échappement est nécessaire. Distinguez le code affiché comme texte du balisage qui crée un élément.

<p>&lt;p&gt; est un élément de paragraphe. A &amp; B sont deux noms.</p>

Cet exemple affiche des crochets et une esperluette au lieu de créer un paragraphe imbriqué. Voir les règles HTML pour les attributs booléens.

Liste de contrôle de la syntaxe HTML

• Inclure <!doctype html> au début d'un document HTML complet.
• Utiliser de manière cohérente des noms de balises et d'attributs en minuscules.
• Mettre les valeurs des attributs entre guillemets, de préférence des guillemets doubles pour la cohérence.
• Ne pas ajouter de balises de fin aux éléments vides.
• Fermer les éléments imbriqués de l'intérieur vers l'extérieur.
• Utiliser lang pour identifier la langue du document.
• Ne pas inclure de données confidentielles dans les commentaires et le code source de la page.
• Validez le document final au lieu de vous fier uniquement à son apparence visuelle.