STRUCTURE D'UN FICHIER HTML


La structure globale d'un fichier html est la suivante, sachant que chaque balise entre crochet ouvre le module concerné et la mention / entre crochets ferme ce module. on remarquera cependant que certaines balises n'ont pas de fermeture.

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mon titre</title>
<meta name="description" content="mon sujet">
<meta name="author" content="mon nom">
</head>

<body>

</body>

</html>

Première ligne de code d’un fichier html le Doctype. Sans rentrer dans les détails, disons qu’il indique au navigateur quelle version du code html il doit utiliser. Ça lui permet d’aller plus vite et d’améliorer le rendu. Le dernier Doctype, officialisé il y a peu en 2015, est le html5:

<!DOCTYPE html>

Presque tous les documents sont encore en Transitionnal 4.01. Progressivement, il faut de préférence passer au html5.

Essentiellement, pour l’instant, le html5 permet de mettre des balises audio et vidéo.

Traquenard si on a une balise audio avec un Doctype transitional, ça risque de ne pas fonctionner.

<html>... </html>
ouverture et fermeture indiquant le type de programmation

<head> </head>
Le head contient des déclaratiosn générales. À retenir pour l'instant:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
permet l'affichage automatique des caractères propres à la langue

<meta name="viewport" content="width=device-width, initial-scale=1.0"> permet l'adaptation aux écrans de smartphones et tablettes.

<title>mon titre</title>
Le titre de la page est obligatoire. il s'affiche à la consultation du fichier dans l'onglet du navigateur.

<meta name="description" content="mon sujet">
Il est fondamental de renseigner la balise description. Notamment, elle est utilisée par les moteurs de recherche pour indiquer le contenu d'un site s'il s'agit de la page d'ouverture du site.

<body>... </body>
ouverture et fermeture du corps du programme

Astuce En pratique, au lieu d'écrire ce code, il est plus pratique de copier-coller le programme d'un fichier déjà réalisé (le plus proche du fichier à créer), puis supprimer l'intérieur (tout ou partie) entre les balises body et renseigner les champs du head.

SOMMAIRE    SUITE