HTML - Syntaxe

Lucas D. -

Structure de base d'un document HTML

Chaque document HTML suit une structure de base qui comprend plusieurs éléments clés. Comprendre cette structure est nécessaire pour créer des pages HTML bien formées et valides.

Le premier élément d'un document HTML est la déclaration <!DOCTYPE>. Cette déclaration informe le navigateur web de la version HTML utilisée. Pour HTML5, la norme actuelle, la déclaration est simplement <!DOCTYPE html>. Elle doit être placée tout au début du document, avant tout autre élément.

L'élément suivant est l'élément <html>, qui englobe tout le contenu de la page. Il est connu comme l'élément racine d'un document HTML. Tous les autres éléments doivent être imbriqués dans les balises <html>.

À l'intérieur de l'élément <html>, il y a deux sections principales : le <head> et le <body>.

L'élément <head> contient les métadonnées du document HTML, comme le titre de la page, l'encodage des caractères, et les liens vers les fichiers CSS et JavaScript externes. Ces informations ne sont pas visibles sur la page web elle-même mais sont utilisées par les navigateurs et les moteurs de recherche. Les éléments importants dans le <head> incluent <title>, <meta>, <link>, et <script>.

L'élément <body> contient le contenu visible de la page web, comme les titres, les paragraphes, les images, les listes, et les tableaux. Tout le contenu que les utilisateurs voient et avec lequel ils interagissent doit être placé dans les balises <body>.

Conseil: Structure de base d'un document HTML

<!DOCTYPE html>
<html>
<head>
    <title>Ma page web</title>
</head>
<body>
    <h1>Bienvenue sur ma page web !</h1>
    <p>Ceci est un paragraphe de texte.</p>
</body>
</html>

Balises HTML

Les balises HTML sont les éléments de base des pages web, permettant de structurer et de formater le contenu. Les balises définissent des éléments tels que les titres, les paragraphes, les listes et les liens. L'utilisation correcte des balises est importante pour créer un HTML bien structuré et sémantique.

La plupart des balises HTML ont une balise d'ouverture et une balise de fermeture, qui encadrent le contenu qu'elles définissent. Les balises d'ouverture commencent par <, suivi du nom de la balise et >. Les balises de fermeture sont similaires mais incluent / avant le nom de la balise. Par exemple, un paragraphe est défini en utilisant la balise <p>, comme ceci : <p>Ceci est un paragraphe.</p>.

Certaines balises HTML, connues sous le nom de balises auto-fermantes ou vides, n'ont pas besoin de balise de fermeture. Ces balises représentent des éléments qui n'ont pas de contenu à l'intérieur. Des exemples de balises auto-fermantes incluent <br> pour les sauts de ligne, <img> pour les images et <meta> pour les métadonnées. En HTML5, il est facultatif d'inclure le / de fermeture pour les balises auto-fermantes, donc <br> et <br /> sont tous deux valides.

Lors de l'utilisation de plusieurs balises pour définir la structure de votre contenu, il faut les imbriquer correctement. Cela signifie fermer les balises dans l'ordre inverse de leur ouverture. Par exemple, si vous avez une balise <strong> à l'intérieur d'une balise <p>, fermez la balise <strong> avant la balise <p> :

Conseil: This is a paragraph with nested tags

<p>Ceci est un <strong>paragraphe</strong> avec des balises imbriquées.</p>

Des balises mal imbriquées peuvent conduire à des résultats inattendus et rendre votre HTML invalide. Assurez-vous toujours que vos balises sont correctement imbriquées et fermées pour maintenir un document bien structuré.

Éléments HTML

Un élément HTML est une partie d'un document HTML qui comprend une balise d'ouverture, un contenu et une balise de fermeture. Les éléments structurent et donnent du sens au contenu d'une page web. La balise d'ouverture indique le début d'un élément, tandis que la balise de fermeture marque sa fin. Le contenu entre ces balises peut être du texte, d'autres éléments HTML, ou les deux.

Les éléments HTML peuvent également avoir des attributs. Les attributs fournissent des informations supplémentaires sur l'élément et sont placés dans la balise d'ouverture. Ils ont un nom et une valeur, séparés par un signe égal (=). Le nom de l'attribut indique la propriété définie, tandis que la valeur de l'attribut donne la valeur pour cette propriété. Par exemple, l'élément <a>, qui crée un lien hypertexte, utilise l'attribut href pour spécifier la destination du lien :

Conseil: Anchor element with href attribute

<a href="https://www.example.com">Visit Example.com</a>

Les attributs courants incluent class et id, qui sont utilisés pour styler et cibler des éléments avec CSS et JavaScript. L'attribut class vous permet de regrouper des éléments en fonction de caractéristiques partagées, tandis que l'attribut id donne un identifiant unique à un élément spécifique dans le document.

Certains éléments HTML, connus sous le nom d'éléments vides ou éléments auto-fermants, n'ont pas de balise de fermeture et ne peuvent pas contenir de contenu. Ces éléments se ferment d'eux-mêmes et sont utilisés pour insérer ou intégrer du contenu dans la page. Voici des exemples d'éléments vides :

Élément Description
<br> Insère un saut de ligne
<hr> Crée une ligne horizontale ou une séparation thématique
<img> Intègre une image dans la page
<input> Crée un champ de saisie pour l'interaction utilisateur
<meta> Fournit des métadonnées sur le document HTML

Lors de l'utilisation d'éléments vides, n'oubliez pas qu'ils n'ont pas de balise de fermeture. En HTML5, la barre oblique (/) de fermeture est facultative pour les éléments vides, donc <br> et <br /> sont tous deux valides.

Sensibilité à la casse

En HTML, les noms des balises et des attributs ne sont pas sensibles à la casse. Cela signifie que, que vous utilisiez des lettres majuscules ou minuscules, le navigateur web comprendra les balises et les attributs de la même manière. Par exemple, <div>, <DIV>, et <Div> seront tous traités comme la même balise <div> par le navigateur.

Cependant, il est d'usage courant d'utiliser des lettres minuscules pour tous les noms de balises et d'attributs en HTML. Cette pratique améliore la lisibilité du code et sa cohérence, facilitant ainsi la compréhension et la maintenance du code par les développeurs. L'utilisation des minuscules est également conforme à la spécification HTML5, qui recommande l'usage des minuscules pour les balises et les attributs.

Conseil: Exemple de casses de balises

<!-- Valide mais non recommandé -->
<DIV class="content">
    <P>Ceci est un paragraphe.</P>
</DIV>

<!-- Recommandé -->
<div class="content">
    <p>Ceci est un paragraphe.</p>
</div>

Lors de l'écriture des noms d'attributs dans les balises, la même convention s'applique. Les noms d'attributs en minuscules sont préférés pour la cohérence et la lisibilité. Par exemple, lorsque vous utilisez l'attribut class, écrivez-le comme class="exemple" plutôt que CLASS="exemple".

Conseil: Exemple de casses d'attributs

<!-- Valide mais non recommandé -->
<a HREF="https://www.exemple.com">Visiter Exemple.com</a>

<!-- Recommandé -->
<a href="https://www.exemple.com">Visiter Exemple.com</a>

Bien que le HTML ne soit pas sensible à la casse, il est important de noter que d'autres technologies associées, comme CSS et JavaScript, le sont. Lorsque vous faites référence à des éléments HTML en CSS ou JavaScript, assurez-vous d'utiliser la bonne casse pour les sélecteurs, les propriétés et les variables.

L'adhésion à la convention des minuscules pour les balises et attributs HTML aide à maintenir la cohérence, améliore la lisibilité et rend votre code plus conforme aux standards du web.

Espaces blancs et indentation

En HTML, les espaces blancs entre les éléments, comme les espaces, les tabulations et les sauts de ligne, sont largement ignorés par les navigateurs web lors du rendu de la page. Ce comportement est connu sous le nom de réduction des espaces blancs. Les espaces, tabulations ou sauts de ligne multiples sont traités comme un seul espace, et le navigateur ajuste automatiquement la mise en page des éléments en fonction de l'espace disponible et des styles CSS appliqués.

Conseil: Espaces multiples réduits

<!-- Les espaces multiples sont réduits à un seul espace -->
<p>Ceci    est    un    paragraphe.</p>

Bien que le navigateur réduise les espaces blancs, il est toujours important d'utiliser une indentation et un espacement appropriés dans votre code HTML pour la lisibilité et la maintenabilité. Un code bien organisé est plus facile à lire, à comprendre et à déboguer, surtout lorsque vous travaillez sur des projets plus importants ou que vous collaborez avec d'autres développeurs.

Pour améliorer la lisibilité du code, suivez ces bonnes pratiques d'indentation :

Bonne pratique Description
Utiliser une indentation cohérente Utilisez soit des espaces, soit des tabulations pour l'indentation, mais tenez-vous à une seule méthode pour assurer la cohérence dans tout votre document HTML.
Indenter les éléments imbriqués Indentez les éléments imbriqués pour montrer leur hiérarchie et leur relation avec les éléments parents. Chaque niveau d'imbrication doit être indenté d'une quantité constante, comme 2 ou 4 espaces.
Utiliser des lignes vides Utilisez des lignes vides pour séparer les différentes sections de votre code, comme entre différents éléments ou groupes d'éléments liés. Cela facilite l'identification visuelle de la structure de votre document.
Couper les longues lignes Lorsque vous avez affaire à de longues lignes de code, envisagez de les diviser en plusieurs lignes pour une meilleure lisibilité. Par exemple, si un élément a de nombreux attributs, vous pouvez placer chaque attribut sur une nouvelle ligne et les indenter pour plus de clarté.

Conseil: Exemple d'indentation

<div>
  <h1>Titre principal</h1>
  <p>Ceci est un paragraphe.</p>
  <ul>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
  </ul>
</div>

Conseil: Coupure des longues lignes

<img src="image.jpg"
     alt="Image d'exemple"
     class="image-responsive"
     width="500"
     height="300">

Rappelez-vous que même si une indentation et un espacement appropriés n'affectent pas la façon dont le navigateur rend la page, ils sont essentiels pour rendre votre code plus lisible et maintenable. C'est une bonne habitude à développer tôt, car elle vous aidera à écrire un code plus propre et mieux organisé, surtout à mesure que vos projets gagnent en complexité.

Commentaires en HTML

Les commentaires en HTML ajoutent des notes, explications ou rappels dans le code sans affecter le contenu affiché sur la page web. Ils aident à documenter votre code, le rendant plus facile à comprendre et à maintenir, surtout lorsque vous travaillez avec d'autres développeurs ou que vous revenez sur un projet après un certain temps.

HTML prend en charge deux types de commentaires : les commentaires sur une seule ligne et les commentaires sur plusieurs lignes.

Les commentaires sur une seule ligne commencent par <!-- et se terminent par -->. Ils sont utilisés pour des notes ou explications brèves qui tiennent sur une seule ligne. Les navigateurs web ignorent le contenu entre les balises d'ouverture et de fermeture du commentaire.

Conseil: Exemple de commentaire sur une seule ligne

<!-- Ceci est un commentaire sur une seule ligne -->
<p>Ceci est un paragraphe.</p>

Les commentaires sur plusieurs lignes commencent également par <!-- et se terminent par -->, mais ils peuvent s'étendre sur plusieurs lignes. Ils sont utiles pour des explications plus longues, pour retirer temporairement des sections de code, ou pour ajouter une documentation détaillée.

Conseil: Exemple de commentaire sur plusieurs lignes

<!--
  Ceci est un commentaire sur plusieurs lignes.
  Il peut s'étendre sur plusieurs lignes.
  Utilisez-le pour des explications plus longues ou pour retirer temporairement du code.
-->
<div>
  <h1>Titre</h1>
  <p>Ceci est un paragraphe.</p>
</div>

Lorsque vous utilisez des commentaires dans votre code HTML, suivez ces bonnes pratiques :

Bonne pratique Description
Utilisez les commentaires avec parcimonie Bien que les commentaires puissent être utiles, trop de commentaires peuvent encombrer votre code et le rendre plus difficile à lire. Utilisez des commentaires uniquement lorsque c'est nécessaire pour clarifier des parties complexes ou non évidentes de votre code.
Gardez les commentaires concis Les commentaires doivent être brefs et précis. Évitez d'écrire de longues explications ou de répéter des informations déjà claires dans le code lui-même.
Mettez à jour les commentaires lors de la mise à jour du code Si vous apportez des modifications à votre code, assurez-vous que tous les commentaires associés sont mis à jour pour refléter ces changements. Des commentaires obsolètes peuvent être trompeurs et causer de la confusion.
Supprimez les commentaires inutiles avant le déploiement Avant de déployer votre code dans un environnement de production, supprimez tous les commentaires qui ne sont plus nécessaires, comme ceux utilisés pour le débogage ou le retrait temporaire de code. Cela aide à garder votre code final propre et optimisé.

Conseil: Exemples de commentaires en ligne

<!-- À FAIRE : Ajouter un script de validation du formulaire -->
<form>
  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Envoyer</button>
</form>

<!--
<div class="section-obsolete">
  <p>Cette section n'est plus utilisée et sera supprimée dans une future mise à jour.</p>
</div>
-->

Erreurs de syntaxe courantes

Lors de l'écriture du HTML, vous pouvez faire des erreurs de syntaxe, surtout en tant que débutant. Ces erreurs peuvent entraîner des résultats inattendus ou empêcher votre page web de s'afficher correctement. Voici quelques erreurs de syntaxe courantes à surveiller :

Erreur Description
Oublier les balises fermantes La plupart des éléments HTML nécessitent à la fois une balise ouvrante et une balise fermante. Ne pas inclure la balise fermante peut amener le navigateur à mal interpréter la structure de votre document.
Balises mal imbriquées Les éléments HTML doivent être imbriqués de manière à ce que les éléments intérieurs soient fermés avant les éléments extérieurs. Des balises mal imbriquées peuvent amener le navigateur à mal interpréter la structure de votre document.
Balises ouvrantes et fermantes non concordantes Le nom de la balise dans la balise fermante doit correspondre au nom de la balise dans la balise ouvrante. Des balises non concordantes peuvent amener le navigateur à mal interpréter la structure de votre document, conduisant à des éléments qui ne sont pas correctement fermés.
Utilisation incorrecte des guillemets dans les attributs Les valeurs des attributs doivent toujours être entre guillemets, simples (') ou doubles ("). Ne pas utiliser de guillemets ou utiliser des guillemets non concordants peut amener le navigateur à mal interpréter la valeur de l'attribut.

Exemples :

Conseil: Oublier les balises fermantes

<!-- Incorrect -->
<p>Ceci est un paragraphe.

<!-- Correct -->
<p>Ceci est un paragraphe.</p>

Conseil: Balises mal imbriquées

<!-- Incorrect -->
<p><strong>Ceci est un paragraphe.</p></strong>

<!-- Correct -->
<p><strong>Ceci est un paragraphe.</strong></p>

Conseil: Balises ouvrantes et fermantes non concordantes

<!-- Incorrect -->
<p>Ceci est un paragraphe.</div>

<!-- Correct -->
<p>Ceci est un paragraphe.</p>

Conseil: Utilisation incorrecte des guillemets dans les attributs

<!-- Incorrect -->
<img src=image.jpg alt=Image exemple>

<!-- Correct -->
<img src="image.jpg" alt="Image exemple">

Pour éviter ces erreurs de syntaxe courantes, suivez les bonnes pratiques suivantes :

  • Incluez toujours les balises fermantes pour les éléments qui en ont besoin
  • Imbriquez correctement les éléments et fermez-les dans l'ordre inverse de leur ouverture
  • Vérifiez que les noms des balises ouvrantes et fermantes correspondent exactement
  • Utilisez systématiquement des guillemets autour des valeurs d'attributs et assurez-vous qu'ils sont correctement appariés

Entités HTML

Les entités HTML sont des codes spéciaux utilisés pour représenter des caractères ayant une signification particulière en HTML ou qui ne peuvent pas être facilement tapés sur un clavier standard. Ces entités permettent au navigateur d'interpréter correctement les caractères et de les afficher comme prévu sur la page web.

Les entités sont utiles lorsqu'on travaille avec des caractères réservés en HTML, tels que <, >, &, ", et '. Ces caractères définissent la structure et la syntaxe des éléments HTML, donc les utiliser directement dans votre contenu peut entraîner des erreurs d'analyse ou un comportement inattendu. Pour inclure ces caractères dans votre texte, vous devez utiliser leurs entités HTML.

Voici quelques entités HTML courantes pour les caractères réservés :

Caractère Nom de l'entité Numéro de l'entité
< &lt; &#60;
> &gt; &#62;
& &amp; &#38;
" &quot; &#34;
' &apos; &#39;

Pour utiliser une entité HTML, vous pouvez utiliser son nom d'entité ou son numéro d'entité. Les noms d'entités commencent par une esperluette (&) et se terminent par un point-virgule (;), tandis que les numéros d'entités commencent par une esperluette et un dièse (#) et se terminent par un point-virgule.

Conseil: Utilisation des noms d'entités

<!-- Utilisation des noms d'entités -->
<p>Ceci est un élément &lt;p&gt;.</p>
<p>Pour afficher une esperluette, utilisez &amp;amp;.</p>

Conseil: Utilisation des numéros d'entités

<!-- Utilisation des numéros d'entités -->
<p>Ceci est un élément &#60;p&#62;.</p>
<p>Pour afficher une esperluette, utilisez &#38;amp;.</p>

Les entités HTML ne se limitent pas aux caractères réservés. Elles peuvent également représenter des caractères spéciaux, comme des symboles, des lettres accentuées et des émojis, qui peuvent ne pas être disponibles sur tous les claviers ou être difficiles à taper. Voici quelques entités de caractères spéciaux courantes :

Caractère Nom de l'entité Numéro de l'entité
© &copy; &#169;
® &reg; &#174;
™ &trade; &#8482;
€ &euro; &#8364;
£ &pound; &#163;
¿ &iquest; &#191;
ñ &ntilde; &#241;

Conseil: Entités de caractères spéciaux

<p>Copyright &copy; 2021 Société Exemple.</p>
<p>Le prix est de &euro;9.99.</p>
<p>Le mot espagnol pour "année" est "a&ntilde;o".</p>

L'utilisation des entités HTML lorsque nécessaire permet de s'assurer que votre contenu est affiché avec précision et de manière cohérente sur différents navigateurs et appareils. Cela évite également les erreurs d'analyse et rend votre code plus lisible et plus facile à maintenir.