1. Balises et Attributs¶

Le HTML est un langage assez simple, basé sur des balises qui nomment ce qu'elles contiennent. Si vous comprenez ça, vous avez tout compris.

Les balises¶

Une balise ou tag est composée de deux éléments :

• Une balise ouvrante <...>
• Une balise fermante </...>

Prenons par exemple une phrase : Apprendre l'HTML pas à pas

Nous allons l'encadrer entre deux balises paragraphe <p> :

<p>Apprendre l'HTML pas à pas</p>

Vous pouvez voir que notre phrase est précédée de la balise ouvrante <p> et suivie de la balise fermante </p>.

Les balises sont constituées d'une valeur entre deux chevrons : < et >.

Ainsi, notre navigateur sait que "Apprendre l'HTML pas à pas" est un paragraphe et sera interprété comme tel.

La sémantique¶

On a vu plus haut comment baliser des éléments avec un exemple de paragraphe. Il existe beaucoup de balises, chacune servant à baliser un contenu spécifique.

Vous trouverez par exemple des balises pour :

• des titres,
• des listes,
• des tableaux,
• des formulaires,
• …

Le but premier en HTML est de respecter la sémantique de vos éléments. Ainsi, il ne faut pas utiliser une balise pour autre chose que sa valeur ! Par exemple, vous n'allez pas utiliser une balise titre pour encadrer une image, ou une balise paragraphe pour encadrer une liste.

Il est très important de respecter une bonne sémantique ! Et cela pour deux raisons :

1. Pour que les navigateur interprètent bien les éléments et ne se trompent pas sur leur valeur.
2. Pour optimiser le référencement naturel de votre site internet.

Nous reviendrons plus en détail concernant la sémantique HTML plus loin dans le cours...

Règles et Conventions¶

1. Les balises HTML ne sont pas sensibles à la casse : <P> a la même signification que <p> . La norme HTML n'exige pas de balises en minuscules, mais le W3C recommande l'utilisation de minuscules en HTML.

2. Vous devez mettre toutes les valeurs d'attribut entre guillemets. Il est tentant d'omettre les guillemets puisque HTML5 le permet, mais le balisage est plus net et plus facile à lire si vous les incluez. Et utilisez des guillemets doubles pour le HTML, et non des guillemets simples.

3. Les balises HTML et attributs sont toujours en anglais et ne doivent pas contenir d’espace, de caractères accentués ou de symboles.

Les attributs¶

Il est possible d'ajouter des attributs aux balises. Ces attributs servent à donner des informations complémentaires (nous verront plus tard à quoi ils peuvent servir) :

<p attr="push">Apprendre l'HTML pas à pas</p>

Notez ici le attr="push" qui a été ajouté à la balise ouvrante. C'est notre attribut. Il se compose toujours d'une propriété (avant le =) et d'une valeur (après le =, entre les ").

On peut avoir pleins de types d'attributs différents, dont voici 1 exemples :

<a
id="exemple"
class="valeur"
href="https://www.url.ext"
>lien</a>

Récapitulatif¶

Voilà un schéma récapitulatif du fonctionnement des balises HTML :

Exceptions : les balises auto-fermées¶

Certaines balises sont auto-fermées ou orpheline. C'est à dire qu'elles n'ont qu'une seule balise ouvrante, et aucune balise fermante.

Voilà la liste de ces balises :

• <area>
• <br>
• <hr>
• <img>
• <input>
• <link>
• <meta>
• <param>