Warning: Declaration of Walker_Comment2::start_lvl(&$output, $depth, $args) should be compatible with Walker::start_lvl(&$output, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::end_lvl(&$output, $depth, $args) should be compatible with Walker::end_lvl(&$output, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::start_el(&$output, $comment, $depth, $args) should be compatible with Walker::start_el(&$output, $object, $depth = 0, $args = Array, $current_object_id = 0) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146

Warning: Declaration of Walker_Comment2::end_el(&$output, $comment, $depth, $args) should be compatible with Walker::end_el(&$output, $object, $depth = 0, $args = Array) in /homepages/31/d212983492/htdocs/creetik/blog/wp-content/themes/redtime/functions.php on line 146
Creetik Blog » Blog Archive » [Aide] – Rendez votre site accessible à tous

Featured Post

[Creetik.com] Sortie le 15 septembre 2010

La beta-test de Creetik.com prend fin pour être remplacée par la version finale de Creetik.com. La sortie officielle est prévue le mercredi 15 Septembre 2010. Cette version est représentative du besoin exprimé par ses membres et bien plus. Avant toute chose, je tiens à remercier tous les internautes...

Read More

[Aide] – Rendez votre site accessible à tous

Posted by Webmaster | Posted in Conseils Creetik, css, html, outils | Posted on 07-12-2010

0

Plusieurs modes de validations s’offres à vous, les sites internet mais aussi les plugin des navigateurs peuvent vous aider à corriger les erreurs lors de la validation de vos créations web.

Pourquoi valider son site internet ?

En général, lorsqu’un site internet s’affiche correctement nous ne pensons pas forcément à le valider. La validation du code généré est impératif pour garder une cohérence de développement et une accessibilité accrue.

La validation du code HTML s’impose comme quelque chose d’indispensable, surtout  lorsque le développeur cherche à obtenir un résultat visible de la même façon, par tous, quel que soit le navigateur. Mais pas seulement, les robots des moteurs de recherche doivent également comprendre et analyser la pertinence du contenu. Grâce à la qualité du code analysé, le site sera mieux placé qu’un autre ou l’effort n’a pas été fourni. C’est à ce moment précis que la sémantique HTML prend ton son sens et devient plus qu’importante lors du développement d’un site internet.

Quels outils disponibles pour valider son site ?

Le World Wide Web Consorsium (W3C) est l’organisation régulateur des standards web. L’outil de validation du code HTML que propose le W3C est intéressant, puissant et facile d’utilisation grâce à son mode de détection. De plus le W3C peut également valider le CSS ou encore le format XML.

Le W3C Validator, n’est pas le seul outil pratique, des plugins aussi existent et rendent la validation encore plus accessible puisqu’un seul clic généralement suffit pour détecter toute erreur HTML.

- HTML tidy (développé par Dave Ragget) est un outil indispensable afin de vérifier et nettoyer les fichiers source HTML. Cet outil est actuellement maintenu par une équipe de bénévoles sur Source Forge. Le projet continue à être disponible sous une licence open-source. Vous êtes invités à apporter votre contribution en déclarant des bugs, ou en proposant de nouvelles améliorations sur cette page Source Forge.

- XHTML-CSS : Valide et corrige le HTML et le CSS attaché à une URL. Le point fort de cet outil c’est la validation des 2 langages en même temps. Vous pouvez accéder à ce site par le biais de ce lien.

- W3C CSS Validator : Un outil également développé par le W3C vous sera utile pour valider et à corriger vos feuilles de styles CSS. Il est accessible à partir de ce lien.

- W3C Feed Validator : Le dernier outil proposé par le W3C vous servira à valider vos flux RSS générés et vous proposera des solutions pour corriger vos erreurs. Cet outil garantie que vos flux soient interprétés correctement quel que soit le lecteur de flux utilisé. Cet outil est accessible à partir de ce lien.

Quelles erreurs sont fréquemment rencontrées ?

Les erreurs les plus fréquentes sont souvent des erreurs d’inattention des développeurs web. La plupart des erreurs présentées ci-dessous peuvent-être corrigées en quelques minutes seulement.

La plus lourde de conséquence en terme d’interprétation de votre page par les navigateurs est celle portant sur la déclaration du DOCTYPE. Cette déclaration permet de déterminer la version html utilisée et son mode de d’interprétation, sans cette information tout outil de validation ne pourra vous aider. Il ne reconnaîtra tout simplement pas la version actuelle de la page que vous tentez de valider.  Vous pouvez consulter les différents DOCTYPE à utiliser suivant vos contraintes sur cette page.

Les balises HTML restées ouvertes

Cet oubli comporte plusieurs conséquences plus ou moins grave. Des problèmes de mises en pages peuvent intervenir suivant le navigateur utilisé. Le message que vous risquez de rencontrer lorsqu’un tel oubli à été fait est le suivant :

end tag for “p” omitted, but OMITTAG NO was specified

Dans cet exemple, c’est la balise <p> qui ne trouve pas sa balise fermante </p>. Généralement un numéro de ligne pourra vous aider, utile en cas de html pur, mais lorsque votre site est dynamique vous pouvez ajouter le contexte de l’erreur ce qui ajoutera quelques lignes avant et après l’erreur afin de mieux la cibler.

Dans le même registre, on peut également trouver des erreurs au sujet des balises « auto-fermantes ». Simplement, ce sont les balises qui ne nécessitent pas de balises fermantes comme par exemple les balises <IMG /> ou <INPUT/>. L’erreur affichée par le validateur sera la même que la précédente. Pour résoudre cette erreur, il vous suffira d’ajouter un slash à la fin de la balise concernée pour qu’elle se ferme automatiquement.

Les caractères spéciaux non encodés

Dans ce cas d’erreur, la plus régulièrement mise en avant est celle du caractère & présent dans les url. Ces caractères sont souvent indispensables au bon fonctionnement de votre site puisqu’ils transmettent des paramètres. Voici l’erreur type :

Reference to « link » for which no system identifier could be generated

Afin de corriger cette erreur rapidement, vous devrez encoder les caractères spéciaux en html.  Par exemple pour l’utilisation du & dans un lien vous devrez l’encoder et le remplacer par &amp; il sera ainsi interprété de la bonne manière.

Non respect du type naturel des balises HTML

Les natures par défaut des balises sont importantes dans la sémantique HTML. 2 types  de balises s’imposent, les balises de type inline (<a>, <strong>, <em>, etc), et les balises de type block (<div>, <p>, <h1>, etc). Par définition, une balise de type block peut contenir une balise de type inline, mais pas l’inverse. Ceci est une règle de  sémantique, elle n’est pas liée au css que l’on pourrait appliquer à une balise de type block, par exemple la balise <p> à laquelle on ajoute la propriété display:inline; Dans ce cas, vous obtiendrez cette erreur :

document type does not allow element « div » here

Corriger ces erreurs est primordiale, il faut absolument respecter la sémantique HTML et la nature par défaut des balises que vous utilisez.

Texte alternatif inexistant

Le paramètre ALT de la balise <img/> est souvent mis de coté,  une erreur classique d’une image non référencée. Cet oubli va générer autant d’erreur que de balises <img/> ou ce paramètre manque.  Voici l’erreur en question :

required attribute « alt » not specified

Pour supprimer ces erreurs de validation, il vous suffira de remplir pour chaque image l’attribut ALT. Ainsi vos images seront correctement interprétées par les robots et seront prochainement référencées.

Les attributs width and height en paramètres

Ces paramètres de tailles sont souvent utilisés à toutes les sauces pour contraindre les éléments HTML à prendre une certaine taille. Cependant leurs utilisations sont restreintes suivant le DOCTYPE utilisé. En mode Transitional par exemple, le validateur ne les affichera pas comme des erreurs mais plutôt comme des alertes, alors qu’en mode Strict il affichera pour chaque image, une erreur à corriger. Ceci étant dit, l’utilisation des paramètres width et height sont fortement déconseillés car il est chronophage d’attribuer des valeurs de taille à une image avec cette méthode. L’élément HTML qui supporte le mieux ces paramètres est la balise <td>. Si vous obtenez cette erreur c’est que vous êtes dans ce cas :

there is no attribute « width »

Pour corriger ce type d’erreur, vous pouvez attribuer une taille d’image directement depuis le CSS ou encore appliquer un script/plugin de redimensionnement des images, le meilleur cas étant en PHP car il affichera les images directement à la bonne taille sans besoin d’ajouter les attributs width et height.

Les noms de classe ou d’id commençant par des chiffres

Ce type d’erreur est trés facile à corriger, car il n’y a pas d’alternative à cette contrainte. Les noms de classes CSS ou d’id ne peuvent commencer par des chiffres. Si vous êtes dans ce cas de figure, vous obtiendrez cette erreur :

Value of attribute « id » invalid : « 2 » connot start a name

Conclusion

J’espère que cet article vous sera utile pour corriger vos erreurs HTML les plus courantes afin que vous ayez le plus de pages valides. Ainsi vous améliorerez la sémantique HTML de votre site, son référencement par les bots de recherches et vous apporterez également une bonne dose d’accessibilité.

Cet article est inspiré d’un excellent article de line25.com source

Write a comment