Structure d’un document HTML
Structure d’un document HTML
-
Objectif
- Connaitre la structure d’un document HTML
-
Structure général d’un document HTML5
- Avant de créer des pages web et de leur donner un contenu, il faut déterminer une structure générale commune à toute page en conformité avec les spécifications HTML 5.
- Les bases d’un document HTML5 ressemblent beaucoup à celles rédigées à l’aide des précédentes versions HTML 4 et XHTML 1.x. Rétro-compatibilité oblige.
- On y retrouve donc un doctype suivi des éléments les plus courants :
<html>, <head>, <title>, <meta>, <link>, <script> et <body>.
-
La notion de DOCTYPE
- La déclaration DOCTYPE, obligatoire dans tout document, précise le type de document qui va être créé.
- Dans HTML 5, cette déclaration est désormais réduite à sa plus simple expression par rapport à XHTML :
<!DOCTYPE html>; - Pour se rendre compte de la simplification, il suffit de le comparer avec un doctype du Html 4.0.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> - La déclaration DOCTYPE,sert à définir le type du document afin qu’il soit correctement interprété par le navigateur.
- Le doctype, aussi appelé DTD sert à indiquer au navigateur à quelles règles d’écriture obéit le code source de la page Html ou Xhtml. Il utilisera celles ci pour afficher la page selon les standards du W3C. Tous les navigateurs appliquant la même règle, vous êtes ainsi assuré d’un rendu identique entre les différents navigateurs.
- En l’absence d’un doctype, le navigateur ignore selon quelles règles il doit traiter la page. Il se rabat ainsi sur des procédures qui lui sont propres pour afficher vaille que vaille votre page Html. Ce qui peut entraîner des différences de restitution sensibles entre les différents navigateurs. Ce mode bancal est appelé mode compatibilité ou quirks (ou respect des standards) mode.
-
L’élément racine <html>
- L’élément <html> est l’élément racine du document. C’est donc lui qui est le parent de tous les autres, soit directement, comme <head> et <body>, soit indirectement par l’intermédiaire de ces derniers. Il est donc le conteneur de premier niveau
- placé en haut de la hiérarchie de tous les éléments du document. Il n’existe que deux éléments enfants de l’élément <html>. En HTML 5, son contenu est constitué de l’en-tête du document, introduit par la balise <head> et terminé par la balise </head>, puis par le corps du document introduit par <body> et terminé par </body>,
- L’élément racine possède les attributs communs dont les plus utiles sont :
- l’attribut lang dont la valeur est un code de langue normalisée qui indique la langue utilisée par défaut dans la page.
- La balise <Html> peut prendre comme attribut
lang="fr"qui spécifie que le document est en langue française. Cette information est fort prisée par les moteurs de recherche comme Google ainsi que par les synthèses vocales utilisées par les personnes malvoyantes. - Cette valeur sera reconnue par les moteurs de recherche pour leur permettre d’indexer les pages du site en effectuant un tri par langue. Elles n’apparaîtront dans Google par exemple que si l’utilisateur a choisi le bouton France ;
- L’attribut dir qui indique le sens de lecture du texte de la page. Il peut prendre les valeurs ltr pour le texte qui se lit de gauche à droite (langues européennes) ou rtl pour le texte qui se lit de droite à gauche (langues orientales : hébreu, arabe).
-
L’élément <head>
- Détermine l’entête du document et contient les méta-informations
- L’élément HTML <head> fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.
- Il ne peut y avoir qu’un seul <HEAD> par document. Il doit suivre la balise <HTML> ouvrante et précéder le <BODY>
- A l’intérieur de l’en-tête, on trouve le titre du document, qui est défini dans la balise <TITLE>, ainsi que d’autres informations définies dans les balises <META>, <BASE>, etc… qui s’appliqueront à l’ensemble de la page.
- Eléments HTML rattachés
-
TITLEConfère un titre au document; seul paramètre obligatoire -
BASE: Spécifie l’adresse de base du document HTML -
ISINDEX: Fournit les informations pour une recherche par mots-clé -
LINK: Décrit les liens entre le document et d’autres documents -
META: Fournit des informations utiles serveur/navigateur -
NEXTID: Crée un identifiant pour le document -
SCRIPT: Conteneur d’un script exécutable par le navigateur -
STYLE: Conteneur d’une déclaration de style : permet de définir et paramétrer le style général du document HTML -
L’élément <title>
- On y trouve la balise <title> qui sera le titre du document, sert en référencement (repris dans les résultats de recherche)
- Un seul titre est autorisé par document.
- La balise <TITLE> spécifie un nom pour votre page et le titre apparaîtra au-dessus de la barre de menu dans l’interface du navigateur. Il sera également visible dans le fichier des signets si un visiteur choisit d’enregistrer la page dans ses sites favoris.
- La balise <TITLE> est souvent négligée par les créateurs de pages HTML. Elle est pourtant primordiale pour assurer un marketing efficace des pages d’un site. Un titre évocateur et explicite sera accrocheur et provoquera peut-être des reconnexions.
- Un titre ne doit pas contenir d’éléments d’ancrage, de mise en forme ou de contrôle d’affichage.
- Les deux attributs :
Dir: la direction de lecture par défaut du texte contenu dans le document : ltr = left to right ; rtl = right to left . C’est un attribut générique qui peut donc être associé à beaucoup de balises HTML.Lang: permet de spécifier par un code associé la langue principale d’un élément. C’est un élément générique qui peut être associé à la quasi totalité des éléments HTML
