Ne vous inquiétez pas si ces exemples utilisent des balises que vous n’avez pas apprises.
Vous les découvrirez dans les prochains chapitres.
HTML Documents
Tous les documents HTML doivent commencer par une déclaration de type de document: <!DOCTYPE html>.
Le document HTML lui-même commence par <html> et finit avec </html>.
La partie visible du document HTML se situe entre <body> et </body>.
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>Mon premier titre.</h1>
<p>Mon premier paragraphe.</p>
</body>
</html>
HTML Eléments
Un élément HTML se compose généralement d’une balise de début et d’une balise de fin, le contenu étant inséré entre les deux:
<balise de début>Le contenu se trouve ici…</balise de fin>
L’élément HTML est tout, de la balise de début à la balise de fin:
<p>Mon premier paragraphe.</p>
| Balise de début | Contenu | Balise de fin |
|---|---|---|
| <h1> | Mon premier titre. | </h1> |
| <p> | Mon premier paragraphe | </p> |
| <br> |
Les éléments HTML sans contenu sont appelés éléments vides. Les éléments vides n’ont pas de balise de fin, comme l’élément <br> (lequel indique un saut de ligne).
Eléments HTML imbriqués
Les éléments HTML peuvent être imbriqués (les éléments peuvent contenir des éléments).
Tous les documents HTML sont constitués d’éléments HTML imbriqués…
Cet exemple contient 4 éléments HTML :
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>Mon premier titre.</h1>
<p>Mon premier paragraphe.</p>
</body>
</html>
Exemple expliqué
L’élément <html> L’élément définit l’ensemble du document.
Il y a une balise de début <html> et une balise de fin </html>.
A l’intérieur d’élément <html> se trouve l’élément <body>
<html>
<body>
<h1>Mon premier titre.</h1>
<p>Mon premier paragraphe.</p>
</body>
</html>
L’élément <body> définit le corps du texte.
Il y a une balise de début <body> et une balise de fin </body>.
L’intérieur de l’élément <body> contient 2 autres éléments : <h1> et <p>.
<body>
<h1>Mon premier titre.</h1>
<p>Mon premier paragraphe.</p>
</body>
L’élément <h1> définit un titre.
Il y a une balise de début <h1> et une balise de fin </h1>.
Le contenu de cet élément est : Mon premier titre.
<h1>Mon premier titre.</h1>
L’élément <p> définit un paragraphe.
Il y a une balise de début <p> et une balise de fin </p>.
Le contenu de cet élément est : Mon premier paragraphe.
<p>Mon premier paragraphe.</p>
N’oubliez pas la balise de fin
Certains éléments HTML s’afficheront correctement, même si vous oubliez la balise de fin:
Exemple
<html>
<body>
<p>Ceci est un paragraphe.
<p>Ceci est un paragraphe.
</body>
</html>
L’exemple ci-dessus fonctionne dans tous les navigateurs, car la balise de fermeture est considérée comme facultative.
Ne comptez jamais là-dessus. Cela peut produire des résultats inattendus et / ou des erreurs si vous oubliez la balise de fin.
Eléments HTML vides
Les éléments HTML sans contenu sont appelés éléments vides.
<br> est un élément vide sans balise de fermeture (l’élément <br> définit un saut de ligne):
Exemple
<p>Ceci est <br> un paragraphe avec un saut de ligne.</p>
Les éléments vides peuvent être « fermés » dans la balise d’ouverture comme ceci : <br />.
HTML5 ne nécessite pas de fermeture des éléments vides. Mais si vous souhaitez une validation plus stricte ou si vous devez rendre votre document lisible par les analyseurs XML, vous devez fermer correctement tous les éléments HTML.
HTML n’est pas sensible à la casse
Les balises HTML ne sont pas sensibles à la casse : <P> signifie la même chose que <p>.
La norme HTML5 ne nécessite pas de balises en minuscules, mais W3C recommand en minuscules en HTML et exige en minuscules pour les types de documents plus stricts comme XHTML.
Nous utiliserons toujours des balises minuscules.