Structure de la page
La structure minimale
Pour insérer du contenu sur une page web, le struct minimum est :
<!DOCTYPE HTML>
<html>
<head></head>
<body></body>
</html>
La première ligne indique la version du HTML que vous utilisez, ici du HTML5
La seconde ligne et la dernière délimitent la page HTML en elle même (le début et la fin)
La page HTML en elle-même est composée de 2 blocs :
- <head> : des instructions pour le navigateur web pour savoir comment afficher le contenu (lien CSS, titre de l'onglet ...)
- <body> : le contenu à afficher
Vous ne pouvez rien écrire en dehors de l'un de ces deux blocs.
Une erreur courante est de placer le menu de navigation ou le titre de votre avec le logo dans le head. Il ne faut pas confondre la région <header> qui est un bloc de construction de votre site avec le <head> qui est l'entête technique nécessaire au bon affichage de votre page.
Un supplément d'informations
Pour être plus spécifique lorsqu'on crée une page HTML, il convient d'ajouter quelques informations.
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="UTF-8">
</head>
<body></body>
</html>
L'attribut lang placé dans la balise html ouvrante indique la langue d'écriture de votre texte dans le site. Une erreur fréquente est d'utiliser les template pré-programmés des IDE et de ne pas changer cela.
Mais gradez à l'esprit que tout le code n'est qu'en anglais. Alors quel serait le besoin de le préciser dans la balise html ?
La balise meta placée dans le <head> n'est qu'une des balises meta, il en existe plusieurs. Celle-ci sert à mobiliser une table qui s'appelle UTF-8 qui contient la plupart des glyphes (caractères) de la planète. C'est pour cela que votre ordinateur, bien que paramétré en français est capable d'afficher les glyphes chinois, par exemple.
La partie SEO
Enfin, pour favoriser votre référencement mais également guider votre internaute (on parle d'ergonomie), vous allez pouvoir rajouter un titre et une description à votre page. Il s'agit là de SEO (référencement naturel) très efficace, voire même nécessaire.
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>Titre de ma page</title>
<meta name="description" content="phrase de description entre 150 et 300 caractères max">
<meta charset="UTF-8">
</head>
<body></body>
</html>
Le title s'affiche dans les onglets de votre navigateur web, avec l'icône au besoin :
Le title s'affiche également dans les résultats des moteurs de recherches. C'est sur ce texte que l'on clique pour accéder au site.
La meta description est une balise meta, comme celle du charset. Elle ne se ferme pas mais possède deux attributs :
- name="description" : on ne peut pas changer cette partie, c'est son nom !
- content="" : c'est cette partie là qui sera captée par les moteurs de recherches pour s'afficher dans leurs résultats.
