HTML utilise deux types de balises : les balises appariées et les balises simples (auto-fermantes). Chacune joue un rôle différent dans la structuration d'une page web.

Balises appariées

Les balises appariées comportent une balise d'ouverture et une balise de fermeture. Elles englobent du contenu, regroupent des éléments et définissent une signification ou une structure.

Syntaxe :

<tag_name>Some content</tag_name>

Voici un exemple réel d'utilisation de balises appariées :

Dans cet exemple :

• <section>...</section> : regroupe du contenu lié ;
• <h1>...</h1> : ajoute un titre à la section ;
• <p>...</p> : contient un paragraphe expliquant que la plupart des balises HTML vont par paires.

Balises simples

Les balises simples ne possèdent pas de balise de fermeture. Elles sont utilisées lorsqu’aucun contenu interne n’est nécessaire et que tout le comportement est défini via les attributs.

Syntaxe :

<tag_name />

Voici un exemple concret d’utilisation de balises simples :

Ce code inclut deux éléments :

• <input /> : crée un champ de saisie de texte. L’attribut placeholder=" name" affiche une indication à l’intérieur du champ ;
• <img /> : affiche une image de fruits.
  • alt="Fruits" : texte affiché si l’image ne se charge pas ;
  • width et height : définissent les dimensions de l’image ;
  • src : spécifie l’URL de l’image.

Imbrication des balises

Les balises doivent être correctement imbriquées, à la manière des poupées russes, chaque balise fermante correspondant à sa balise ouvrante dans le bon ordre.

Voici un exemple de balises imbriquées :

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Considérons l'exemple valide suivant :

Ce code affiche un paragraphe avec un lien et un texte mis en valeur :

• <p>...</p> : englobe l'ensemble du paragraphe ;
• <a href="https://privacy.com">...</a> : crée un lien cliquable vers la Politique de confidentialité ;
• <strong>...</strong> : met le mot « website » en gras pour le mettre en valeur.