PhpBB Lab Académie

Comprendre la syntaxe de base de HTML en distinguant une balise, un élément, un contenu et un attribut, puis apprendre à imbriquer correctement plusieurs éléments avant de construire des pages plus complètes.

Nous allons maintenant écrire du vrai HTML

Dans la leçon précédente, vous avez créé le fichier :

index.html

Vous y avez écrit du texte simple, puis vous avez appris à :

Modifier -> Enregistrer -> Actualiser -> Vérifier

Nous allons conserver exactement le même fichier.

Cette fois, nous allons commencer à donner une structure au contenu avec HTML.

À la fin de cette leçon, vous saurez reconnaître :

- une balise ouvrante ;
- une balise fermante ;
- un élément HTML ;
- le contenu d’un élément ;
- un attribut ;
- une imbrication correcte.

Nous allons introduire chaque notion séparément avant de les réunir dans un petit exercice.

1. Notre première balise

Ouvrez le fichier

index.html

créé dans la leçon précédente.

Remplacez son contenu par :

<p>Bonjour ! J’apprends HTML.</p>

Enregistrez avec :

Ctrl + S

Puis revenez dans votre navigateur et actualisez la page.

Vous devez retrouver la phrase :

Bonjour ! J’apprends HTML.

Cette fois, le fichier contient réellement une structure HTML.

2. Comprendre les caractères < et >

Dans :

<p>

les caractères :

<
>

délimitent une balise HTML.

Le nom placé entre ces caractères est ici :

p

La balise

p

représente un paragraphe.

Vous n’avez pas besoin de mémoriser aujourd’hui toutes les balises de HTML.

Nous utilisons

p

parce qu’elle permet de découvrir la syntaxe avec un exemple très simple.

3. La balise ouvrante

Au début de notre exemple se trouve :

<p>

C’est la balise ouvrante.

Elle indique au navigateur que le contenu d’un paragraphe commence ici.

Nous pouvons lire mentalement :

<p> = début du paragraphe

4. La balise fermante

À la fin se trouve :

</p>

C’est la balise fermante.

Vous reconnaissez le même nom

p

, mais il est précédé d’une barre oblique :

/

Nous pouvons lire :

</p> = fin du paragraphe

Nous avons donc :

<p>Bonjour ! J’apprends HTML.</p>

avec :

<p> = ouverture
Bonjour ! J’apprends HTML. = contenu
</p> = fermeture

5. Qu’est-ce qu’un élément HTML ?

Il est utile de distinguer les mots balise et élément.

Dans cet exemple :

<p>

est une balise.

Et :

</p>

est une autre balise.

L’ensemble :

<p>Bonjour ! J’apprends HTML.</p>

constitue un élément HTML.

Nous pouvons donc retenir :

Élément = balise ouvrante + contenu + balise fermante

Cette formule correspond à de nombreux éléments HTML.

Il existe aussi des éléments qui fonctionnent différemment et n’utilisent pas cette paire ouverture/fermeture. Nous les découvrirons seulement lorsque nous en aurons besoin.

6. Écrire les noms de balises en minuscules

En HTML moderne, nous prendrons l’habitude d’écrire les noms de balises en minuscules :

<p>

plutôt que :

<P>

Le navigateur peut tolérer différentes casses dans du HTML, mais utiliser les minuscules rend le code plus régulier et plus facile à lire.

Dans ce cours, nos exemples utiliseront donc toujours des noms de balises en minuscules.

7. Ajouter un deuxième paragraphe

Ajoutez maintenant un second élément après le premier :

<p>Bonjour ! J’apprends HTML.</p>
<p>Je comprends maintenant le principe d’une balise.</p>

Enregistrez puis actualisez.

Le navigateur reconnaît deux paragraphes distincts.

Vous venez donc de créer deux éléments

p

successifs.

Chaque paragraphe possède sa propre ouverture et sa propre fermeture.

8. Qu’est-ce qu’un attribut ?

Une balise ouvrante peut parfois contenir une information supplémentaire appelée attribut.

Prenons cet exemple :

<p lang="fr">Bonjour !</p>

L’élément est toujours un paragraphe.

Mais sa balise ouvrante contient maintenant :

lang="fr"

C’est un attribut.

Un attribut apporte une information supplémentaire sur l’élément.

Ici :

lang

est le nom de l’attribut.

Et :

fr

est sa valeur.

Nous pouvons décomposer :

lang = nom de l’attribut
"fr" = valeur de l’attribut

L’attribut

lang

indique ici que le contenu est en français.

Cette information peut notamment être utile aux navigateurs et aux technologies d’assistance.

9. Où place-t-on un attribut ?

Dans notre exemple, l’attribut est placé dans la balise ouvrante :

<p lang="fr">

Il n’est pas placé dans la balise fermante.

Nous écrivons donc :

<p lang="fr">Bonjour !</p>

et non :

<p>Bonjour !</p lang="fr">

Pour le moment, retenez simplement cette structure :

<nom-de-balise attribut="valeur">Contenu</nom-de-balise>

Nous apprendrons les attributs utiles au fur et à mesure du cours.

Il n’est pas nécessaire d’en mémoriser une liste maintenant.

10. Les guillemets autour de la valeur

Dans :

lang="fr"

la valeur

fr

est placée entre guillemets.

Dans ce cours, nous écrirons les valeurs d’attributs entre guillemets doubles :

" "

Cela donne une syntaxe régulière et facile à reconnaître :

attribut="valeur"

11. Qu’est-ce que l’imbrication ?

HTML permet de placer un élément à l’intérieur d’un autre élément.

On appelle cela imbriquer des éléments.

Prenons :

<p>J’apprends <strong>HTML</strong>.</p>

L’élément

p

représente le paragraphe complet.

À l’intérieur de ce paragraphe, nous avons placé :

<strong>HTML</strong>

L’élément

strong

indique que le mot

HTML

possède une importance particulière dans la phrase.

Un navigateur le présente souvent visuellement avec une mise en évidence, mais ce qui nous intéresse surtout en HTML est le sens de l’élément.

Nous avons donc un élément placé dans un autre :

p
    strong

C’est une imbrication.

12. Fermer les éléments dans le bon ordre

Lorsque des éléments sont imbriqués, l’élément ouvert en dernier doit être fermé en premier.

Regardez :

<p>J’apprends <strong>HTML</strong>.</p>

L’ordre est :

1. ouverture de p
2. ouverture de strong
3. fermeture de strong
4. fermeture de p

C’est correct.

Imaginez des boîtes placées les unes dans les autres : vous terminez d’abord la boîte intérieure avant de refermer la boîte extérieure.

13. Exemple d’imbrication incorrecte

Ceci est incorrect :

<p>J’apprends <strong>HTML.</p></strong>

Pourquoi ?

Parce que

strong

a été ouvert à l’intérieur de

p

, mais

p

est fermé avant

strong

.

Les balises se croisent.

Nous voulons au contraire :

<p>J’apprends <strong>HTML</strong>.</p>

Retenez :

Premier élément ouvert
    Deuxième élément ouvert
    Deuxième élément fermé
Premier élément fermé

14. Le navigateur peut parfois tolérer une erreur

Les navigateurs sont conçus pour essayer d’afficher une page même lorsqu’un document HTML contient certaines erreurs.

Cela peut donner l’impression qu’un code incorrect fonctionne.

Mais nous ne devons pas compter sur les corrections automatiques du navigateur.

Notre objectif est d’écrire un document dont la structure est claire et correcte.

Un résultat qui « ressemble à ce qu’on voulait » à l’écran ne prouve pas à lui seul que le HTML est bien construit.

15. Reprendre notre fichier index.html

Nous allons maintenant utiliser les trois notions de cette leçon dans le même fichier.

Remplacez son contenu par :

<p lang="fr">Bonjour ! J’apprends <strong>HTML</strong>.</p>
<p>Je comprends maintenant le principe d’une balise.</p>

Dans la première ligne :

-

p

crée un paragraphe ;
-

lang="fr"

est un attribut ;
-

strong

est imbriqué dans le paragraphe.

Dans la deuxième ligne, nous avons simplement un autre paragraphe.

Enregistrez puis actualisez votre navigateur.

16. Notre document n’est pas encore complet

Le contenu que nous venons d’écrire est bien du HTML.

Mais

index.html

ne possède pas encore toute la structure attendue d’un document HTML complet.

Nous n’avons notamment pas encore expliqué :

- comment déclarer le type de document ;
- comment délimiter le document HTML ;
- comment séparer les informations sur la page de son contenu visible.

Nous ajouterons cette structure seulement après l’avoir expliquée.

Il n’est donc pas nécessaire d’anticiper ou de recopier un squelette trouvé ailleurs.

Avant de passer à la suite

Vous devez maintenant savoir reconnaître dans :

<p lang="fr">J’apprends <strong>HTML</strong>.</p>

les éléments suivants :

-

<p lang="fr">

: balise ouvrante du paragraphe ;
-

lang="fr"

: attribut ;
-

<strong>

: balise ouvrante imbriquée ;
-

HTML

: contenu de l’élément

strong

;
-

</strong>

: fermeture de l’élément imbriqué ;
-

</p>

: fermeture du paragraphe.

Vous connaissez maintenant la syntaxe fondamentale dont nous aurons besoin pour apprendre progressivement les véritables éléments HTML.

Prenons ce code :

<p lang="fr">Mon langage préféré est <strong>HTML</strong>.</p>

Nous pouvons le lire étape par étape.

La balise ouvrante du paragraphe est :

<p lang="fr">

Elle contient l’attribut :

lang="fr"

Le contenu du paragraphe commence par :

Mon langage préféré est

Puis un élément est imbriqué dans le paragraphe :

<strong>HTML</strong>

Enfin, le paragraphe se termine avec :

</p>

L’imbrication est correcte parce que

strong

, ouvert à l’intérieur de

p

, est refermé avant le paragraphe.

Reprenez le fichier

index.html

créé dans la leçon précédente.

Remplacez son contenu par :

<p lang="fr">Bonjour ! J’apprends <strong>HTML</strong>.</p>
<p>Je comprends maintenant comment fonctionne un élément HTML.</p>

Puis :

1. Enregistrez le fichier.

2. Ouvrez ou actualisez la page dans votre navigateur.

3. Vérifiez que les deux paragraphes apparaissent.

4. Dans la première ligne, repérez la balise ouvrante du paragraphe.

5. Repérez son attribut et indiquez son nom et sa valeur.

6. Repérez l’élément imbriqué dans le paragraphe.

7. Repérez la balise qui ferme cet élément imbriqué.

8. Repérez enfin la balise qui ferme le paragraphe.

Pour terminer, expliquez avec vos propres mots pourquoi cette écriture est correcte :

<p>J’apprends <strong>HTML</strong>.</p>

et pourquoi celle-ci ne l’est pas :

<p>J’apprends <strong>HTML.</p></strong>

Une balise HTML est délimitée par les caractères :

<
>

Un grand nombre d’éléments HTML utilisent une balise ouvrante, du contenu et une balise fermante.

Par exemple :

<p>Bonjour</p>

<p>

est la balise ouvrante.

Bonjour

est le contenu.

</p>

est la balise fermante.

L’ensemble constitue un élément HTML.

Un attribut ajoute une information à un élément et se place dans sa balise ouvrante.

Par exemple :

<p lang="fr">Bonjour</p>

Dans

lang="fr"

,

lang

est le nom de l’attribut et

fr

sa valeur.

HTML permet également d’imbriquer des éléments :

<p>J’apprends <strong>HTML</strong>.</p>

Lorsqu’un élément est ouvert à l’intérieur d’un autre, il doit être refermé avant l’élément extérieur.

Le navigateur peut parfois tolérer des erreurs, mais notre objectif est d’écrire un HTML correctement structuré.

Dans la suite du cours, nous utiliserons cette syntaxe pour découvrir progressivement les éléments nécessaires à une véritable page HTML.