Préambule
Écumant les forums de codage et autres coins de geeks, je me rends compte que les mêmes erreurs reviennent très souvent dans le code des débutants (et même de moins débutants). Alors, faute de pouvoir traquer et éradiquer les sources qui propagent du html écrit à la truelle et du javascript de 12 ans d'âge, je tente — vaille que vaille — d'éduquer les jeunes délinquants du markup dont je croise la prose.
Lexique
Le premier problème récurrent, c'est de ne pas connaître les noms des différents éléments qui composent le code. C'est bien plus compliqué d'exposer un problème quand on ne sait pas comment s'appelle quelque chose. Aussi, voici un schéma explicatif très simple de la terminologie HTML/CSS.
- Code:
<balise attribut="valeur">
- Code:
déclaration {
propriété: valeur;
}
Voilà ; dorénavant, interdiction de parler de "propriétés html" ou de "balises css".
HTML
Tout d'abord, si vous voulez en apprendre plus sur le HTML, vous pouvez suivre le cursus d'apprentissage du site : Étape 1 : Mise en forme d'éléments de message
La balise <br />
Une erreur courante (Mais où avez-vous trouvé ça ?!) consiste à écrire la balise <br /> en inversant le sens d'auto-fermeture : </br>. Ça n'existe pas. C'est soit <br /> (xhtml ou html) soit <br> (html seulement) ; pas </br> ni <br/> (l'espace n'est pas facultatif).
Et cette balise ne sert qu'à revenir à la ligne au sein d'un bloc de texte. Elle ne sert pas à sauter des lignes, ni à faire des marges : Pour ça, il y a le CSS (voir plus bas).
Attribut alt sur les images
L'attribut alt="" est obligatoire sur les balises <img />, pour une question d'accessibilité. En effet, si pour une raison X ou Y, votre image n'est pas chargée, le contenu de l'attribut alt sera affiché. Veillez donc à écrire une description très courte mais explicite de votre image (par exemple : "Portrait de Léonard de Vinci"). de la même façon, cet attribut sera interprété par les lecteurs d'écrans pour personnes malvoyantes ou non-voyantes; en lieue et place de l'image.
Ouverture et fermeture des balises
Les balises doivent être imbriquées proprement. C'est à dire que lorsque vous ouvrez une balise puis une seconde, il faut refermer la seconde avant la première.
Bon :
- Code:
<div>
<span>
</span>
</div>
Mauvais :
- Code:
<div>
<span>
</div>
</span>
Balises dépréciées
On est en 2015 au moment de la rédaction de cet article, et je vois encore régulièrement du code obsolète depuis l'arrivée du xhtml (2001). Il est important de noter que désormais (et depuis longtemps maintenant), on sépare la structure et le contenu (html) de la mise en forme (css).
Il est primordial de comprendre ce principe de sémantique du HTML. Lorsque qu'on utilise une balise <em>, ce n'est pas pour mettre du texte en italique, c'est pour créer une emphase ; or, il se trouve que dans les règles d'écriture occidentale, l'emphase est exprimée en italique. Exemple : "Tu es vraiment sûr de ton coup ?".
De fait, toutes les balises et attributs à but esthétique doivent être définitivement supprimées de vos pages : <center>, <font>, <basefont>, <strike>.
À noter que plusieurs balises dépréciées en xhtml ont fait leur retour en html5 avec un nouveau sens sémantique (tout relatif, personnellement j'ai surtout l'impression qu'ils savaient pas quoi en foutre). Leurs spécifications sont assez peu claires, voire franchement brouillons. Je vous les liste quand même : <b>, <i>, <s>, <u>.
De la même façon, les attributs liés au style doivent dégager : alink, background, bgcolor, link, vlink, align, valing, hspace, vspace, border, height, width, nowrap, star, clear, noshade...
Il est à noter cependant que phpBB est vieux (2001 pour la version2, 2006 pour la version 3), et les templates comportent donc de nombreuses "erreurs" de vieux code, encore davantage dans les modifications apportées par Forumactif. Les limitations techniques apportées par la plate-forme, ainsi que son code de base, vous obligeront probablement à faire fi de cette règle. Essayez néanmoins de toujours garder à l'esprit que vos codes doivent, eux, être toujours le plus propre possible.
marquee
La balise <marquee> n'est pas une balise standard, n'a jamais fait partie des spécifications HTML et n'en fera jamais partie. Un navigateur peut parfaitement décider de ne pas en tenir compte et donc de ne pas la faire fonctionner, voire ne pas l'afficher du tout. Ne l'utilisez pas, préférez l'animation via CSS ou le javascript.
Les tableaux
Les tableaux sont utilisés pour mettre des données tabulaires, comme des résultats sportifs ou des notes.
En aucun cas il n'est permis de s'en servir pour mettre en page son site. Là encore, phpBB2 en est bourré, dû à l'ancienneté de la plate-forme. Cela reste une mauvaise pratique, et vous avez bien d'autres outils pour mettre en page votre forum.
Tout ceci est expliqué dans le cursus : Étape 7 ; Disposer ses éléments : Les tableaux.
Attributs d'événements
Les attributs d'événements, utilisés auparavant pour faire des appels aux fonctions javascript, sont à proscrire. Utilisez les gestionnaires d'événements directement dans un code javascript.
Parmi ces attributs, on trouve notamment onclick, onblur, onmouseover, onmouseout.
Il est recommandé d'utiliser plutôt directement le Javascript (Étape 1 - Introduction au Javascript). jQuery est également d'une grande aide pour les débutants.
Les mots à rallonge
Très souvent, on tombe sur des sujets rapportant des comportements étranges de texte qui dépasse de leur contenu. Et le texte en question, est une ligne infinie de caractères, soit du "aaaaaaaaaaaaaaaaaaaaaaaaa" (beaucoup plus long, entendons-nous), soit du "oihoihgopizeagjae". Le fait est qu'aucun mot n'est aussi long, et que le texte se met en forme aux espaces qui le composent. Donc sans espace, il n'ira jamais à la ligne sans une propriété pour l'y forcer. Alors avant de songer à l'y forcer, utilisez du vrai texte factice avec un générateur de lipsum, qui sert justement à ça.
La balise <p>
La balise <p> est utilisée pour mettre en forme des paragraphes. Si vous n'avez pas besoin de faire des paragraphes (C'est à dire plusieurs blocs de textes espacés entre eux), rien ne vous force à utiliser cette balise. Et contrairement à ce que j'ai pu lire, rien n'oblige les images à être contenues dans un paragraphe.
L'attribut style
Évitez d'utiliser l'attribut style="" pour mettre du CSS directement dans votre html. Outre le fait que ça rende le code difficile à maintenir (principalement à cause du problème de poids, cf. l'article sur le poids des déclarations), ça brise la séparation contenu / mise en forme.
CSS
Tout d'abord, si vous voulez en apprendre plus sur le CSS, vous pouvez suivre le cursus d'apprentissage du site : Étape 1 : Fonctionnement de la feuille de style CSS
Position
L'erreur la plus répandue est de croire qu'utiliser la propriété position est une bonne idée pour mettre en forme son site. C'est FAUX. C'est une très mauvaise idée, ce n'est pas fait pour ça, et ça ne vous apportera que des problèmes. Le positionnement est un système particulier qui demande d'être absolument maîtrisé avant de l'utiliser, sous peine de voir son site faire n'importe quoi.
Pour en apprendre davantage sur la propriété position et ses différentes utilisations, référez-vous au cursus : Étape 7 : Les positions et le z-index.
Les pourcentages
Une autre croyance qui a la vie dure : Mettre toutes les valeurs en % serait mieux. Ce n'est pas le cas. Il n'y a que de rares cas où l'utilisation des % se justifie (notamment les grilles CSS, comme 960.gz ou celles utilisé par Bootstrap ou Foundation).
Vous pouvez très bien faire un site extensible en n'utilisant qu'un minimum de valeurs en % (un exemple : Aligner trois colonnes proprement. Et même dans ces cas-là, n'utilisez pas les % pour des marges, elles n'ont pas à être extensibles !
Et pensez aux propriétés min-width et max-width.
Et width: 100%;, n'y pensez même pas.
Pour en savoir plus sur les tailles : Étape 5 - Définir et limiter les tailles
Les hauteurs
Une erreur courante : Vouloir à tout prix contrôler la hauteur des éléments de son site. C'est une mauvaise idée. Une page s'adapte en hauteur en fonction de son contenu. La hauteur que vous définissez par rapport à ce que vous voyez sur votre écran ne correspond pas à ce que verront les autres. Si quelqu'un zoome le texte pour des questions de visibilités, si un écran est trop petit et réduis l'espace, alors le contenu va dépasser le contenant, et ce sera à la fois moche et illisible. Sauf cas très spécifiques, ne touchez pas à la hauteur des éléments, laissez-les prendre la hauteur qu'ils veulent. Pour décoller le contenu des bords d'un conteneur, pensez au padding !
Pour en savoir plus sur les tailles : Étape 5 - Définir et limiter les tailles
Float et display
Il est parfaitement inutile d'essayer de donner à un élément flottant une propriété display. Un flottant est TOUJOURS de type block, et il est IMPOSSIBLE de changer ça.
Pour en savoir plus sur la propriété float :
Conclusion
Difficile d'être exhaustif, aussi cette petite liste sera complétée au fur et à mesure. Bref, maintenant que vous avez lu ça, vous avez de bonnes cartes en main. Alors faites du bon code !
Dernière édition par Manumanu le Mar 17 Mar 2015 - 1:33, édité 5 fois
Préviens-moi quand tu auras eu le temps de faire les modifications, et surtout si tu as le temps de les faire ou si tu préfères que je les fasse pour toi ^^
