Bruxelles Formation CEPEGRA Olivier Céréssia 2012
PRÉAMBULE A mille lieues de la vision structuraliste de ses créateurs, la page HTML est devenue un document hybride mêlant structure, contenu, mise en page et scripts. La vocation purement sémantique de la page HTML a été pervertie avec les années. Par ailleurs, de versions en versions, les parseurs sont devenus de plus en plus tolérants aux erreurs de codage. La syntaxe simple et rigoureuse de l'html a été corrompue. Il était temps de reprendre tout à zéro et c est là qu est arrivé XHTML 1.0 Strict! En 1996, le W3C repart du SGML (Standard Generalized Markup Langage), le langage très complexe et puissant qui avait inspiré Tim Berners Lee et Robert Caillau pour créer leur langage simple : l'html (Hypertext Markup Language). En s'inspirant des grands principes du SGML, le W3C crée un nouveau langage, plus flexible, capable de faire face aux développements futurs du Web : le XML (extensible Markup Language). Le W3C a exploité les règles, les prescriptions et la syntaxe du XML pour créer ensuite le XHTML, un langage destiné spécifiquement à structurer les contenus des pages Web. Le XHTML est, en réalité, un des nombreux langages "enfants" du XML. 2
TABLE DES MATIÈRES PRÉAMBULE 2 APPRENDRE L XHTML 1.0 4 De l HTML au XHTML 1.0, une douce révolution... 4 L héritage du XML... 4 Pourquoi l XHTML et pas HTML5 directement?... 4 Déclaration de la DTD... 5 XHTML 1.0 Strict... 5 XHTML 1.0 Transitional... 5 Espace de nom... 6 En résumé... 6 Un document XHTML correct... 6 Structure du document 6 Casse des balises et attributs 7 Fermeture des balises 7 Imbrication des balises 7 Syntaxe des attributs 7 Attributs obligatoires 8 VALIDATION DU DOCUMENT 9 Le validateur du W3C... 9 3
APPRENDRE L XHTML 1.0 De l HTML au XHTML 1.0, une douce révolution Concrètement, le XHTML n'est pas très difficile à maîtriser car il ressemble beaucoup à l'html. En XHTML, on retrouve, par exemple, le principe de balisage du contenu (<balise> </balise>) ainsi que toutes les balises sémantiques de l'html (h1, p, a, ul, li, strong, em, ). Par contre, par rapport à l'html 4.01, toutes les balises et attributs esthétiques (b, i, font, size, face, ) ont disparu et la syntaxe, héritée du XML, est beaucoup plus rigoureuse. En fait, le XHTML, ce n est jamais que de l HTML à la norme XML! L héritage du XML Une page XHTML est un document XML exploitant le principe de langage ouvert du XML, l'xhtml possède bien entendu sa propre DTD. La DTD du XHTML est un document public, standardisé et universel créé par le W3C. Il définit toute une série de balises destinées à structurer sémantiquement le contenu d'une page Web : titres, paragraphes, liens, listes à puces, Pourquoi l XHTML et pas HTML5 directement? Effectuer la transition entre HTML4.0 et HTML5 ne peut se faire que par l apprentissage de la rigueur d écriture inhérente à l apparition de l XHTML 1.0 Strict. De plus, plus de 95% des sites Web présents sur la toile sont encore codés en XHTML 1.0 Strict. Pourquoi? C est simple : HTML5 est toujours en cours de développement et ne sera pas terminé avant juillet 2014. C est donc encore trop lointain pour définitivement oublier XHTML et passer directement à HTML5 mais c est aussi trop proche pour l ignorer, c est pourquoi une partie de ce chapitre est entièrement dédiée à l apprentissage de l HTML5, de ses nouveautés et de ses possibilités. 4
Déclaration de la DTD La première ligne du document déclare la DTD (Document Type Definition) à utiliser pour interpréter le code. Attention, il est important de respecter les majuscules et minuscules. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Comme on le voit, la DTD est publique et disponible sur le site du W3C. Toutefois, le navigateur ne doit pas la télécharger avant de pouvoir interpréter le code de la page car la DTD est déjà inscrite dans le code du parser. A l heure actuelle, il existe 3 versions de DTD pour le XHTML 1.0 : Strict, Transitional et Frameset. La version «Frameset» étant carrément obsolète, nous ne la verrons pas ensemble. Voyons ce qui différencie les deux autres versions. XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> Comme son nom l indique, cette DTD impose le codage sémantique le plus strict : elle ne reconnaît pas les balises et attributs esthétiques, les balises de frameset ni les balises "deprecated" (abandonnées depuis l'html 4.0 : center, u, s, strike, blink, ). Bien entendu, ceci a pour conséquence que la page XHTML ne peut plus contenir que du contenu structuré sémantiquement et que la mise en page et le formatage doivent être pris en charge par un autre langage : les CSS. Il n'est pas non plus possible de créer des frames avec cette DTD. Pour respecter pleinement les standards du Web, c'est toujours cette DTD qui doit être utilisée. XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> Cette DTD reconnaît toutes les balises de l'html 4.01, y compris les balises esthétiques et deprecated, mais pas les balises de frameset. Elle a été créée pour permettre une phase de transition lors du passage des techniques raditionnelles vers les techniques standards actuelles. Aujourd'hui, cette DTD ne devrait plus être utilisée. 5
Espace de nom La deuxième ligne du document contient la classique balise<html> complétée par plusieurs attributs facultatifs : - xmlns=http://www.w3.org/1999/xhtml Cet attribut définit l'espace de nom (name space) XML qui doit être utilisé par le parser XML. - xml:lang="fr" lang="fr" Cet attribut définit la langue principale du contenu du document. L'attribut lang="fr" présente une syntaxe plus classique et est destinée aux navigateurs plus anciens. En résumé Voici à quoi devrait ressemble un fichier XHTML 1.0 Strict vierge : <!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> <title>xhtml 1.0 Strict Contenu francophone Codage UTF-8</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body>... </body> </html> Un document XHTML correct Pour créer une page XHTML valide, insérer le prologue XML ne suffit pas. Il faut également respecter la syntaxe très stricte du XML dans tout le corps du document. On dit que le document XHTML doit être wellformed. En effet, les parseurs XHTML 1.0 ne sont plus autorisés à tolérer les erreurs de codage. Passons en revue la dizaine de règles syntaxiques à respecter. Structure du document Le document XHTML doit obligatoirement comporter les balises <html>, <head>, <title> et <body>. Et celle ci doivent être imbriquées et fermées correctement. <html> <head> <title> </title> </head> <body>... </body> </html> 6
Casse des balises et attributs Le XML est case sensitive, c'est à dire sensible aux différences majuscules/minuscules. Pour éviter tout problème, le W3C a décidé que les balises et attributs XHTML devaient être écrits en minuscules. <p>bonjour</p> Toutefois, la valeur des attributs, repris entre les guillemets, peut comporter des majuscules. <img src="image.gif" alt="texte alternatif" /> Fermeture des balises A toute balise d'ouverture doit correspondre une balise de fermeture. <p>bonjour</p> <ul> <li>1</li> <li>2</li> </ul> Les balises uniques doivent également être fermées avec le symbole '/' précédé d'un espace. <br /> <img src="img.gif" alt="image" /> <meta name="keywords" content=" " /> <input type="text" /> <hr /> Imbrication des balises Les balises doivent être correctement imbriquées : <strong><em>bonjour</em></strong> Par ailleurs, les imbrications de certaines balises sont interdites : Les balises inline ne peuvent pas contenir de balises block. La balise a ne peut contenir d'autres éléments a. La balise pre ne peut pas contenir les éléments img, object, big, small, sub ou sup. La balise de formulaire form ne peut contenir d'autres éléments form. La balise label ne peut contenir d'autres éléments label. Syntaxe des attributs Tous les attributs doivent être suivis du symbole '=' et leur valeur doit être mentionnée entre guillemets. <table width="100%"> <img src="img.gif" alt="image" /> 7
La notation compacte de certains attributs est interdite et doit être remplacée par la syntaxe complète. checked="checked" selected="selected" noresize="noresize" readonly="readonly" noshade="noshade" nowrap="nowrap" multiple="multiple" Attributs obligatoires Toute balise img doit posséder un attribut alt. <img src="img.gif" alt="texte alternatif" /> Toute balise script doit posséder un attribut type. <script type="text/javascript"> 8
VALIDATION DU DOCUMENT Le validateur du W3C Pour qu'une page XHTML soit déclarée valide, il ne suffit pas d'insérer le prologue, de tenter de respecter toutes les règles syntaxiques et de tester la page dans un navigateur, il faut qu'elle passe l'épreuve du validateur. Le validateur du W3C est un robot qui vérifie si la page XHTML respecte sa DTD ainsi que toutes les règles syntaxiques du XML. Si la page est valide, le robot produit un rapport de conformité et l'auteur est autorisé, s'il le souhaite, à afficher sur sa page l'icône de validation du W3C. Si la page n est pas valide, le robot liste les erreurs pour faciliter le débugage. Il est intéressant de noter que certaines extensions de vos navigateurs préférés offrent des validateurs de qualité sans devoir passer par le site du W3C. Pour trouver de quelles extensions il s agit, effectuez simplement une recherche sur les mots «html validation extension» sur Google. 9