vendredi 23 janvier 2015

Le XHTML

Le XHTML commence à être de plus en plus utilisé par les concepteurs de sites qui se rendent compte des avantages de ce principe de conception de pages Web. Vous avez créé vous aussi un site qui n'est pas conçu en XHTML et souhaiteriez franchir le cap ?
Deux possibilités s'offrent à vous :
  • Votre site a été codé correctement en HTML, et, dans ce cas, le passage au XHTML ne sera qu'une formalité.
  • Votre site a été mal codé (par un éditeur WYSIWYG comme FrontPage par exemple) et dans ce cas, il se peut que le passage au XHTML nécessite de tout refaire.
La plupart des sites conçus il y a longtemps nécessitent un recodage complet. Le passage au XHTML procure de nombreux avantages. Pour ceux qui n'hésitent plus à franchir le cap, voici les quelques règles de base qui vous feront passer au XHTML strict sans grandes encombres.
  • Fermer correctement les balises :
    Afin d'être correctement interprété (et aussi pour respecter la syntaxe du XHTML), il convient de fermer correctement et dans l'ordre toutes les balises ouvertes. Voici plusieurs exemples :
    • Syntaxe invalide :
      <p>Ceci est un paragraphe.
    • Syntaxe valide :
      <p>Ceci est un paragraphe.</p>
    Les balises doivent également être fermées dans l'ordre inverse d'ouverture :
    • Syntaxe invalide :
      <p><em>Ceci est un paragraphe.</p></em>
    • Syntaxe valide :
      <p><em>Ceci est un paragraphe.</em></p>
    Les balises ne possédant pas d'éléments de fermeture doivent être fermées à l'aide d'un espace suivi d'un slash. L'espace n'est pas obligatoire mais il permet une compatibilité accrue avec les anciens navigateurs, c'est pourquoi je vous recommande de l'utiliser.
    • Le saut de ligne : <br />
    • Les images : <img src="image.jpg" alt="" />
    • Les champs de formulaire de type input : <input type="text" />
    • Les balises meta : <meta name="description" content="description ici" />
  • Respecter la casse :
    Il était autrefois conseillé d'écrire ses balises HTML en majuscules pour "séparer" le code de la mise en forme. En XHTML, langage sensible à la casse, ceci n'est plus valable. Toutes les balises et le nom des attributs doivent être écrits en minuscules.
    • Syntaxe invalide :
      <P>Ceci est un paragraphe.</P>
    • Syntaxe valide :
      <p>Ceci est un paragraphe.</p>
  • Les attributs :
    Toutes les valeurs des attributs doivent être entourées de guillemets doubles.
    • Syntaxe invalide :
      <p class=truc>Ceci est un paragraphe.</p>
    • Syntaxe valide :
      <p class="truc">Ceci est un paragraphe.</p>
    Les attributs abrégés ne sont désormais plus valides en XHTML ( attributs selected, disabled, checked et readonly) :
    • Syntaxe invalide :
      <input type="text" checked />
    • Syntaxe valide :
      <input type="text" checked="checked" />
    L'attribut name n'est plus valide en XHTML et cède sa place à l'attribut id. Il est toujours valide sauf pour les balises suivantes : a, applet, form, map, frame, iframe, img.
  • Les url et le javascript
    Les URL contenant le caractère & doivent suivre une écriture correcte et être remplacés par leurs entités HTML :
    • Syntaxe invalide :
      <a href="page.php?variable1=valeur&variable2=valeur">
    • Syntaxe valide :
      <a href="page.php?variable1=valeur&amp;variable2=valeur">
    Le Javascript : l'annonce de javascript dans la page doit se faire désormais de cette manière : <script type="text/javascript">
    • Syntaxe invalide :
      <script language="javascript">
    • Syntaxe valide :
      <script type="text/javascript">
  • Le doctype
    Le doctype définit le type de votre document XHTML. Il est désormais obligatoire et doit être placé tout en haut de votre page XHTML. Le doctype à privilégier est celui de l'XHTML strict qui tolère moins les aléas de codage d'un site Web, et permet donc de coder plus rigoureusement. Il existe cependant trois doctypes :
    • Le doctype XHTML Strict, celui à utiliser de préférence (qui ne tolère plus les balises dépréciées en XHTML comme <u>, <i>...) :
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • Le doctype XHTML Transitional, qui tolère les balises dépréciées en XHTML comme <u>, <i>... :
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • Le doctype XHTML Frameset, qui permet l'utilisation des cadres :
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Aucun commentaire:

Enregistrer un commentaire