DEVENIR-WEBMASTER.COM Log In
 5
Faire le quizz download close

Structure minimale d'une page HTML

Visiter ma chaine Youtube

# Les éléments HTML, HEAD, BODY close

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.

Eléments HTML HEAD et BODY

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.

# Le Doctype close

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.

Balise Doctype du HTML5

Vous pouvez également rencontrer d'autres doctype en particulier ceux relatifs à du code HTML4.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>

# La langue du document close

Un attribut doit être ajouté à la balise ouvrante HTML pour préciser la langue utilisée dans le document. Si c'est un document en français il faut mettre :

Langue du document HTML

# Le jeu de caractères close

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.

Jeu de caractère du document HTML

# La prise en compte de la taille de l'écran close

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".

Meta Viewport

Je fais le point

Structure minimale HTML

# Partager une feuille de style ou un code javascript close

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.

Importer du CSS

C'est la même chose avec le code Javascript sauf qu'ici on va utiliser un autre élément.

Importer du JAVASCRIPT

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 close

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.

Balise TITLE

# La meta-description close

L'élément meta description. Ici je place une description de la page en 156 caractères maximum.

Balise Meta Description

Ces informations si elles sont présentes peuvent apparaître dans le descriptif du résultat d'une recherche.

Resultat d'une recherche

# La meta-robots close

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.

Meta Robot pour gérer l'indexation

Je peux leur demander le contraire c'est à dire de ne pas référencer la page et de ne pas suivre les liens.

Meta Robot pour bloquer l'indexation

Vous comprenez les combinaisons que vous pouvez faire.

# La structure minimale finale close

Ce qui donne le code suivant pour une structure minimale prenant en charge le référencement.

Stucture minimale avec référencement

Vous pouvez télécharger ici un fichier contenant une structure de ce type