Formation HTML

La syntaxe du HTML

Les balises

Une balise peut être considérée comme un système de parenthèses.
Tout ce qui est inclus entre la balise ouvrante et la balise fermante obéira à celle-ci :
mon texte
Comme pour les parenthèses en mathématiques la logique d'imbrication doit être respectée :
- mon texte : correct,
- mon texte : incorrect.
Une balise peut comporter un (ou plusieurs) attributs ayant chacun une valeur mise entre guillemets.
La syntaxe générale est : <nom-balise attr="val">xxxxxxxxx</nom-balise>

Les commentaires

Une zone HTML se commente en la plaçant entre .
Dans certains cas des commentaires sont nécessaires pour éviter de perturber des navigateurs tentant d'interpréter un contenu ne leur étant pas destiné
- ne concerne que les vieux navigateurs,
- ceux d'un autre millénaire !

Exemple de masquage de code javascript :

<body>
   <script type="text/javascript">
   <!--
   document.write("Bonjour")
   -->
   </script>
</body>

Spécificités xHTML

Une balise sans contenu devra être auto-fermante.
Exemple :
- La balise   (saut de ligne)
- La balise <hr/> (trait horizontal)
Les vieux navigateurs peuvent exiger la présence d'un espace avant le / :  .
Un attribut sans valeur nécessaire aura la valeur de son nom.
Exemple :
- <input type="text" disabled="disabled"/>

Spécificités xHTML

En tout début de fichier doit figurer le prologue XML (déclaration de conformité) :
- ceci est impératif pour tout document XML de version autre que 1.0,
- xHTML utilisant la version XML 1.0 cette déclaration pourra être omise,
- l'encodage des caractères peut être précisé ici par le mot encoding=,
- cette déclaration n'existe pas en HTML 4.0.
Exemple de prologue XML : <?xml version="1.0" encoding="UTF-8"?>

Doit également figurer une déclaration de type de document (DTD) :

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

Spécificités xHTML

la norme XML impose de mentionner l'espace de nommage en tant qu'attribut de la balise html.

<html xmlns="http://www.w3.org/1999/xhtml">
......
</html>

Il faut respecter strictement la hiérarchie HTML :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Texte</title>
<!-- la balise de titre est dans partie head -->
</head>
<body>
<!-- ici le contenu du document html -->
</body>
</html>

Le xHTML est sensible à la casse. Les noms sont à priori en minuscules.

La DTD

La DTD permet d'indiquer le type de HTML choisi.
Cette instruction existe en HTML comme en xHTML.
Quelques exemples de DTD :

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

<!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.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">

La DTD

En HTML 4 et xHTML 1, il existe 3 variantes modulant le respect de la norme déclarée :
1. strict (à choisir de préférence). le respect strict de la norme est seul toléré. Il faut impérativement utiliser les CSS.
2. transitional (s'il n'y a pas d'alternatives). C'est un compromis permettant l'utilisation de différents éléments et attributs classés en cours d'abandon ou déprécié par le W3C.
3. Frameset (à éviter). Identique à transitional mais permettant l'utilisation de frames qui sont maintenant dépréciées.

Encodage des caractères

Il est possible de spécifier l'encodage des caractères avec la balise meta :

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

Il est possible d'utiliser des macros de la forme : &code; permettant l'écriture suivante :

symbole	macro	nom
é	é	e accent aigu
À	À	A accent grave
û	û	u accent circonflexe
Ï	Ï	I tréma
&	&	esperluette
<	<	inférieur
€	€	euro
...

Structure minimale xHTML1.X

<?xml version="1.0" encoding="UTF-8"?>
<!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">
     <head>
          <title>le titre de la page</title>
     </head>
     <body>
          <h1>le titre de la page</h1>
     </body>    
</html>

Spécificités (x)HTML 5.0

En HTML 5 la déclaration de DOCTYPE a été simplifiée :
```
<!DOCTYPE html>
```
En xHTML 5 la déclaration de DOCTYPE n'est pas nécessaire.
Le validation d'un document XML se fait par un document XML appelé schéma (XSD).
La norme n'étant pas encore stabilisée le schéma de validation xHTML 5 n'est pas disponible.
Les entités définies dans les DTD sont à éviter en xHTML, en cas de nécessité (telle que limitation de la saisie) il est possible d'avoir recours à Ӓ.

Les navigateurs pourront interpréter le code grâce à l'espace de nommage http://www.w3.org/1999/xhtml, la validation n'étant pas leur rôle.

Il faudra néanmoins que le document soit un XML bien formé pour pouvoir être parsé.

Le jeu de caractères UTF-8 est amplement suffisant pour ne pas nécessiter l'utilisation des entités HTML à l'exception des 5 entités de bases : & <, >, ", '.

Validation du (x)HTML 5.0

Il existe un validateur permettant de vérifier la syntaxe d'un document (x)HTML5.
C'est une version expérimentale que ne sera garantie qu'après la sortie officielle de la norme.
Cette version permet de vérifier les la conformité de l'utilisation des balises.
Pour valider des documents internes il est possible de l'installer en local mais uniquement sur des architecture de type UNIX : Linux, MacOSX....

Marche à suivre pour installer le validateur sur une machine Linux Ubuntu :

# mkdir checker
# cd checker
# hg clone https://bitbucket.org/validator/build build
# python build/build.py all
# python build/build.py all # il le faut bien 2 fois

Suite à l'exécution de la dernière commande le validateur est accessible via le port 8888, de plus si le validateur HTML du W3C est installé celui-ci dirigera automatiquement les requête de validation HTML5 sur ce validateur.

Pour installer le validateur du W3C sur Linux Ubuntu :

# aptitude install w3c-markup-validator

Structure minimale xHTML 5.0

<?xml version="1.0" encoding="UTF-8"?>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
          <title>le titre de la page</title>
     </head>
     <body>
          <h1>le titre de la page</h1>
     </body>    
</html>

Documentation

La hiérarchie des balises xHTML1.1 : http://giminik.developpez.com/xhtml/.
Ce site présente :
- la liste exhaustive des balises xHTML1.1,
- la liste exhaustive des attributs des balises xHTML1.1,
- les règles d'imbrication des différentes balises.
Le validateur (x)HTML5 : http://about.validator.nu.
Le validateur du W3C : http://validator.w3.org.