Squelette d’une page HTML
Les bases d’un code HTML5 ressemblent beaucoup à celles rédigées à l’aide des versions précédentes HTML 4 et XHTML 1.x. On y retrouve un doctype suivi des éléments : <html>, <title>, <head>, <meta>, <link> et <body>.
1- Le Doctype (DTD)
Toute page HTML doit commencer par une déclaration de Document Type Definition (DTD), qui précise au navigateur quelle version de HTML est utilisée :
HTML 5 (Recommandé)
<!DOCTYPE html>
Pour les anciennes versions de HTML:
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. Le titre
Le titre est affiché par les navigateurs dans la barre. Il est également utilisé par les moteurs de recherche. Un bon titre est informatif, tout en restant relativement court. Il se déclare dans l’élément <title>.
<title> mon titre </title>
3. Langue de la page
fr pour le français, en pour l’anglais, es pour l’espagnol, ar pour l’arabe. Déclarer la langue utilisée est utile pour les synthétiseurs vocaux des navigateurs pour aveugles (qui en déduisent comment prononcer). Et pour les navigateurs qui peuvent en déduire s’il faut utiliser des guillemets anglo-saxons (“”) ou français (« »).
La langue est souvant attribué à la balise <html>:
<html lang="fr">
4. Les balises meta
Elles sont facultatives, mais importantes à la fois pour le navigateur qui a des renseignements sur la manière dont afficher la page, et pour les moteurs de recherche, qui s’en servent pour indexer vos pages. Le rôle des en-têtes dans une page HTML (comme dans un courrier électronique) est de donner des méta-informations plus ou moins importantes.
Exp: l’identité de l’auteur, le titre de la page, l’encodage, la langue utilisée, etc. Les en-têtes sont déclarées à l’intérieur de l’élément <head>.
4.1. Encodage de la page
La déclaration de l’encodage est importante pour le navigateur.
Le plus utilisé est UTF-8.
UTF-8 est l’abréviation de Universal Character Set Transformation Format – 8 bits. C’est est l’encodage de caractères informatiques conçu pour coder l’ensemble des caractères du répertoire universel de caractères. Plus 95% des sites web au monde utilise cet encodage.
<meta charset="utf-8">
4.2. Mots clefs
Cette balise meta est utilisée par certains moteurs de recherche pour indexer les pages. Ne mettez que les mots-clefs les plus significatifs, les moteurs n’aiment pas les listes trop longues.
<meta name="keywords" content=" mot-clef1, mot-clef2, mot-clef3" />
4.3. Description
Très utile pour les moteurs de recherche.
<meta name="description" content=" un texte de description de votre page" />
4.4. Auteur de la page
Vous pouvez déclarer plusieurs auteurs en séparant les noms par des virgules.
<meta name="author" content="Ali Hamid" />
5. Les références externes
Elles sont utilisées afin d’indiquer qu’un autre document est lié au document en cours. Cela peut être un script, une feuille de style ou encore un icône.
5.1. Référence à un script
Pour faire référence à un script, il faut le lier à votre page.
<script type="text/javascript src=javascript/mon_script.js"></script>
5.2. La balise link
La balise <link> permet de faire référence à de nombreux types de documents, mais les principaux sont les feuilles de style (CSS) et l’icône.
<!--Pour un fichier CSS:--> <link rel="stylesheet" type="text/css" href="css/mon_fichier.css" /> <!--Pour un icône: --> <link rel="icon" type="image/png" href="images/icon.png" />
6. Le corps de la page
Le corps de la page est ce que le lecteur va voir via son navigateur.
IL est contenu entre balises <body>.
Exemple de squelette d’une page HTML
<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Titre de la page</title> <!-- mettez un titre significatif--> <link rel="stylesheet" href="style.css"> <!-- Utilisez le chemain relatif au fichier CSS--> <script src="script.js"></script> <!-- Ligne à envelver s'il n'y a pas de script--> </head> <body> ... <!-- Contenu de la page --> ... </body> </html>