La syntaxe des balises

Un document HTML est un fichier texte qui contient des balises (ou tag en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.

Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur analyse (ou parse en anglais) le document et l'interprète afin d'afficher la page web correctement. Par exemple, si le document contient une balise <img>, le navigateur chargera l'image associée et affichera l'image à la place de la balise HTML.

Une syntaxe simple et stricte

Les balises HTML respectent une syntaxe simple et stricte

Un chevron ouvrant (<)
Le nom de la balise
Des attributs (optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").

Un chevron fermant (>)

Quelques exemples :

```
<article>
```
```
<meta charset="utf-8">
```
```
<img src="monImage.png" alt="">
```

Les éléments HTML

Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante doit avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <p> est une balise ouvrante, </p> sera la balise fermante correspondante.

Les éléments HTML de type bloc et en ligne

Les éléments peuvent être de type bloc où les navigateurs considèrent qu'aucun élément ne peut se positionner sur leurs côtés. Ils peuvent être en ligne.

<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p>

Mon premier paragraphe

Mon second paragraphe

Par défaut les balises de type bloc se repoussent les unes sous les autres

<p>Les bracelets connectés ont des <strong>capteurs de nouvelle génération</strong></p>

Les bracelets connectés ont des capteurs de nouvelle génération

La balise <strong> est une balise de type en ligne et permet de cibler un contenu sans modifier son positionnement.

Les balises autofermantes

certaines balises ne contiennent pas de texte. L'exemple le plus simple est <img>. Le navigateur remplace la balise <img> avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, <img> n'a pas de balise fermante.

<img src="myImage.png" alt="">

Il existe d'autres balises autofermantes pouvant ne contenir aucun attribut. Par exemple pour repousser des mots à la ligne, on utilise <br> pour break en anglais

<h1 class="titre1-banner">Nouveaux bracelets,<br>charges et accessoires</h1>

Nouveaux bracelets,

charges et accessoires