HTML 5 - Page minimale
Le par Anthony Domps.
Dernière modification le
Lorsque l’on démarre un nouveau projet web à partir de zéro, il est essentiel de disposer d’une structure HTML standard et fonctionnelle qui servira de base à toutes les pages.
Voici un exemple minimaliste de cette structure de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="icon.png">
<title>Titre</title>
</head>
<body>
</body>
</html>
Décryptage technique de cette base :
<!DOCTYPE html>: Cette déclaration indique au navigateur que la page utilise HTML5, la version actuelle et la plus répandue du langage HTML. Elle assure un rendu conforme et évite les modes de compatibilité anciens.<html lang="fr">: L’élément racine de la page. L’attribut lang="fr" précise que le contenu est en français, ce qui améliore l’accessibilité et le référencement.<head>: Cette section contient les métadonnées de la page, invisibles pour l’utilisateur mais essentielles pour le navigateur et les moteurs de recherche.<meta charset="UTF-8">: Définit le jeu de caractères utilisé (UTF-8), permettant de gérer correctement tous les caractères spéciaux et accents.<meta name="viewport" content="width=device-width, initial-scale=1">: Indispensable pour le responsive design, ce meta tag garantit que la page s’adapte correctement aux différentes tailles d’écran, notamment mobiles.<link rel="icon" href="icon.png">: Permet d’associer une icône à la page, visible dans l’onglet du navigateur ou les favoris.<title>: Définit le titre de la page, affiché dans l’onglet du navigateur et utilisé par les moteurs de recherche.
<body>: Contient le contenu visible de la page, qui sera développé au fur et à mesure du projet.
Cette structure de base est valide au moment de la rédaction de cet article. Il est crucial d’utiliser un code conforme aux standards du W3C car cela assure une meilleure compatibilité entre navigateurs, améliore l’accessibilité et facilite la maintenance du code. Pourquoi valider son code ? (en anglais)