Qu'est-ce qu'une balise HTML par rapport à un élément HTML?

Le design Web, comme toute industrie ou profession, a sa propre langue. Lorsque vous entrerez dans l'industrie et que vous commencerez à parler à vos pairs, vous rencontrerez certainement une multitude de termes et de phrases qui sont nouveaux pour vous, mais qui sortent de la langue de vos collègues professionnels du Web. Deux des termes que vous entendrez sont HTML "balise" et "élément".

En entendant ces deux termes, vous réaliserez peut-être qu’ils sont utilisés de manière interchangeable. En tant que tel, de nombreux nouveaux professionnels du Web se posent la question suivante: "Quelle est la différence entre une balise HTML et un élément HTML?"

Bien que ces deux termes aient une signification similaire, ils ne sont pas vraiment synonymes. Alors, quelle est la similitude avec ces deux termes? La réponse courte est que les balises et les éléments font référence au balisage utilisé pour écrire du HTML. Par exemple, vous pourriez dire que vous utilisez le

balise pour définir un paragraphe ou l'élément pour créer des liens. De nombreuses personnes utilisent les termes balise et élément de manière interchangeable et tout concepteur ou développeur Web avec lequel vous parlez comprendra ce que vous voulez dire, mais la réalité est qu'il existe une légère différence entre les deux termes.

Balises HTML

Le HTML est un langage de balisage, ce qui signifie qu'il est écrit avec des codes qui peuvent être lus par une personne sans qu'il ait besoin d'être compilé au préalable. En d'autres termes, le texte d'une page Web est «annoté» avec ces codes pour donner au navigateur des instructions sur la manière d'afficher le texte. Ces balises sont les balises HTML elles-mêmes.

Lorsque vous écrivez du HTML, vous écrivez des balises HTML. Toutes les balises HTML sont constituées d'un certain nombre de parties spécifiques, notamment:

• Un signe moins que

  <

• Un mot ou un caractère qui détermine quelle étiquette est en cours d'écriture
• N'importe quel nombre d'attributs HTML facultatifs sous la forme d'un

  nom = "valeur" paire

• Et enfin un signe plus grand

  >

Par exemple, voici quelques balises HTML:

Ce sont toutes des balises d'ouverture HTML, sans aucun attribut facultatif ajouté. Ces balises représentent:

• - définit un paragraphe

• - définit la page en HTML

• - définit une division

Les éléments suivants sont également des balises HTML:

• 

Ces exemples incluent tous les attributs qui ont été ajoutés aux balises HTML d'ouverture.

• le
  est une liste non ordonnée qui inclut un attribut ID
• La division a un attribut de classe
• L'élément anchor, ou link, inclut l'attribut "href"
• La balise d'image avec un attribut "src"

Pour les balises anchor et image, les attributs ne sont en réalité pas facultatifs, ils sont nécessaires pour que ces balises s'affichent correctement. Vous devez indiquer le lien où aller (ce que fait le "href") et l’image ce qu’elle doit montrer (ce que l’attribut "src" fournit).

Que sont les éléments HTML?

Selon la spécification HTML du W3C, un élément est le bloc de construction de base de HTML et est généralement composé de deux balises : une balise d'ouverture et une balise de fermeture. Jusqu'ici, nous avons seulement regardé les balises d'ouverture, qui commencent les éléments. Pour terminer cet élément, vous écrivez les balises de fermeture correspondantes.

Par exemple, pour l'élément de paragraphe, vous écrivez ceci:

Ceci est composé de la balise d'ouverture que nous avons vue il y a un instant ainsi que de la balise de fermeture -

. Les balises de fermeture ne sont en réalité que la balise d'ouverture répétée, mais avec une "barre oblique" ajoutée directement après le symbole "inférieur à".

Presque tous les éléments HTML ont une balise d'ouverture et une balise de fermeture. Ces balises entourent le texte qui s'affichera sur la page Web. Par exemple, pour écrire un paragraphe de texte, écrivez le texte à afficher sur la page, puis entourez-le de balises:

C'est ici que vous écrirez le texte du paragraphe que vous souhaitez afficher sur la page Web.

Certains éléments HTML n'ont pas de balise de fermeture. Celles-ci sont appelées "éléments vides". Parfois, ils sont également appelés éléments «singleton» ou «vides». Les éléments vides sont faciles à utiliser car il vous suffit d'inclure une balise dans votre page Web et le navigateur saura quoi faire. Par exemple, pour ajouter un seul saut de ligne à votre page, vous utiliseriez le
étiquette.

Un autre élément commun qui inclut uniquement une balise d'ouverture est l'élément "image". Par exemple:



Nous avons vu cet exemple plus tôt, mais il n'y a pas de balise de fermeture pour cet élément d'image. Le navigateur remplacerait simplement ce code par l'image référencée dans l'attribut "href". Dans ce cas, ce serait "logo.png".

En général, lorsque nous faisons référence à un élément ou à une balise HTML, nous utilisons le terme «élément» pour indiquer que nous faisons référence à toutes les parties de l'élément (les balises d'ouverture et de fermeture). Nous n'utilisons que "tag" lorsque nous ne référons que l'un ou l'autre. C’est l’utilisation correcte de ces deux termes, et nous vous encourageons à les utiliser correctement. Sachez toutefois que si vous les échappez et les échangez un peu, vous serez toujours compris par vos nouveaux pairs du développement Web!