Document HTML valide
Extrait de la formation vidéo
Document HTML valide
Dans cette session de formation, nous allons apprendre comment écrire un document HTML Valide.
Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner ces éléments individuels pour former une page HTML entière valide.
L’exemple de code suivant représente une page HTMl valide et contient plusieurs éléments que nous allons découvrir dans cette session de formation.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page test</title>
</head>
<body>
<p>Voici ma page web</p>
</body>
</html>
Type de document : <!DOCTYPE html>
Quand HTML était jeune (vers 1991/2), les doctypes étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d’autres choses utiles. Habituellement, ils ressemblaient à ceci :
1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Cependant, de nos jours personne ne se soucie vraiment d’eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien.
<!DOCTYPE html> est la chaîne de caractères la plus courte qui soit un doctype valide. C’est tout ce que vous avez vraiment besoin de savoir.
1
<!DOCTYPE html>
L’élément <html></html> :
Cet élément est le contenant de tout le code de la page et il est parfois connu comme l’élément racine.
1
2
3
<!DOCTYPE html>
<html>
</html>
L’élément <head></head>.
Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Je vous en dis plus à ce sujet dans les sessions suivants.
1
2
3
4
5
<!DOCTYPE html>
<html>
<head>
</head>
</html>
<meta charset="utf-8"> :
Cet élément définit que le jeu de caractères à utiliser pour votre document qui est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues.
Actuellement, il peut pour l’essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n’y a aucune raison de ne pas définir cela et il peut permettre d’éviter certains problèmes plus tard.
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
</html>
L’élément title : <title></title>
Il définit le titre de la page, celui qui s’affiche dans l’onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l’ajoutez aux favoris.
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page test</title>
</head>
</html>
l’élément <body></body> :
Il contient tout le contenu que vous souhaitez afficher aux internautes lorsqu’ils visitent votre page, que ce soit du texte, des images, des vidéo ou autre.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page test</title>
</head>
<body>
<p>Voici ma page web</p>
</body>
</html>
Pratique - Création d’un document html valide
Conclusion
Nous avons vu comment créer un document html valide. Il contient l’élément racine html, l’élément head contenant les métas informations de notre document, et l’élément body qui contient le contenue visuel de la page.
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ma page test</title>
</head>
<body>
<p>Voici ma page web</p>
</body>
</html>
