Accueil > Technicité > La structure générale d’une page (X)HTML

La structure générale d’une page (X)HTML

jeudi 28 août 2008, par Claire Mélanie impression

Mots-clefs :: HTML :: Tutoriels :: Tutoriels pour débutant ::

Voici comment se présente la structure générale ou squelette minimum d’un document HTML conforme aux normes éditées par le W3C (World Wide Web Consortium, organisme œuvrant pour l’uniformisation et l’harmonisation des standards du Web), et vous permettant un affichage optimum sur l’ensemble des navigateurs.


Notion préalable, la notion de balise.

Une balise html correspond au code placé entre < >.
Par exemple <head>.

Une balise peut être dite ouvrante <head> ou fermante </head>. Elle est ouvrante quand elle est utilisée pour initier la suite du code et fermante quand on arrive à la fin de ce que l’on voulait que la balise gouverne.

Pour que le code associé fonctionne il faut généralement avoir à la fois la balise ouvrante et la balise fermante, les deux formant un tout. Les balises (x)html sont généralement prédéfinies pour avoir tel ou tel effet sur le code situé entre l’ouverture et la fermeture.

Par exemple le texte situé entre la balise ouvrante <i> et la balise fermante </i> sera mis en italique.

Exemple de structure de base


A noter :
Le texte entre <!-- texte --> correspond aux commentaires apportés au sein du code.

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

<html dir="ltr" lang="fr">
<!-- 2 -->

<head> <!-- 3 -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 4 -->

<title>Eclairement</title> <!-- 5 -->

<meta name="description" content="Eclairement.com propose ses analyses sociales, culturelles et techniques pour un autre regard sur le monde et pour faciliter la vie dite moderne" /> <!-- 6-->

<!--7-->
</head>

<body><!--8-->

<!--9-->

</body>
</html>

1. la dtd

Il s’agit de ce qui est appelée déclaration de type de document, dtd ou encore doctype. C’est une déclaration initiale qui permet de préciser à quelles règles d’écriture sera soumis le code à suivre.

Pour faire une comparaison, ce serait comme de préciser que le texte à venir doit être écrit selon les règles de la grammaire française ou de la grammaire allemande. Dans le premier cas seuls les noms propres et autres exceptions prennent toujours une majuscule alors qu’en allemand tout nom prend toujours une majuscule.

Nous verrons ensuite comment choisir plus finement cette DTD, il en existe 6 mais pour un utilisateur pressé, c’est la dtd suivante qui est le plus souvent recommandée :

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

Le code ci-dessus permet d’aller chercher ces règles d’écriture là où elles sont hébergées, sur le site du consortium W3C .

2. la balise html

Le code correspondant permet d’indiquer que nous nous trouvons bien, ou que nous allons bien construire une page html.

Ont été ajoutées deux précisions (attributs) : le sens de lecture ‘dir=ltr » signifiant left to right, de gauche à droite ainsi que la langue du texte apparaissant dans le navigateur : fr pour français.

Cette dernière information n’est pas obligatoire. Certains considèrent même que cet ajout peut nuire à un bon référencement. Il y a cependant débat sur ce point (voir notamment le blog google).

La balise doit être fermée à la fin du document </html>

3. La balise ouvrante head

Elle permet que la suite du code, jusqu’à la balise fermante soit traitée de façon spécifique. On appelle cet ensemble l’entête du document.

La page html peut ainsi contenir des informations qui ne seront pas affichées dans la page du navigateur mais qui pourront servir par exemple à l’indexation de votre site.

4. encodage

Il s’agit d’une indication qui sert à l’interprétation des caractères (des lettres, signes, symboles) du texte de la page html.
Vous avez certainement tous rencontrés une page où les « é », les points d’interrogations s’affichaient pas ou mal (remplacés par un carré, un point d’interrogation, …). C’est que l’encodage choisi (la méthode de traitement) pour la page était ou mal choisi ou mal interprété par le navigateur.

Les deux choix les plus fréquents pour une langue comme le français comportant notamment des lettres accentuées sont les suivants :


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Nous reviendrons ultérieurement plus longuement sur le choix de l’un plutôt que de l’autre. Notez tout de même que le mieux pour être sûr de votre test d’affichage, est que votre navigateur soit réglé, pour la détection de l’encodage, en mode automatique.

Si vous décidez d’un encodage utf-8 mais que votre navigateur est réglé pour détecter et appliquer l’encodage iso-8859-1n cela pourra générer des erreurs.

Pour vérifier le réglage de votre navigateur : cliquez sur l’onglet « affichage » ou « afficher » de la barre d’onglets supérieure de votre navigateur, et aller jusqu’à « encodage » ou « encodage des caractères ».

Il est vrai cependant que tous les navigateurs ne possèdent pas l’option de détection automatique, dans ce cas, optez plutôt pour un navigateur réglé sur « utf-8 ».

5. La balise title

Elle est la balise qui permet de générer le nom de la page. C’est ce nom qui apparaît sur l’onglet correspondant du navigateur. Ce nom est modifiable pour chacune de vos pages.

Par exemple, lorsqu’il s’agit de votre page d’accueil, vous pourrez nommer votre page :

<title>Nom de votre site – accueil </title>

Mais s’il s’agit d’une page de rubrique, alors vous pourrez lui associer le nom de votre rubrique

<title>Nom de la rubrique – Nom du site</title>

Ainsi chaque page est personnalisée et permet à l’internaute de la repérer dans son navigateur parmi toute une série d’onglets ouverts.

6. Balise pour le référencement

Il s’agit ici d’une des aides au référencement. C’est un des rôles essentiels de la balise <meta>. Sont indiqués les éléments que l’on veut voir pris en compte par un moteur de recherche.

Ce sont pour une part ces informations, méta-tags qui permettront que votre site apparaisse comme résultat dans les moteurs de recherche.

Nous reviendrons ultérieurement sur ces questions de méta tag et de référencement.

7. Autres éléments

Cette partie correspond à tous les autres éléments qui peuvent être rajoutés à l’entête mais que nous verrons dans le cadre d’autres thématiques : appel de fichier css, appel de script javascript, éléments de css directement inclus, etc.

8-9. le "body"

La balise ouvrante <body> que l’on doit refermer à la fin ouvre à ce que l’on appelle le corps du document.

Ce corps de document contient ce qui s’affichera au final dans le navigateur. Il est composé d’un ensemble de balises
tableaux, formulaires, paragraphes, de div – boite – pour ce qui est de la structuration et de l’agencement ; textes, images, etc pour ce qui est du contenu à proprement parler.

L’ensemble est ici désigné par le numéro 9 et fera l’objet d’explications progressives.

A noter pour ne pas confondre :

on entend souvent parler de haut de page (header) et de pied de page (footer). Cette division-là ne correspond pas à la structure html elle-même mais à une hiérarchisation de la page pour une appréhension facilitée.

Les contenus de header comme de footer sont bien compris dans le body. Le body étant ce qui apparaît à l’internaute, le header comprendra souvent le logo du site voire aussi un menu horizontal.

Footer ou le pied de page renverra lui au bas de la page et à des contenus fixes tels des liens vers les mentions légales, le fait de contacter le webmestre, etc.

Pratique :

Vous pourrez trouver sur Alsacreations un formulaire permettant de générer cette structure de base, utile pour créer rapidement le squelette initial.

- Squelettor

Articles relatifs :

- Les codes couleurs HTML

- HTML, organiser le contenu de votre page

- HTML, la mise en forme du texte

- Faire défiler un texte en HTML


© Tous les textes et documents disponibles sur ce site, sont, sauf mention contraire, protégés par une licence Creative Common (diffusion et reproduction libres avec l'obligation de citer l'auteur original et l'interdiction de toute modification et de toute utilisation commerciale sans autorisation préalable).

+ Répondre à cet article (2 commentaires)
  • La structure générale d’une page (X)HTML

    22 septembre 2008 17:11, par David

    D’accord pour tout, sauf au sujet de lang="fr" :

    > d’autant qu’elle peut avoir un effet négatif sur le référencement.

    Google dit le contraire sur son blog !

    (PS : Google n’est pas "le référencement" en général, mais malheureusement dans notre vieille Europe il a la main-mise.)

    forum visiter mon site : Azur Dev

    repondre message

carre_trans Avec les mêmes mots-clefs
puce Recherche avancée sur Google
puce Vie privée : sécurisez votre navigation internet
puce Sécurisez vos échanges sous Android : chatter protégé
puce Sécurisez vos échanges : chatter protégé
puce Vie privée : sécurisez vos recherches internet
puce Gérer ses adresses e-mail d’envoi sous Gmail.com
puce Recherche avancée ou de l’usage des booléens
puce Apprendre à taper au clavier grâce à Dactylo 6.0
puce HTML, la mise en forme du texte
puce HTML, organiser le contenu de votre page : les balises de hiérarchisation
puce HTML, organiser le contenu de votre page : notions de base
puce Comment prendre une capture d’écran sous Windows XP et Vista
puce Comment faire un copier coller ?
puce Comment utiliser sa souris ?
puce Faire défiler un texte en HTML
puce Test du lecteur multimedia
puce Optimiser son contenu pour le référencement
puce HTML 5 un premier brouillon publié.
puce Codes couleurs HTML
puce Android et vie privée : Applications, permissions et localisation
puce Du vélo sous la pluie ou de l’art d’affronter les éléments
puce Microsoft étudiant : état des lieux des offres éducation 2013
puce 5 applications pour améliorer l’ergonomie de votre mobile Android.
puce Utiliser Python 101 : prise en main
puce Android : 5 applications pour améliorer votre productivité mobile.
puce Android : supprimer les sons de l’appareil photo du Galaxy Note 2.
Equipe Eclairement L'association
La lettre S'abonner
Facebook Twitter
Tutoriels pour débutant   Société   Culture générale   Recherche d’information bibliographique   Peinture   Urbanisme   Fable   Théâtre   BD   Europe   Windows Vista   Musique   Tutoriels   Education   Pages Ouvertes   Windows   Microsoft Office   Cinéma   Séries TV   Histoire   Edito   Android   Linux   Littérature   Spectacle   arts visuels   Photographie   Anime   Bases de données   Cours   Windows Mobile   Techniques   Windows 7   HTML   Poésie   Installation   Métier   Roman   Firefox   sport   Droit   Vie privée   Manga  
Eclairement © 1998 - 2012
Mentions légales - Contact - Partenaires