XHTML - Guide rapide
XHTML signifie EXtendu HyperText MArkup Language. C'est la prochaine étape de l'évolution d'Internet. Le XHTML 1.0 est le premier type de document de la famille XHTML.
XHTML est presque identique à HTML 4.01 avec seulement quelques différences. Il s'agit d'une version plus claire et plus stricte de HTML 4.01. Si vous connaissez déjà HTML, alors vous devez accorder peu d'attention pour apprendre cette dernière version de HTML.
XHTML a été développé par le World Wide Web Consortium (W3C) pour aider les développeurs Web à passer du HTML au XML. En migrant vers XHTML aujourd'hui, les développeurs Web peuvent entrer dans le monde XML avec tous ses avantages, tout en restant confiants dans la compatibilité ascendante et future du contenu.
Pourquoi utiliser XHTML?
Les développeurs qui migrent leur contenu vers XHTML 1.0 bénéficient des avantages suivants:
Les documents XHTML sont conformes au XML car ils sont facilement visualisés, modifiés et validés avec des outils XML standard.
Les documents XHTML peuvent être écrits pour fonctionner mieux qu'avant dans les navigateurs existants ainsi que dans les nouveaux navigateurs.
Les documents XHTML peuvent utiliser des applications telles que des scripts et des applets qui reposent sur le modèle d'objet de document HTML ou sur le modèle d'objet de document XML.
XHTML vous offre un format plus cohérent et bien structuré afin que vos pages Web puissent être facilement analysées et traitées par les navigateurs Web actuels et futurs.
Vous pouvez facilement maintenir, modifier, convertir et formater votre document à long terme.
Étant donné que XHTML est une norme officielle du W3C, votre site Web devient plus compatible avec de nombreux navigateurs et il est rendu plus précisément.
XHTML combine la force du HTML et du XML. De plus, les pages XHTML peuvent être rendues par tous les navigateurs compatibles XML.
XHTML définit la norme de qualité pour vos pages Web et si vous suivez cela, vos pages Web sont comptées comme des pages Web de qualité. Le W3C certifie ces pages avec leur cachet de qualité.
Les développeurs Web et les concepteurs de navigateurs Web découvrent constamment de nouvelles façons d'exprimer leurs idées à travers de nouveaux langages de balisage. En XML, il est relativement facile d'introduire de nouveaux éléments ou des attributs d'élément supplémentaires. La famille XHTML est conçue pour accueillir ces extensions via des modules XHTML et des techniques de développement de nouveaux modules conformes à XHTML. Ces modules permettent de combiner des fonctionnalités existantes et nouvelles au moment du développement du contenu et de la conception de nouveaux agents utilisateurs.
Compréhension de base
Avant d'aller plus loin, voyons rapidement ce que sont HTML, XML et SGML.
Qu'est-ce que SGML?
C'est Sstandard Généralisé MArkup Language (SGML) conforme à la norme internationale ISO 8879. HTML est largement considéré comme le langage de publication standard du World Wide Web.
Il s'agit d'un langage pour décrire les langages de balisage, en particulier ceux utilisés dans l'échange électronique de documents, la gestion de documents et la publication de documents. HTML est un exemple de langage défini dans SGML.
Qu'est-ce que XML?
XML signifie EXtendu MArkup Language. XML est un langage de balisage semblable au HTML et il a été conçu pour décrire des données. Les balises XML ne sont pas prédéfinies. Vous devez définir vos propres balises en fonction de vos besoins.
La syntaxe XHTML est très similaire à la syntaxe HTML et presque tous les éléments HTML valides sont également valides en XHTML. Mais lorsque vous écrivez un document XHTML, vous devez accorder un peu plus d'attention pour rendre votre document HTML conforme au XHTML.
Voici les points importants à retenir lors de l'écriture d'un nouveau document XHTML ou de la conversion d'un document HTML existant en document XHTML -
Écrivez une déclaration DOCTYPE au début du document XHTML.
Écrivez toutes les balises et attributs XHTML en minuscules uniquement.
Fermez correctement toutes les balises XHTML.
Imbriquez correctement toutes les balises.
Citez toutes les valeurs d'attribut.
Interdire la minimisation des attributs.
Remplace le name attribut avec le id attribut.
Déprécier le language attribut de la balise script.
Voici l'explication détaillée des règles XHTML ci-dessus -
Déclaration DOCTYPE
Tous les documents XHTML doivent avoir une déclaration DOCTYPE au début. Il existe trois types de déclarations DOCTYPE, qui sont discutées en détail dans le chapitre Doctypes XHTML. Voici un exemple d'utilisation de DOCTYPE -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Sensibilité à la casse
XHTML est un langage de balisage sensible à la casse. Toutes les balises et attributs XHTML doivent être écrits uniquement en minuscules.
<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>Dans l'exemple, Href et balise d'ancrage A ne sont pas en minuscules, il est donc incorrect.
Fermer les balises
Chaque balise XHTML doit avoir une balise de fermeture équivalente, même les éléments vides doivent également avoir des balises de fermeture. Voici un exemple montrant des façons valides et non valides d'utiliser les balises
<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.
<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >La syntaxe suivante montre la manière correcte d'écrire au-dessus des balises en XHTML. La différence est que, ici, nous avons correctement fermé les deux balises.
<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
<!-- This is also valid now -->
<img src="/images/xhtml.gif" />Citations d'attributs
Toutes les valeurs des attributs XHTML doivent être entre guillemets. Sinon, votre document XHTML est considéré comme un document non valide. Voici l'exemple montrant la syntaxe -
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />Minimisation des attributs
XHTML n'autorise pas la minimisation des attributs. Cela signifie que vous devez indiquer explicitement l'attribut et sa valeur. L'exemple suivant montre la différence -
<!-- This is invalid in XHTML -->
<option selected>
<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">Voici une liste des attributs minimisés en HTML et la façon dont vous devez les écrire en XHTML -
| Style HTML | Style XHTML |
|---|---|
| compact | compact = "compact" |
| vérifié | vérifié = "vérifié" |
| déclarer | declare = "declare" |
| lecture seulement | readonly = "lecture seule" |
| désactivée | disabled = "désactivé" |
| choisi | selected = "sélectionné" |
| reporter | defer = "reporter" |
| ismap | ismap = "ismap" |
| nohref | nohref = "nohref" |
| pas d'ombre | noshade = "noshade" |
| Nowrap | nowrap = "nowrap" |
| plusieurs | multiple = "multiple" |
| noresize | noresize = "noresize" |
L' attribut id
L'attribut id remplace l'attribut name. Au lieu d'utiliser name = "name", XHTML préfère utiliser id = "id". L'exemple suivant montre comment -
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />L' attribut de langue
L'attribut de langue de la balise de script est obsolète. L'exemple suivant montre cette différence -
<!-- This is invalid in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("Hello XHTML!");
</script>
<!-- Correct XHTML way of writing this is as follows -->
<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>Balises imbriquées
Vous devez imbriquer correctement toutes les balises XHTML. Sinon, votre document est considéré comme un document XHTML incorrect. L'exemple suivant montre la syntaxe -
<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>
<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>Interdictions d'élément
Les éléments suivants ne sont pas autorisés à contenir d’autres éléments. Cette interdiction s'applique à toutes les profondeurs de nidification. Cela signifie qu'il comprend tous les éléments descendants.
| Élément | Interdiction |
|---|---|
| <a> | Ne doit pas contenir d'autres éléments <a>. |
| <pre> | Ne doit pas contenir les éléments <img>, <object>, <big>, <small>, <sub> ou <sup>. |
| <bouton> | Ne doit pas contenir les éléments <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> ou <isindex>. |
| <label> | Ne doit pas contenir d'autres éléments <label>. |
| <form> | Ne doit pas contenir d'autres éléments <form>. |
Un document XHTML minimal
L'exemple suivant vous montre un contenu minimum d'un document XHTML 1.0 -
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>Every document must have a title</title>
</head>
<body>
...your content goes here...
</body>
</html>Du fait que XHTML est une application XML, certaines pratiques parfaitement légales dans le HTML 4 basé sur SGML doivent être modifiées. Vous avez déjà vu la syntaxe XHTML dans le chapitre précédent, les différences entre XHTML et HTML sont donc très évidentes. Voici la comparaison entre XHTML et HTML.
Les documents XHTML doivent être bien formés
La bonne formation est un nouveau concept introduit par XML. Essentiellement, cela signifie que tous les éléments doivent avoir des balises de fermeture et que vous devez les imbriquer correctement.
CORRECT: Nested Elements
<p>Here is an emphasized <em>paragraph</em>.</p>INCORRECT: Overlapping Elements
<p>Here is an emphasized <em>paragraph.</p></em>Les éléments et attributs doivent être en minuscules
Les documents XHTML doivent utiliser des minuscules pour tous les éléments HTML et les noms d'attributs. Cette différence est nécessaire car le document XHTML est supposé être un document XML et XML est sensible à la casse. Par exemple, <li> et <LI> sont des balises différentes.
Les étiquettes de fin sont obligatoires pour tous les éléments
En HTML, certains éléments sont autorisés à omettre la balise de fin. Mais XML ne permet pas d'omettre les balises de fin.
CORRECT: Terminated Elements
<p>Here is a paragraph.</p><p>here is another paragraph.</p>
<br><hr/>INCORRECT: Unterminated Elements
<p>Here is a paragraph.<p>here is another paragraph.
<br><hr>Les valeurs d'attribut doivent toujours être citées
Toutes les valeurs d'attribut, y compris les valeurs numériques, doivent être entre guillemets.
CORRECT: Quoted Attribute Values
<td rowspan="3">INCORRECT: Unquoted Attribute Values
<td rowspan=3>Minimisation des attributs
XML ne prend pas en charge la minimisation des attributs. Les paires attribut-valeur doivent être écrites en entier. Les noms d'attributs tels que compact et vérifié ne peuvent pas apparaître dans les éléments sans que leur valeur ne soit spécifiée.
CORRECT: Non Minimized Attributes
<dl compact="compact">INCORRECT: Minimized Attributes
<dl compact>Gestion des espaces dans les valeurs d'attribut
Lorsqu'un navigateur traite des attributs, il effectue les opérations suivantes:
Supprime les espaces blancs de début et de fin.
Mappe les séquences d'un ou plusieurs espaces blancs (y compris les sauts de ligne) à un seul espace inter-mot.
Éléments de script et de style
En XHTML, les éléments de script et de style ne doivent pas avoir directement les caractères «<» et «&», s'ils existent; puis ils sont traités comme le début du balisage. Les entités telles que «<» et «&» sont reconnues comme des références d'entité par le processeur XML pour afficher respectivement les caractères «<» et «&».
L'emballage du contenu du script ou de l'élément de style dans une section marquée CDATA évite l'expansion de ces entités.
<script type="text/JavaScript">
<![CDATA[
... unescaped VB or Java Script here... ...
]]>
</script>Une alternative consiste à utiliser des scripts externes et des documents de style.
Les éléments avec les attributs id et name
XHTML recommande le remplacement de l' attribut name par l' attribut id . Notez que dans XHTML 1.0, l' attribut name de ces éléments est formellement obsolète, et il sera supprimé dans les versions ultérieures de XHTML.
Attributs avec jeux de valeurs prédéfinis
HTML et XHTML ont tous deux des attributs qui ont des ensembles de valeurs prédéfinis et limités. Par exemple,type attribut du inputélément. En HTML et XML, ils sont appelésenumerated attributes. Sous HTML 4, l'interprétation de ces valeurs était insensible à la casse, donc une valeur deTEXT équivaut à une valeur de text.
Sous XHTML, l'interprétation de ces valeurs est sensible à la casse, donc toutes ces valeurs sont définies en minuscules.
Références d'entité en tant que valeurs hexadécimales
HTML et XML autorisent tous deux les références aux caractères en utilisant une valeur hexadécimale. En HTML, ces références peuvent être faites en utilisant soit&#Xnn; ou &#xnn; et ils sont valides mais dans les documents XHTML, vous devez utiliser la version minuscule uniquement telle que &#xnn;.
L'élément <html> est un must
Tous les éléments XHTML doivent être imbriqués dans l'élément racine <html>. Tous les autres éléments peuvent avoir des sous-éléments qui doivent être par paires et correctement imbriqués dans leur élément parent. La structure de base du document est -
<!DOCTYPE html....>
<html>
<head> ... </head>
<body> ... </body>
</html>La norme XHTML définit trois définitions de type de document (DTD). Le document de transition XHTML est le plus couramment utilisé et le plus simple.
Les définitions de type de document XHTML 1.0 correspondent à trois DTD -
- Strict
- Transitional
- Frameset
Il existe peu d'éléments et d'attributs XHTML, qui sont disponibles dans une DTD mais non disponibles dans une autre DTD. Par conséquent, lors de la rédaction de votre document XHTML, vous devez sélectionner soigneusement vos éléments ou attributs XHTML. Cependant, le validateur XHTML vous aide à identifier les éléments et attributs valides et non valides.
Veuillez vérifier les validations XHTML pour plus de détails à ce sujet.
XHTML 1.0 Strict
Si vous prévoyez d'utiliser strictement la feuille de style en cascade (CSS) et en évitant d'écrire la plupart des attributs XHTML, il est recommandé d'utiliser cette DTD. Un document conforme à cette DTD est de la meilleure qualité.
Si vous souhaitez utiliser XHTML 1.0 Strict DTD, vous devez inclure la ligne suivante en haut de votre document XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Transitionnel XHTML 1.0
Si vous prévoyez d'utiliser de nombreux attributs XHTML ainsi que quelques propriétés de feuille de style en cascade, vous devez adopter cette DTD et rédiger votre document XHTML en conséquence.
Si vous souhaitez utiliser la DTD de transition XHTML 1.0, vous devez inclure la ligne suivante en haut de votre document XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Jeu de cadres XHTML 1.0
Vous pouvez l'utiliser lorsque vous souhaitez utiliser des cadres HTML pour partitionner la fenêtre du navigateur en deux ou plusieurs cadres.
Si vous souhaitez utiliser le DTD Frameset XHTML 1.0, vous devez inclure la ligne suivante en haut de votre document XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Note- Peu importe la DTD que vous utilisez pour écrire votre document XHTML; s'il s'agit d'un document XHTML valide, votre document est considéré comme un document de bonne qualité.
Il existe quelques attributs XHTML / HTML qui sont standard et associés à toutes les balises XHTML / HTML. Ces attributs sont répertoriés ici avec une brève description -
Attributs de base
Non valide dans les éléments base, head, html, meta, param, script, style et title.
| Attribut | Valeur | La description |
|---|---|---|
| classe | class_rule ou style_rule | La classe de l'élément. |
| Id | id_name | Un identifiant unique pour l'élément. |
| style | style_definition | Une définition de style en ligne. |
| Titre | tooltip_text | Un texte à afficher dans une pointe de souris. |
Attributs de langue
le langL'attribut indique la langue utilisée pour le contenu inclus. La langue est identifiée à l'aide des abréviations de langue standard ISO, telles quefr pour le français, enpour l'anglais, et ainsi de suite. D'autres codes et leurs formats sont décrits sur www.ietf.org .
Non valide dans les éléments base, br, frame, frameset, hr, iframe, param et script.
| Attribut | Valeur | La description |
|---|---|---|
| dir | ltr | rtl | Définit la direction du texte. |
| lang | language_code | Définit le code de langue. |
Attributs propriétaires de Microsoft
Microsoft a introduit un certain nombre de nouveaux attributs propriétaires avec Internet Explorer 4 et les versions supérieures.
| Attribut | Valeur | La description |
|---|---|---|
| clé d'accès | personnage | Définit un raccourci clavier pour accéder à un élément. |
| Langue | chaîne | Cet attribut spécifie le langage de script à utiliser avec un script associé lié à l'élément, généralement via un attribut de gestionnaire d'événements. Les valeurs possibles peuvent inclure JavaScript, jScript, VBS et VBScript. |
| tabindex | nombre | Définit l'ordre de tabulation d'un élément. |
| contenteditable | booléen | Permet aux utilisateurs de modifier le contenu rendu dans Internet Explorer 5.5 ou supérieur. Les valeurs possibles sont true ou false. |
| désactivée | booléen | Les éléments dont l'attribut est désactivé peuvent sembler décolorés et ne répondront pas aux entrées de l'utilisateur. Les valeurs possibles sont true ou false. |
| cacher | Allumé ou éteint | Cet attribut propriétaire, introduit avec Internet Explorer 5.5, masque le focus sur le contenu d'un élément. Le focus doit être appliqué à l'élément à l'aide de l'attribut tabindex. |
| non sélectionnable | Allumé ou éteint | Utilisé pour empêcher la sélection du contenu affiché dans Internet Explorer 5.5. |
Lorsque les utilisateurs visitent un site Web, ils font des choses comme cliquer sur du texte, des images et des hyperliens, survoler des choses, etc. Ce sont des exemples de ce que JavaScript appelle des événements.
Nous pouvons écrire nos gestionnaires d'événements en JavaScript ou VBScript et spécifier ces gestionnaires d'événements en tant que valeur d'attribut de balise d'événement. Le XHTML 1.0 a un ensemble d'événements similaire qui est disponible dans la spécification HTML 4.01.
Les événements de niveau <body> et <frameset>
Il n'y a que deux attributs qui peuvent être utilisés pour déclencher n'importe quel code JavaScript ou VBScript, lorsqu'un événement se produit au niveau du document.
| Attribut | Valeur | La description |
|---|---|---|
| en charge | Scénario | Le script s'exécute lors du chargement d'un document XHTML. |
| en déchargement | Scénario | Le script s'exécute lorsqu'un document XHTML est déchargé. |
Note - Ici, le script fait référence à toute fonction ou morceau de code de VBScript ou JavaScript.
Les événements de niveau <form>
Les six attributs suivants peuvent être utilisés pour déclencher n'importe quel code JavaScript ou VBScript lorsqu'un événement se produit au niveau du formulaire.
| Attribut | Valeur | La description |
|---|---|---|
| sur le changement | Scénario | Le script s'exécute lorsque l'élément change. |
| onsubmit | Scénario | Le script s'exécute lorsque le formulaire est soumis. |
| une réinitialisation | Scénario | Le script s'exécute lorsque le formulaire est réinitialisé. |
| onselect | Scénario | Le script s'exécute lorsque l'élément est sélectionné. |
| le flou | Scénario | Le script s'exécute lorsque l'élément perd le focus. |
| onfocus | Scénario | Le script s'exécute lorsque l'élément obtient le focus. |
Événements de clavier
Les trois événements suivants sont générés au clavier. Ces événements ne sont pas valides dans les éléments base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style et title.
| Attribut | Valeur | La description |
|---|---|---|
| onkeydown | Scénario | Le script s'exécute à la pression d'une touche. |
| onkeypress | Scénario | Le script s'exécute à la pression et au relâchement d'une touche. |
| onkeyup | Scénario | Le script exécute la libération de clé. |
D'autres évènements
Les sept événements suivants sont générés par la souris lorsqu'elle entre en contact avec une balise HTML. Ces événements ne sont pas valides dans les éléments base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style et title.
| Attribut | Valeur | La description |
|---|---|---|
| sur clic | Scénario | Le script s'exécute en un clic de souris. |
| ondblclick | Scénario | Le script s'exécute sur un double-clic de souris. |
| onmousedown | Scénario | Le script s'exécute lorsque le bouton de la souris est enfoncé. |
| à la souris | Scénario | Le script s'exécute lorsque le pointeur de la souris se déplace. |
| à la souris | Scénario | Le script s'exécute lorsque le pointeur de la souris sort d'un élément. |
| onmouseover | Scénario | Le script s'exécute lorsque le pointeur de la souris se déplace sur un élément. |
| onmouseup | Scénario | Le script s'exécute lorsque le bouton de la souris est relâché. |
Le W3C a contribué à faire passer la communauté de développement de contenu Internet de l'époque du balisage mal formé et non standard au monde bien formé et valide de XML. Dans XHTML 1.0, ce mouvement a été modéré par l'objectif de fournir une migration facile du contenu HTML 4 (ou antérieur) existant vers XHTML et XML.
Le W3C a supprimé la prise en charge des éléments et attributs obsolètes de la famille XHTML. Ces éléments et attributs avaient des fonctionnalités largement orientées vers la présentation qui sont mieux gérées via des feuilles de style ou un comportement par défaut spécifique au client.
Maintenant, le groupe de travail HTML du W3C a défini un type de document initial basé uniquement sur des modules qui sont XHTML 1.1. Ce type de document est conçu pour être portable sur un large éventail de périphériques clients et applicable à la majorité du contenu Internet.
Conformité des documents
Le XHTML 1.1 fournit une définition de documents XHTML strictement conformes qui DOIVENT répondre à tous les critères suivants -
Le document DOIT être conforme aux contraintes exprimées dans la définition de type de document XHTML 1.1.
L'élément racine du document DOIT être <html>.
L'élément racine du document DOIT désigner l'espace de noms XHTML en utilisant l' attribut xmlns .
L'élément racine PEUT également contenir un attribut d'emplacement de schéma tel que défini dans le schéma XML.
Il DOIT y avoir une déclaration DOCTYPE dans le document avant l'élément racine. S'il est présent, l'identificateur public inclus dans la déclaration DOCTYPE DOIT faire référence à la DTD trouvée dans la définition de type de document XHTML 1.1.
Voici un exemple de document XHTML 1.1 -
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head>
<title>This is the document title</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>Note- Dans cet exemple, la déclaration XML est incluse. Une déclaration XML telle que celle ci-dessus n'est pas requise dans tous les documents XML. Les auteurs de documents XHTML sont vivement encouragés à utiliser des déclarations XML dans tous leurs documents. Une telle déclaration est requise lorsque le codage des caractères du document est différent de celui par défaut UTF-8 ou UTF-16.
Modules XHTML 1.1
Le type de document XHTML 1.1 est composé des modules XHTML suivants.
Structure Module- Le module Structure définit les principaux éléments structurels du XHTML. Ces éléments servent de base au modèle de contenu de nombreux types de documents de la famille XHTML. Les éléments et attributs inclus dans ce module sont: corps, tête, html et titre.
Text Module - Ce module définit tous les éléments de base du conteneur de texte, les attributs et leur modèle de contenu - abbr, acronyme, adresse, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6 , kbd, p, pre, q, samp, span, strong et var.
Hypertext Module- Le module hypertexte fournit l'élément utilisé pour définir des liens hypertextes vers d'autres ressources. Ce module prend en charge l'élément a.
List Module- Comme son nom l'indique, le module Liste fournit des éléments orientés liste. Plus précisément, le module de liste prend en charge les éléments et attributs suivants - dl, dt, dd, ol, ul et li.
Object Module- Le module objet fournit des éléments pour l'inclusion d'objets à usage général. Plus précisément, le module d'objet prend en charge - object et param.
Presentation Module - Ce module définit des éléments, des attributs et un modèle de contenu minimal pour un balisage simple lié à la présentation - b, big, hr, i, small, sub, sup et tt.
Edit Module - Ce module définit les éléments et les attributs à utiliser dans le balisage lié à l'édition - del et ins.
Bidirectional Text Module - Le module Texte bidirectionnel définit un élément qui peut être utilisé pour déclarer les règles bidirectionnelles pour le contenu de l'élément - bdo.
Forms Module- Il fournit toutes les fonctionnalités de formulaire trouvées dans HTML 4.0. Plus précisément, il prend en charge les boutons, les jeux de champs, les formulaires, les entrées, les étiquettes, les légendes, les sélections, les groupes d'options, les options et les zones de texte.
Table Module - Il prend en charge les éléments, attributs et modèle de contenu suivants - caption, col, colgroup, table, tbody, td, tfoot, th, thead et tr.
Image Module- Il fournit une incorporation d'image de base et peut être utilisé dans certaines implémentations de mappages d'images côté client indépendamment. Il prend en charge l'élément - img.
Client-side Image Map Module - Il fournit des éléments pour les images cartographiques côté client - zone et carte.
Server-side Image Map Module- Il prend en charge la sélection d'images et la transmission des coordonnées de sélection. Le module Image Map côté serveur prend en charge - attribut ismap sur img.
Intrinsic Events Module - Il prend en charge tous les événements discutés dans les événements XHTML.
Meta information Module- Le module de méta-information définit un élément qui décrit les informations dans la partie déclarative d'un document. Il comprend l'élément meta.
Scripting Module- Il définit les éléments utilisés pour contenir des informations relatives aux scripts exécutables ou au manque de support des scripts exécutables. Les éléments et attributs inclus dans ce module sont - noscript et script.
Style Sheet Module- Il définit un élément à utiliser lors de la déclaration des feuilles de style internes. L'élément et l'attribut définis par ce module sont - style.
Style Attribute Module (Deprecated) - Il définit l'attribut style.
Link Module- Il définit un élément qui peut être utilisé pour définir des liens vers des ressources externes. Il prend en charge l' élément de lien .
Base Module- Il définit un élément qui peut être utilisé pour définir un URI de base par rapport auquel les URI relatifs dans le document sont résolus. L'élément et l'attribut inclus dans ce module sont - base .
Ruby Annotation Module - XHTML utilise également le module Annotation Ruby tel que défini dans RUBY et prend en charge - ruby, rbc, rtc, rb, rt et rp.
Modifications de XHTML 1.0 Strict
Cette section décrit les différences entre XHTML 1.1 et XHTML 1.0 Strict. XHTML 1.1 représente une rupture avec HTML 4 et XHTML 1.0.
Le plus important est la suppression des fonctionnalités obsolètes.
Les changements peuvent être résumés comme suit -
Sur chaque élément, l'attribut lang a été supprimé au profit de l' attribut xml: lang .
Sur les éléments <a> et <map>, l'attribut name a été supprimé au profit de l'attribut id.
La collection d'éléments rubis a été ajoutée.
Ce chapitre répertorie divers trucs et astuces dont vous devez être conscient lors de l'écriture d'un document XHTML. Ces conseils et astuces peuvent vous aider à créer des documents efficaces.
Conseils pour la conception de documents XHTML
Voici quelques directives de base pour la conception de documents XHTML -
Conception pour servir et engager votre public
Lorsque vous pensez satisfaire ce que veut votre public, vous devez concevoir des documents efficaces et accrocheurs pour servir l'objectif. Votre document doit être facile pour trouver les informations requises et créer un environnement familier.
Par exemple, les académiciens ou les médecins sont à l'aise avec un document de type journal avec de longues phrases, des diagrammes complexes, des terminologies spécifiques, etc., alors que le document auquel accèdent les enfants scolarisés doit être simple et informatif.
Réutilisez votre document
Réutilisez vos documents réussis précédemment créés au lieu de repartir de zéro chaque fois que vous mettez un nouveau projet en sac.
À l'intérieur du document XHTML
Voici quelques conseils concernant les éléments à l'intérieur du document XHTML -
La déclaration XML
Une déclaration XML n'est pas requise dans tous les documents XHTML, mais les auteurs de documents XHTML sont fortement encouragés à utiliser des déclarations XML dans tous leurs documents. Une telle déclaration est requise lorsque le codage des caractères du document est différent de celui par défaut UTF-8 ou UTF-16.
Éléments vides
Ils incluent un espace avant le / et> des éléments vides. Par exemple, <br />, <hr /> et <img src = "/ html / xhtml.gif" alt = "xhtml" />.
Feuilles de style et scripts intégrés
Utilisez des feuilles de style externes si votre feuille de style utilise «<», «&», «]]>» ou «-».
Utilisez des scripts externes si votre script utilise «<», «&», ou «]]>» ou «-».
Sauts de ligne dans les valeurs d'attribut
Évitez les sauts de ligne et les espaces multiples dans les valeurs d'attribut. Ceux-ci sont gérés de manière incohérente par différents navigateurs.
Élément Isindex
N'incluez pas plus d'un élément isindex dans l'en-tête du document. L' élément isindex est déconseillé au profit de l'élément d'entrée.
Les attributs lang et xml: lang
Utilisez à la fois les attributs lang et xml: lang tout en spécifiant la langue d'un élément. La valeur de l' attribut xml: lang est prioritaire.
Identificateurs d'élément
XHTML 1.0 a désapprouvé les attributs de nom des éléments a, applet, form, frame, iframe, img et map . Ils seront supprimés de XHTML dans les versions ultérieures. Par conséquent, commencez à utiliser l' élément id pour l'identification des éléments.
Utilisation des esperluettes dans les valeurs d'attribut
Le caractère esperluette ("&") doit être présenté comme une référence d'entité &.
Exemple
<!-- This is invalid in XHTML -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.
<!-- Correct XHTML way of writing this is as follows -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=userCaractères d'espaces en HTML et XML
Certains caractères autorisés dans les documents HTML sont illégaux dans les documents XML. Par exemple, en HTML, le caractère de saut de page (U + 000C) est traité comme un espace blanc, en XHTML, en raison de la définition des caractères par XML, il est illégal.
Référence du personnage nommé & Apos;
La référence de caractère nommé '(l'apostrophe, U + 0027) a été introduite dans XML 1.0 mais n'apparaît pas dans HTML. Les développeurs Web devraient donc utiliser & # 39; au lieu de 'pour fonctionner comme prévu dans les navigateurs Web HTML 4.
Chaque document XHTML est validé par rapport à une définition de type de document. Avant de valider correctement un fichier XHTML, une DTD correcte doit être ajoutée en tant que première ou deuxième ligne du fichier.
Une fois que vous êtes prêt à valider votre document XHTML, vous pouvez utiliser W3C Validator pour valider votre document. Cet outil est très pratique et vous aide à résoudre les problèmes avec votre document. Cet outil ne nécessite aucune expertise pour effectuer la validation.
L'instruction suivante dans la zone de texte vous montre des détails. Vous devez donner l'URL complète de la page que vous souhaitez valider, puis cliquez surValidate Page bouton.
Saisissez l'adresse de votre page dans la case ci-dessous -
Ce validateur vérifie la validité du balisage des documents Web avec différents formats notamment en HTML, XHTML, SMIL, MathML, etc.
Il existe d'autres outils pour effectuer différentes autres validations.
RSS/Atom feeds Validator
CSS stylesheets Validator
Find Broken Links
Other validators and tools
Nous supposons que vous avez compris tous les concepts liés à XHTML. Par conséquent, vous devriez être en mesure d'écrire votre document HTML dans un document XHTML bien formé et d'obtenir une version plus propre de votre site Web.
Conversion de HTML en XHTML
Vous pouvez convertir votre site Web HTML existant en site Web XHTML.
Passons par quelques étapes importantes. Pour convertir votre document existant, vous devez d'abord décider à quelle DTD vous allez adhérer et inclure la définition du type de document en haut du document.
Assurez-vous d'avoir tous les autres éléments requis. Ceux-ci incluent un élément racine <html> qui indique un espace de noms XML, un élément <head>, un élément <title> contenu dans l'élément <head> et un élément <body>.
Convertissez tous les mots-clés d'élément et les noms d'attribut en minuscules.
Assurez-vous que tous les attributs sont au format nom = "valeur".
Assurez-vous que tous les éléments du conteneur ont des balises de fermeture.
Placez une barre oblique dans tous les éléments autonomes. Par exemple, réécrivez tous les éléments <br> comme <br />.
Désignez le code de script côté client et le code de feuille de style en tant que sections CDATA.
Versions à venir XHTML
Toujours XHTML est en cours d'amélioration et sa prochaine version XHTML 1.1 a été rédigée. Nous en avons discuté en détail dans le chapitre XHTML version 1.1.
Balises, caractères et entités XHTML
Les balises, caractères et entités XHTML sont identiques au HTML, donc si vous connaissez déjà HTML, vous n'avez pas besoin de faire un effort supplémentaire pour apprendre ces sujets, en particulier pour XHTML. Nous avons répertorié tous les éléments HTML ainsi que le didacticiel XHTML, car ils s'appliquent également au XHTML.
Quelle est la prochaine?
Nous avons répertorié diverses ressources pour XHTML et HTML, donc si vous êtes intéressé et que vous avez du temps, nous vous recommandons de parcourir ces ressources pour améliorer votre compréhension du XHTML. Sinon, ce tutoriel doit vous avoir donné suffisamment de connaissances pour écrire vos pages Web en XHTML.
Vos commentaires sur ce tutoriel sont les bienvenus à [email protected].