Structure minimale d'une page HTML
#1
Les éléments HTML, HEAD, BODY
Votre code HTML doit être mis en place à l'intérieur d'une structure HTML minimale.
C'est nécessaire pour que ce dernier soit analysé correctement par le navigateur et pour que la page soit visualisée correctement.
Les éléments HTML suivants doivent être mis en place.
Dans l'élément body on placera notre code.
Dans l'élément head on placera un certain nombre d'informations qui vont précéder l'analyse du code.
#2
Le Doctype
Un doctype c'est à dire un type de document doit être impérativement placé sur la première ligne de la page. Le doctype suivant indique dès le début de l'analyse du document qu'il s'agit d'un document HTML5. Ici j'informe le navigateur de la version du langage HTML que j'ai utilisé pour coder la page.
Vous pouvez également rencontrer d'autres doctype en particulier ceux relatifs à du code HTML4 (*ici plus précisément il s'agit de XHTML strict).
#3
La langue du document
Un attribut doit être ajouté à la balise ouvrante HTML pour préciser la langue utilisée dans le document.
#4
Le jeu de caractères
Je passe maintenant à ce qu'il faut mettre dans l'élément head. En premier il faut indiquer le jeu de caractères qui est utilisé pour encoder la page. Si vous voyez des é è ê qui s'affichent mal c'est qu'il y a un problème à ce niveau.
Pas forcément au niveau de la page d'ailleurs car c'est toute la chaîne de traitement AJAX / MYSQL.. qui doit elle aussi être configurée correctement.
#5
La prise en compte de la taille de l'écran
Ensuite je place un élément qui va permettre aux navigateurs des smartphones de contrôler la mise en page en procédant à des opérations de mise à l'échelle "automatique".
Je fais le point
#6
Partager une feuille de style ou un code javascript
Pour partager une feuille de style je dois créer un fichier séparé avec une extension CSS. Je place ensuite mes règles CSS dans ce ficher. Ensuite je dois dire au HTML d'importer ces règles.
C'est la même chose avec le code Javascript sauf qu'ici on va utiliser un autre élément.
#7
L'élément Title
Je pourrais en rester là mais comme je pense qu'il n'est jamais trop tôt pour aborder le problème du référencement je vais parler des éléments minimum pour un référencement.
L'élément title avec une description du contenu de la page en 65 caractères maximum. Le mieux est de cibler trois ou 4 mots clés placés dans une phrase.
#8
La meta-description
L'élément meta description. Ici je place une description de la page en 156 caractères maximum.
Ci-dessous vous avez le résultat de la recherche du site de Wikipédia. Le contenu de l'élément title apparaîtra systématiquement dans le résultat de la recherche. Par contre c'est le moteur de recherche qui décide ou pas d'utiliser le contenu de la balise méta description. Il lui arrive de choisir du contenu qui figure dans la page web s'il juge qu'il est plus pertinent que le contenu de la méta description par rapport à la recherche.
#9
La meta-robots
Enfin il faut dire aux robots ce qu'ils doivent faire. Ici je leur demande de référencer la page et de suivre les liens. Notez bien qu'il s'agit d'une demande et qu'aucun robot n'est obligé de vous écouter. La décision sera prise par rapport à l'intérêt "estimé" de la page.
Je peux leur demander le contraire c'est à dire de ne pas référencer la page et de ne pas suivre les liens. Par contre ici si vous demandez que la page ne soit pas référencée et bien elle ne le sera pas.
Vous comprenez les combinaisons que vous pouvez faire.
#10
La structure minimale finale
Ce qui donne le code suivant pour une structure minimale prenant en charge le référencement.
Vous pouvez télécharger ici un fichier contenant une structure HTML minimale de ce type.
