Au moment de la création d'un site internet, tout le monde entend parler de cette chose mystérieuse qu'est le W3C. Les recommandations W3C ou normes ou standards... quelque soit le nom qu'on lui donne est l'abréviation d'un sigle anglophone, qui signifie World Wide Web Consortium. Il s'agit bêtement d'un groupe de personnes qui s'appliquent à standardiser internet depuis 1994. Le standardiser signifie le rendre compatible sur tous les navigateurs internet, afin que chacun depuis chez soi, sur tous les continents puisse surfer sur internet de la même manière.
Dans l'oreille d'un concepteur de sites internet, ce sigle a une signification toute particulière. Il l'amène à se demander si son site internet, fait d'HTML, de css, de php, de morceaux de javascript... et de nombreuses heures de travail, va s'afficher et tourner correctement où que soient les internautes, et quelque soient les navigateurs internet et les machines utilisés.
La qualité d'un site internet passe en effet par la bonne compatibilité de ses pages web avec les navigateurs (Internet Explorer, Firefox, Chrome, Safari...) et avec les robots d'indexation, appartenant aux principaux moteurs de recherche actuels.
Au début d'internet, les navigateurs n'interprétaient pas tous parfaitement le code HTML qui se trouvait sur vos pages web. Certaines balises permettaient de réaliser de très beaux effets sur Internet Explorer par exemple qui n'étaient absolument pas visibles sur Netscape...
Aujourd'hui même si la perfection en terme de compatibilité n'existe toujours pas, il faut reconnaitre que les choses se sont bien améliorées. Le consortium y est pour beaucoup, notre vieux HTML a évolué pour être finalement lisible du plus grand nombre. Pour cela il a fallu supprimer certaines balises HTML,en réinventer de nouvelles et introduire de nouveaux outils bien sympathiques tels que le CSS et les feuilles de style...
En suivant les nouvelles recommandations à la lettre, les webmasters s'assurent de la grande compatibilité de leurs pages web avec les technologies du moment.
En tant que webmaster, vous êtes assuré que votre site sera vu par les internautes comme vous le voyez localement sur votre propre machine, ce qui est plutôt rassurant (Pensez à tester votre site dans différents navigateurs).
Il y a également de nombreux robots d'indexation qui parcourent vos pages web, dont le plus grand d'entre eux, celui de Google. Il est important que vos pages ne soient pas un obstacle à sa navigation. Une page bancale, qui tarde à s'ouvrir ou mal construite peut avoir de mauvaises répercussions sur le référencement de votre site internet dans les moteurs de recherche. Il est donc nécessaire d'harmoniser vos pages avec la norme W3C.
Les normes existent, il faut les connaitre. Mais avant cela, comme toute mise en page, il est nécessaire de bien connaitre l'HTML et de limiter le nombre d'erreurs d'inattention dans la syntaxe... Il est facile d'oublier des guillemets, facile d'oublier de refermer une balise... Les navigateurs modernes ne vous en tiendront pas rigueur... mais certaines fautes peuvent avoir des conséquences plus graves...
Après une bonne relecture de votre HTML, il existe un outil de vérification en ligne, qui permet à tous les webmasters de vérifier la conformité de leurs pages avec les standards W3C. Cet outil en anglais, bien pratique, est proposé par le Consortium lui-même, sur son site officiel.
Voici l'adresse pour vous y rendre : https://validator.w3.org
Copiez simplement dans le champ du formulaire l'adresse de la page (www.ma_page.com) que vous voulez tester et appuyez sur Check.
Après quelques secondes, un premier résultat va apparaitre vous indiquant le nombre d'erreurs trouvées sur votre page web.
Si aucune erreur n'est trouvée, une jolie barre verte est affichée, sinon elle est rouge, et là, il faut examiner les lignes fautives à modifier. Après chaque correction, pressez le bouton Revalidate pour voir le nombre de fautes restantes. Cochez également la case Show source, pour suivre les numéros de lignes incriminées.
Maintenant que le validateur en ligne vous indique les erreurs à corriger, il faut les comprendre. Même en comprenant l'anglais, il n'est pas toujours facile de comprendre de quoi il s'agit.
Avant de s'intéresser aux erreurs de votre page, il faut que vous déclariez sur votre page, à quel type elle appartient. Une fois précisé le Doctype dans votre page, le validateur W3C le détectera automatiquement. En fonction du Doctype choisi, le validateur sera plus ou moins tolérant avec vos erreurs.
Pour indiquer au validateur (et donc aux robots qui parcourent votre site), le type de document auquel il a à faire, il faut placer une petite ligne de code, en tête de chacune de vos pages web, avant la balise <html>. Vous avez le choix entre Transitional ou Strict (je laisse de côté les autres).
Un Doctype identifié comme Transitional, est réservé aux webmasters débutants qui veulent un site propre et compatible avec un grand nombre de navigateurs. Voici le code à placer en haut de vos pages :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Pour les puristes qui aiment programmer des pages à la pointe du progrès (un tutoriel sera publié prochainement), il est préférable de déclarer un Doctype Strict, avec la ligne suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Maintenant que vos pages indiquent à quel type elles appartiennent, le validateur W3C vous affiche les erreurs qu'il a trouvées. Si certaines sont faciles à corriger, d'autres en revanche réclament un peu de pratique.
Le plus difficile est de produire des pages compatibles avec un XHTML Strict, sans erreur. Si vous y parvenez, vos pages seront fatalement compatibles avec le XHTML Transitional... l'inverse ne sera pas vrai. Donc autant prendre les bons réflexes pour s'approcher de la perfection Strict. Nous verrons donc ici quelques corrections qui vous serviront dans la majeure partie des cas.
Qui dit compatibilité avec les normes W3C, dit emploi massif des CSS (voir la fiche du CSS). Ceux-ci vous permettront de bannir de vos mauvaises habitudes un grand nombre de balises interdites ou obsolètes.
Par exemple, vous avez l'habitude de faire des sites internet, à l'ancienne avec des tableaux (<table><tr><td>...) pour faire vos mises en page : abandonnez ! Perdez cette mauvaise habitude, utilisez de belles balise <div> et </div> pour réaliser des pages puissantes. Nous reviendrons sur cette question dans une prochaine fiche consacrée à la construction d'une page web avec de telles balises.
Deuxième réflexe qui va grandement vous aider avec le W3C, est celui qui vous conduit à proscrire certaines balises html, telle que le célèbre <br /> qui vous sert à sauter des lignes. L'avenir n'est pas fait pour elle, seul le CSS peut vous venir en aide, avec l'emploi des "margin", un exemple ?... le saut à la ligne entre deux paragraphes, sans <br/> :
<p style="margin-top:20px;margin-bottom:5px">Mon paragraphe 1</p>
<p>Mon paragraphe 2</p>
Laissez un seul <br> en Strict est c'est l'erreur assurée.
Une autre erreur que le validateur n'aime pas, c'est l'emploi de CAPITALES dans l'écriture des métatags en tête de vos pages : <meta NAME="description" content="ma petite description" /> Globalement en Strict, jamais de majuscules ! N'oubliez pas non plus de placer le slash (/) de fermeture, c'est aussi une erreur courante.
Comme nous l'avons vu dans le chapitre consacré aux CSS, certaines balises html sont obsolètes, voire interdites. La balise <font></font> qui permettait de mettre en forme du texte, est désormais dépréciée au profit de l'emploi de l'équivalent CSS. <font> provoquera donc une erreur en XHTML Strict. Désormais vous devrez utiliser les balises <p>, ou <span>, <h1>, <h2>..., pour insérer à l'intérieur du texte long ou court.
Les mises en forme des textes se feront avec des styles, comme suit :
<p style="color:gray;font-weight:bold;font-family: Arial, Helvetica, sans-serif;font-size:14px">Mon texte</p>
Concernant les liens hypertext identiables par la balise <a>, sachez qu'il vous faut oublier définitivement l'indication "_blank" qui vous permettait d'ouvrir une nouvelle page... Valable en Transitional, elle vous cause une erreur W3C en Strict. Vos liens doivent ressembler à <a href="ma_page_2">
Oubliez également le border="0" dans vos balises <img>. Si vous ne voulez pas de bordures sur une image, il vous faut utiliser le CSS (border:none), de plus, n'oubliez pas le "alt=""" (même vide, il est obligatoire), ni de fermer votre balise par un slash (/), ce qui provoquerait des erreurs W3C... voici la bonne syntaxe : <img src="ma_photo.jpg" alt="Ma belle photo" style="border:none" />
Côté formulaire nombreuses sont les erreurs qui agacent le validateur. La balise <form></form> délimite un formulaire. Si vous écrivez dedans name="mon_formulaire", vous aurez une erreur... à cause de name bien sûr !... En Strict, ça ne passe pas, en Transitional pas de soucis. Pour identifier votre formulaire, vous devez utiliser id="mon_formulaire"... et derrière assurez vous que votre formulaire fonctionne toujours. Si ce n'est plus le cas, c'est que votre javascript qui vous sert à traiter les données des champs du formulaire, n'est pas au point. Un exemple ?
Côté formulaire, voici la syntaxe :
<form id="mon_formuaire" method="post" action="">
<input name="pseudo" type="text" id="pseudo" value="Luc" size="9" maxlength="9" />
<input type="button" name="submit" value="Envoi" onclick="verification()" />
</form>
Côté javascript, voici la vérification du champ "pseudo" pour le formulaire (mon_formulaire). Si le champ pseudo reste vide à l'envoi du formulaire, un message d'alerte invite à l'ajouter :
<script type="text/javascript">
function verification()
{
if (document.getElementById('mon_formulaire').pseudo.value == "")
{
alert("Ajoutez votre pseudo !");
}
else
{
}
}
</script>
Si vous respectez cette façon de faire, vos formulaires passeront le test du XHTML Strict !
Voilà pour l'instant, quelques exemples de pièges à éviter pour passer facilement les tester de validité de vos pages web. Il reste à dire que vous devez parfaitement contrôler l'imbrication de vos balises... Chaque fois que vous oublierez d'en fermer une, vous aurez une erreur (voire des blocs mal placés), donc soyez vigilent sur ces fautes d'inattention.
Nous n'avons pas encore parlé en détail de la structure des pages, c'est-à-dire des blocs qui vont contenir vos textes et vos images. Celle-ci doit respecter également les standards pour être en conformité avec le W3C Strict, pour que vos pages web s'affiche sur n'importe quel type d'appareil. A nouveau des balises HTML devront être chassées de vos habitudes, au profit d'autres, comme les <div>...
Reproduction interdite - SITES-INTERNATIONAUX © 2024
Tutoriel : Comprendre les standards W3C