Structure d'un document HTML 5
Avant de créer des pages web et de leur donner un contenu, nous allons déterminer une
structure générale commune à toute page en conformité avec les spécifications HTML 5.
le principe des balises
balise = limite d'une boîte où l'on peut mettre des choses
<balise> chose </balise>
à chaque balise ouvrante <balise> ...... on associe une balise fermante </balise>
balises sans contenu : <autrebalise />
<balise> attribut1="valeur"; attribut2="valeur">...</balise>
commentaire : <!-- bla bla bla -->
Les éléments de base:
Le langage HTML 5 est une amélioration du langage HTML 4, avec des simplifications
par rapport à la version XHTML qui était de mise avant lui. Tout document peut donc
débuter de la même manière par la déclaration suivante:
Exemple : Structure minimale d’un document HTML 5
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>helo html</h1>
</body>
</html>
La déclaration DOCTYPE
précises. La déclaration DOCTYPE, obligatoire dans tout document, précise le type de
document qui va être créé.
L’élément racine <html>
L’élément <html> est l’élément racine du document, au sens XML du terme. 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>.
1
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. Cette valeur sera reconnue par les moteurs de recherche pour leur
permettre d’indexer les pages du site en effectuant un tri par langue.
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 :comme l'arabe).
Un élément <html> complet tel que nous pouvons l’utiliser s’écrira donc :
<html lang="fr" dir="ltr">
<!--suite des éléments inclus -->
</html>
1. L’en-tête d’un document : l’élément <head>:
L’élément <head> englobe un certain nombre d’informations utiles au bon affichage de
la page web. Ces informations dites métadonnées sont contenues dans six éléments différents
qui ont chacun un rôle bien déterminé. Il s’agit des éléments <base/>, <link />,
<meta />, <script>, <style> et <title> dont nous allons étudier les rôles respectifs. Aucun
d’eux n’a de répercussion directement visible dans la page et seul le contenu de
l’élément <title> sera visible, non dans la page mais dans la zone de titre du navigateur. Le
bloc d’en-tête a donc la structure suivante, dans laquelle seuls les éléments <title> et
<base /> ne doivent figurer qu’une seule et unique fois, les autres n’ayant pas de limites.
Exemple:
<head>
<title>Titre de la page</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<base href="[Link] />
<link rel="shortcut icon" type="images/x-icon" href="../images/[Link]" />
<meta name="Author" content="MOHAMMAD" />
<script type="text/javascript">
<!-- Scripts JavaScript -->
</script>
<style type="text/css">
<!-- Styles CSS -->
</style>
</head>
Remarque:
les seuls éléments <title>, <script> et <style> ont un contenu, et donc une balise fermante.
a) L’adresse de base : l’élément <base />
2
Il s’agit d’un élément vide et n’a donc pas de balise de fermeture. L’information qu’il
contient est donnée dans son unique attribut href dont l’utilisation est obligatoire. Le contenu
de cet attribut est une URL qui fournit l’adresse de base de tous les fichiers utilisés dans la
page quand leur adresse est transmise de manière relative. Si nous écrivons le code suivant :
<base href="[Link] />
2le navigateur ira chercher une image dont l’URL est indiquée sur le serveur par
/html/images/[Link] à l’adresse :1
[Link]
L’élément <base /> possède également l’attribut commun id, qui ne peut servir qu’à modifier
la valeur de l’attribut href au moyen d’un script JavaScript. selon la syntaxe suivante :
[Link](id_element).href=‘valeur’
b) Les documents liés : l’élément <link />
Comme le précédent élément, il s’agit d’un élément vide dont l’information est contenue
dans ses attributs. Il permet d’établir un lien entre la page HTML 5 en cours et un autre
document externe nécessaire à la page. Nous l’utiliserons particulièrement pour lier la
page à une feuille de style CSS contenue dans un fichier ayant l’extension .css ou un
script JavaScript contenu dans un fichier sous l’extension .js. L’utilisation de l’élément
<link /> crée l’incorporation virtuelle de ces documents dans le
code de la page web. On parle d’incorporation virtuelle car la page se comportera comme
si le code des fichiers externes faisait partie de la page, le contenu de ces fichiers n’étant
pas visible, même en affichant le code source de la page. La liaison avec les fichiers externes
est déterminée par les attributs rel, type, href, hreflang,
media et sizes.
L’attribut rel indique le nom de la relation à établir avec le fichier externe. Il peut
prendre les valeurs suivantes :
– rel="stylesheet" si le fichier externe est une feuille de style. – rel="alternate" si le fichier est
une page alternative (de rechange, proposée aux visiteurs
dans les navigateurs). – rel="shortcut icon" ou "icon" pour faire référence à l’icône identifiant
le site et qui s’affiche devant l’adresse dans les navigateurs les plus conformes. –
rel="previous" ou rel="prev" si le fichier désigné est la page précédente dans l’ordre
normal de consultation du site. – rel="next" si le fichier est la page suivante dans l’ordre
normal de consultation du site. – rel="help" si le fichier est la page d’aide.
L’attribut type précise le type de contenu du fichier externe. Il peut par exemple
prendre les valeurs suivantes :
type = "text/css" pour une feuille de style CSS
type = "text/javascript" pour un script JavaScript
type = "text/html" ou "text/xml"
type = "images/x-icon" pour créer une icône
L’attribut href contient l’adresse relative ou absolue de la ressource externe associée.
3
L’attribut hreflang – qui, comme lang, prend pour valeur un code de langue –
précise la langue utilisée dans le document cible.
L’attribut media indique le type de média concerné par le document externe. Nous
l’utiliserons en particulier pour lier une feuille de style en précisant le type de média
visé par les styles du document CSS. Les valeurs de l’attribut media sont screen
(écran d’ordinateur), print (imprimante), tty (télétype), tv (téléviseur), projections
(rétro ou vidéoprojecteur), handheld (PDA, téléphone), braille (terminal braille), aural
(navigateurs oraux) et all (tous les médias).
L’attribut sizes indique la taille des icônes en particulier quand l’attribut rel vaut icon.
Sa valeur doit comporter deux nombres entiers séparés par les caractères x ou X. À
titre d’exemple, nous pouvons écrire les codes suivants pour l’élément <link/> :
1. Pour lier une feuille de style :
<link rel="stylesheet" type="text/css" href="[Link]"/>
2. Pour lier plusieurs feuilles de styles en précisant le média concerné :
<link rel="stylesheet" type="text/css" href="[Link]" media="screen"/>
<link rel="stylesheet" type="text/css" href="[Link]" media="print"/>
3. Pour lier un script JavaScript :
<link rel="script" type="text/javascript" href="[Link]"/>
4. Pour créer une icône dans la barre d’adresse :
<link rel="icon" type="images/x-icon" href="/[Link]"/>
5. Pour créer un lien de dépendance vers un document :
<link rel="next" type="text/html" href="[Link]" />
<link rev="prev" type="text/html" href="[Link]" />
6. Pour créer un lien vers la page d’accueil :
<link rel="start" type="text/html" href="[Link]" />
c) Les commentaires
Il est toujours utile de commenter votre code HTML 5, comme tout code informatique
d’ailleurs, pour en permettre une meilleure compréhension, en particulier pour le relire un
certain temps après l’avoir écrit. Tous les commentaires que vous écrirez seront ignorés par le
navigateur, et vous pouvez donc vous exprimer librement. Pour placer un commentaire, vous
devez l’ouvrir avec les symboles <!--, et le fermer avec les symboles -->. N’oubliez pas de
fermer vos commentaires, sinon tout ce qui suit sera encore interprété en tant que tel,
provoquant une erreur. Par exemple, on aura :
<!-- Voici un commentaire HTML qui peut comporter plusieurs lignes sans problème -->
d) Les méta-informations : l’élément <meta />
L’élément <meta /> est également un élément vide pour lequel l’information est contenue
dans ses attributs. Ces informations ne sont donc pas visibles dans la page mais elles sont
destinées au serveur web, aux navigateurs et aux moteurs de recherche. Chaque information
est identifiée par un nom et un contenu. Le nom de l’information est défini dans les attributs
name ou http-equiv dont les rôles sont similaires, et la valeur associée est contenue dans
l’attribut content sous la forme suivante :
<meta name="nom1" content="valeur1" />
<meta http-equiv="nom2" content="valeur2" />
Si nous utilisons l’attribut http-equiv, l’information indiquée dans l’attribut content sera
présente dans les en-têtes HTTP envoyés par le serveur au navigateur sous la forme de
couple nom/valeur. La plupart des valeurs des attributs name et http-equiv sont des mots-clés.
Nous allons nous arrêter sur la signification et l’utilité des plus courants d’entre eux.
name="author" désigne le nom de l’auteur de la page sans pour autant créer un
copyright
4
<meta name= "author" content="MOHAMMAD" />
name="keywords" : cette valeur est très importante pour le créateur de site car son
incorporation dans un document sert à l’indexation des pages web par les moteurs de
recherche et les annuaires. L’attribut content associé à name contient la liste des mots
clés que vous allez choisir comme les plus représentatifs du contenu du site. Chaque
mot ou expression est séparé des autres par une virgule. Il n’est pas rare d’utiliser
plusieurs lignes de mots-clés dans l’attribut content. L’utilisation de l’élément
<meta /> à cette fin est donc des plus utile car il va permettre une mise en valeur de
votre site qui apparaîtra dans les réponses fournies par les moteurs de recherche si vos
mots clés correspondent à la demande formulée par un internaute. Il est important de
bien choisir ses mots-clés pour qu’ils correspondent vraiment au contenu du site et
d’en multiplier les variantes dans la liste de l’attribut content. On pourra retrouver le
même mot au singulier et au pluriel, au masculin et au féminin. En revanche, il serait
contreproductif d’utiliser les mots les plus demandés dans les moteurs de recherche
sous prétexte d’attirer du public, alors qu’ils ne correspondent pas au contenu réel de
votre site. Exemple de code :
<meta name="keywords" content="HTML 4, XHTML, HTML 5, CSS 2, CSS 3,
design web, ➥ création de sites />.
name="description". Dans le même ordre d’idée que la valeur précédente, il indique
une brève description de l’information contenue dans le site. C’est cette description
qui apparaît dans le moteur de recherche et il est donc essentiel qu’elle soit courte et
correcte. Inutile de donner une description de 10 lignes alors que Google par exemple
n’en affiche que deux. Il est également fortement recommandé d’utiliser cet élément
<meta /> car si vous ne fournissez pas vous-même une description de la page, Google
et les autres moteurs de recherche utilisent les premières lignes de votre page qui ne
sont pas nécessairement les plus explicites.
Exemple de code :
<meta name="Description" content="Le site du livre » HTML 5 et CSS 3
➥ » de MOHAMMAD Editions Eyrolles" />
http-equiv="refresh". Quand il est associé à l’attribut content qui a pour valeur un
nombre de N secondes, son utilisation permet de forcer le navigateur à recharger la
page toutes les N secondes. On procédera ainsi pour un site aux informations
renouvelées très fréquemment, par exemple un site de cotation boursière, ou pour
afficher l’heure régulièrement par exemple à l’aide d’un script JavaScript ou PHP.
Vous pouvez également utiliser cet élément pour rediriger automatiquement le visiteur
vers une autre page du même site ou encore d’un autre site. On appliquera cette
technique si le contenu du site a changé de nom de domaine. Pour cela, l’attribut
content doit contenir le nombre N de secondes avant lequel la redirection sera
effectuée, suivi d’un point-virgule (;) et de l’URL absolue de la nouvelle page. Par
exemple, pour rediriger vers une autre page au bout de dix secondes, écrivez le code
suivant :
<meta http-equiv="refresh" content="10; http:/[Link]/index/>
http-equiv="Content-type". Cette valeur de l’attribut permet de définir simultanément
le type du document et le jeu de caractères employé dans la page. Comme nous
l’avons déjà signalé, il faut l’utiliser impérativement si le jeu de caractères n’a pas été
précisé, ou si cette information est absente, comme dans le cas des pages PHP. Si cette
5
déclaration n’est pas effectuée, l’utilisation de cet élément <meta /> est indispensable
sous peine de voir le document non validé. L’attribut content contient alors le type du
document suivi d’un point-virgule puis le code du jeu de caractères. Ce qui donne par
exemple le code suivant :
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
e) Les scripts internes : l’élément <script>
JavaScript. Nous aurions par exemple le code suivant :
<script type="text/javascript" src="[Link]
</script>
Il est toujours possible d’incorporer du code JavaScript dans une page de code au moyen
de l’élément <script> le code du script est inclus entre les balises <script> et </script>. Dans
ce cas, seul l’attribut type est requis. Il est d’usage courant d’inclure tout le code JavaScript
dans un commentaire situé à l’intérieur de l’élément <script> pour qu’il ne soit pas interprété
par les navigateurs dépourvus
d’interpréteur (s’il en existait encore !) mais aussi et surtout si le visiteur a volontairement
interdit l’exécution des scripts JavaScript.
Exemple écrire le code suivant :
<script type="text/javascript">
<!--
function debut()
{alert(‘Bonjour HTML 5’);}
-->
</script>
En plus de l’attribut id commun à la plupart des éléments, l’élément <script> possède
également les attributs suivants dont le rôle est annexe par rapport aux précédents. • charset
pour préciser le jeu de caractères utilisés dans l’élément. • defer dont la seule valeur autorisée
est defer. S’il est utilisé, l’interpréteur JavaScript du navigateur n’interprète pas le code
contenu dans l’élément avant l’affichage de la page, ce qui rend l’affichage plus rapide. Cet
attribut ne sera utilisé que si le code ne contient pas d’instructions provoquant un affichage
direct dans la page du type de celles réalisées au moyen de la fonction write ().
À la différence des autres éléments présents dans l’en-tête du document, l’élément <script>
peut être utilisé également dans le corps du document.