Le langage XHTML
Un langage de balisage
Afin de partir du bon pied, vous devez comprendre avant tout la notion de balise qui est la base de tout ce qu'on va faire par la suite. Dire que le XHTML est un langage de balisage revient à dire que la structure d'un document XHTML est créée à l'aide de balises.
Ces balises délimitent une fraction de code dans une page XHTML.
Attribut d'une balise
A part le nom de la balise, un attribut pourra être spécifié dans une balise. Une balise peut avoir aucun, un ou plusieurs attributs. Aux attributs, on affecte une valeur qui permet de donner un comportement spécifique à l'élément contenu dans une balise ou à donner des caractéristiques à la balise elle-même. Exemple d'attribut :
Code XHTML :
<img src= "image.jpg" />
src est l'attribut de la balise img et il prend comme valeur "image.jgp".
Ouverture et fermeture de balise
La balise principale à connaitre est la balise <html>< /html> qui délimite le contenu de la page XHTML. Cette balise tout comme certaines balises, est composée d'une balise ouvrante <html> et d'une balise fermante < /html>.C'est entre ces deux balises qu'on mettra le contenu associé.
Toutefois, il existe d'autres balises spécifiques qui ne nécessitent pas une balise fermante. Comme la balise <img / > que l'on vient de voir tout à l'heure par exemple. C'est une balise qui est ouvrante et fermante à la fois. Ce genre de balise définit donc sont contenu en elle-même. Une balise ouverte doit être fermée, soit par la balise fermante associée (comme <p> et </p>), soit en se fermant elle-même (comme <img .... /> )
Emboîtement des balises
Lorsqu'une balise contient d'autres balises, il y a des règles à respecter. Une balise peut contenir aucune, une ou plusieurs autres balises. On appel donc le contenant : l'élément parent et le contenu : l'élément enfant. Un élément peut avoir plusieurs enfants, mais ne peut avoir qu'un parent direct.
De plus, un élément ouvert à l'intérieur d'un autre doit obligatoirement être refermé avant la fermeture de son élément parent. Autrement dit, les balises sont emboitées les unes dans les autres en respectant la syntaxe suivante :
Code XHTML :
<parent> <enfant> </enfant> </parent>
L'erreur à éviter serait donc de faire comme ceci :
Code XHTML :
<parent> <enfant> </parent > </enfant>
Parfois, il existe une hiérarchie qui oblige certaines balises à contenir obligatoirement une balise d'un type donné. La balise <html> doit contenir les balises <head> et <body> et uniquement celles-ci. D'où l'ossature d'une page html :
Code XHTML :
<html> <head>
Entête
Code XHTML :
</head> <body>
Corps
Code XHTML :
</body> </html>
Type de balise
On va parler essentiellement de 2 types de balise XHTML tout au long des tutoriels :
- Les types bloc
- Les type en-ligne
Les balise de types bloc sont utilisées généralement pour structurer un document .Elle peuvent contenir d'autres éléments en bloc et/ou en-ligne, des données. Grosso modo, elles détiennent le rôle de conteneur.
Si un type bloc contient une phrase par exemple, un élément de type en-ligne dans le bloc peut par exemple être un mot. C'est pour cela qu'on utilise le plus souvent les éléments en-ligne ou inline pour donner une sémantique spécifique à quelques mots d'une phrase.
Un élément en-ligne peut être contenu dans un type bloc, mais l'inverse n'est pas valable. En effet, une balise de type en-ligne ne doit jamais contenir un élément en bloc.
Syntaxes de base
La grammaire du XHTML répond à certaines règles :
Bonne imbrication des balises
- Les balises doivent être correctement imbriquées les unes dans les autres en respectant leur hiérarchie.
Autrement dit, il ne faut jamais faire comme ceci :
Code XHTML :
<body><h1></body></h1>
Minuscules
- Les noms et les attributs des balises doivent s'écrire tout en minuscules.
Code XHTML :
<p>Ceci est correct</p> <P>Ceci ne l'est pas</P>
Fermeture des balises
- Les balises ont soit des balises fermantes comme la balise <body></body>, soit elles n'en ont pas. Dans le cas où il n'y a pas de balise fermante, il doit y avoir un "/" slash à la fin.
Code XHTML :
<input type="submit" />
Les attributs
- Les attributs doivent avoir une valeur explicite et la valeur doit être indiquée entre guillemets
Code XHTML :
<input type="checkbox" checked="checked" />
