Une page web contient une structure de base composée des éléments suivants : la déclaration, la balise html, la balise head et la balise body.
« Sans déclaration de type de document (Doctype ou Doctype Declaration en anglais, NdT), votre document HTML n'est tout simplement pas valide et la plupart des navigateurs qui vont visualiser votre document vont passer en mode « quirk », c'est-à-dire qu'ils vont considérer que vous faites absolument n'importe quoi, et en retour vont n'en faire qu'à leur tête. Vous aurez beau être le plus grand champion du HTML que la Terre ait jamais porté, votre HTML aura beau être impeccable et votre CSS parfaite, s'il n'y a pas une déclaration de document, ou si ce n'est pas la bonne, vos pages web pourraient bien finir par ressembler à des pages construites par un bébé gibbon myope et borgne atteint de troubles de l'apprentissage. »
Patrick Griffiths (Extrait du site Pompage pour démonstration).
La déclaration indique principalement au navigateur la version du langage html que l'on utilise. En effet au fil du temps le W3C a fait évoluer ce langage en faisant apparaître de nouvelles balises, d'autres devenant obsolètes (deprecated).
La déclaration doit se placer en début du document.
Exemple de déclaration :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
L'élément qui indique la version du langage html utilisé dans cet exemple est "XHTML 1.0 Strict". Strict signifie que le code de la page respecte scrupuleusement la norme XTML 1.0. L'adresse web qui suit pointe sur une page qui contient cette norme, le navigateur peut l'utiliser pour comprendre le code de la page qu'il va devoir interpréter.
Autres exemples de déclaration : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Dans ces déclarations les termes Transitional et Frameset sont utilisés. Transitional veut dire que l'on peut encore utiliser les balises devenues obsolètes dans la version html précisée. Framset est a utiliser si la page contient des frames (aujourd'hui il est vivement déconseillé d'utiliser des frames).
La balise ouvrante html suit la déclaration. Elle indique le début du document html et englobe tous les éléments du code. La balise fermante html doit donc se placer en fin de document.
La balise head correspond à l'entête du document. Elle se place à l'intérieur de la balise html. Toutes les informations contenues dans head ne seront pas visibles dans la fenêtre du navigateur. Le rôle de cette balise consiste principalement à donner des informations utiles au navigateur (pour afficher le contenu de la page) et aux ordinateurs parcourant le fichier comme les moteurs de recherche (description du contenu de la page). L'un des éléments à ne jamais oublier dans cet en-tête est la balise title. Elle participe à l'optimisation du référencement de la page dans les moteurs de recherche.
Cette balise correspond au corps de la page, c'est-à-dire au contenu qui sera affiché par le navigateur. Tout élément devant s'afficher dans une page web doit donc forcément être placé à l'intérieur de la balise body.
Voici ce à quoi doit ressembler cette structure de base d'une page html : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>HTML : langage de balises pour les sites web</title> </head> <body> </body> </html>
Toute balise à une signification liée à son nom. On peut compléter cette signification en donnant des informations secondaires à l'aide d'attributs et de leurs valeurs que l'on écrit de la manière suivante : <nomDeLaBalise nomAttribut="valeur(s)" nomAttribut2="valeur(s)" nomAttribut3="valeur(s)">Elément caractérisé par la balise</nomDeLaBalise> On constate : - Que les couples attribut/valeur ne sont indiqués que dans la balise ouvrante (jamais dans la balise fermante qui elle ne contient que le nom de la balise). - Que le nom de l'attribut est toujours suivi du signe =. - Que la valeur est toujours entourée de guillemets. - Qu'il n'y a pas de limite concernant le nombre de ces couples.
Important : Les noms des attributs sont imposés par le langage html. L'association d'attributs à une balise particulière obéit également des règles. On ne peut associer n'importe quel attribut à n'importe quelle balise. Même remarque concernant l'association des valeurs à un attribut. Toutefois certains attributs peuvent contenir des valeurs de notre propre choix comme pour les attributs class, id, href, alt, etc. pour lesquelles on peut définir librement les valeurs (class="toto" par ex.).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HTML : langage de balises pour les sites web</title> <meta name="description" content="Apprentissage du langage html : structure d'une page html, balise, attribut / valeur, etc." /> </head> <body> </body> </html>
Pour la balise html on précise la langue utilisée dans la page. Apparition de deux balises meta dans la balise head. La première contenant charset=utf-8 permet au navigateur d'afficher correctement les caractères. Il faut que le fichier soit également encodé au moment de l'enregistrement dans cette norme (utf-8). Il existe d'autres normes comme iso-8859-1 qui correspond aux langues européennes, l'UTF-8 contient elle toutes des langues. Pour plus de précisions consulter le fichier XhtmlDeclaration.pdf. La seconde balise meta permet de faire une description en quelques mots de la page. Ce texte est susceptible d'apparaître dans la page de résultat de recherche d'un moteur de recherche. Remarque concernant la balise meta : Cette balise est dite à la fois ouvrante et fermante, elle s'écrit <meta .... /> et non <meta ....></meta>. En effet, la balise meta ne peut caractériser un élément, elle n'a de sens que par elle-même. Elle n'entoure donc pas un élément. Il existe d'autres balises de ce type comme <br /> qui permet de faire un saut de ligne.
La gestion de l'affichage des caractères spéciaux et accentués peut également passer par l'utilisation des entités.
Une entité s'écrit de la manière suivante : &nomOuNumeroEntite;.
Exemple : la lettre é correspond à l'entité é ou é.
Le charset=utf-8 utilisé dans la balise meta permet d'éviter de saisir dans le code source les entités en tapant directement les caractères spéciaux et accentués, mais dans certains cas il est nécessaire de faire appel à ces entités.
Dans l'exemple ci-dessus, l'entité représentant le é sera interprétée par le navigateur, on obtiendra alors l'affichage suivant : "la lettre é correspond à l'entité é ou é".
Pour obtenir l'affichage du nom des entités de cette phrase on doit remplacer le caractère & par l'entité correspondante : &.
Dans cette page toutes les balises écrites sont donc interprétées par le navigateur. Pour que ces balises s'affichent comme texte avec leurs chevrons on doit donc utiliser les entités < pour < et > pour >.
On appelle blancs l'ensemble des espaces saisis dans le code source. Celles-ci (en typographie, espace est féminin) sont obtenues à l'aide de la barre d'espacement, des touches tabulation (indentation) et entrée. Lors de l'affichage de la page, le navigateur ne tient aucun compte de toutes ces espaces sauf celle qui sépare un mot d'un autre (si plusieurs espaces séparent 2 mots, une seule de ces espaces sera retenue). Conséquences : - On peut utiliser dans le code source le nombre et le type d'espace que l'on désire pour optimiser la présentation et la lecture du code et ceci sans conséquence pour l'affichage dans le navigateur. - Les retours à la ligne pour le texte affiché dans le navigateur ne s’obtiennent pas en utilisant la touche entrée dans le code source.
Les retours à la ligne affichés dans le navigateur sont obtenus par l'utilisation des balises. Certaines balises provoquent ces retours, elles sont appelées balises de type bloc (block tag ou block element). Les autres balises sont dites de type en ligne (inline tag ou inline element), elles ne produisent pas de retour (cf. http://xhtml.com/en/xhtml/reference/). Par exemple la balise p qui signifie «paragraphe» est une balise de type bloc alors que la balise strong qui veut dire «important» est de type en ligne. A l'intérieur d'un paragraphe on peut faire appel à des retours à la ligne à l'aide de la balise br (cette balise est à la fois ouvrante et fermante).
Le contenu de la page doit être organisé et hiérarchisé. Certaines balises jouent ce rôle en attribuant aux éléments de body différents statuts permettant la mise en place d’une structure (titre, paragraphe, liste, tableau, formulaire, etc.). Important : toutes ces balises sont de type bloc. Ces considérations débouchent sur les règles suivantes : - Tous les enfants de body doivent obligatoirement être de type bloc. - A l’intérieur de body chaque élément doit être balisé. Le non respect de ces règles rend le document non conforme (cf. notion de conformité).
Les headers, h, correspondent a une échelle d’importance des titres : balises h1 à h6. Ainsi h1 désigne le titre principale, h2 les sous-titres, h3 les sous-sous-titres, etc. Dans une page, h1 devrait logiquement être unique mais ce n’est pas une obligation. Lorsque les pages contiennent des éléments hétéroclites l’utilisation de plusieurs h1 peut-être justifiée. Attention : les headers ne peuvent pas contenir d’élément de type bloc.
Sémantiquement parlant, un paragraphe est avant tout un ensemble de phrases qui développe une idée. Lorsque l’on change d’idée, on change de paragraphe. Pour faciliter la lecture d’un long paragraphe on peut faire appel aux retours à la ligne à l’aide d’une balise spécifique : br (break line). Attention : p ne peut pas contenir d’élément de type bloc.
Une liste est un paragraphe structuré contenant une suite d'articles. Il existe trois types de liste qui sont détaillés plus loin.
On ne doit recourir aux tableaux que pour présenter des données tabulaires c’est-à-dire des données définies chacune par un couple de propriétés (tableau à double entrées). On ne devrait donc pas faire appel aux tableaux pour réaliser la mise en page (technique que l’on utilisait avant l’apparition des feuilles de style). Cet aspect est discuté sur ces sites : http://www.alsacreations.com/actu/lire/100-a-table.html http://openweb.eu.org/articles/problemes_tableaux/ http://www.cybercodeur.net/weblog/presentations/seybold/ Les balises utilisées pour la réalisation d’un tableau sont détaillées plus loin.
Un formulaire permet à l’utilisateur d’envoyer des données. Il est composé de différents éléments comme les champs de saisis, les menus déroulants, les cases à cocher, les boutons radio, les boutons de soumission, d’annulation, etc. Tous ces éléments correspondent à des balises particulières présentées plus loin. Les pages contenant des formulaires forment les «points critiques» d’un site. Leurs réalisations requièrent une réflexion approfondie sur les questions d’ergonomie et de sécurité. Les balises utilisées pour la réalisation d’un formulaire sont détaillées plus loin.