41Mag - HTML5 : 20 Conseils et astuces pour coder proprement ses pages

HTML5 : 20 Conseils et astuces pour coder proprement ses pages

Voici une liste de 20 astuces pour coder vos pages proprement en HTML5. Tous ces conseils, mis bout à bout, vous serviront à améliorer votre référencement, respecter certaines normes W3C ou encore optimiser la compatibilité.

Efforcez-vous de suivre le plus rigoureusement ces règles en fonction de votre projet.

1. Respecter le Doctype HTML5

Le Doctype à subit un rajeunissement avec l’arrivé du HTML5. La ligne de code est devenu concise, identique pour tous et sans url à ajouter. Un manière simple et efficace de respecter les normes. Pour en savoir plus : Un Doctype simplifié en HTML5.

1
<!DOCTYPE html>

2. Penser à toujours refermer vos balises

Vous avez déjà du l’entendre, mais pensez toujours à bien fermer vos balises. Certaines erreurs d’affichage sont du parfois à ce manque. Par exemple un calque – symbolisé par la balise DIV - ne flotte pas à droite car il est contenue dans un autre calque qui aurait du précédemment être fermer. Certaines balises se ferment par encadrement – la plupart des balises sont de ce type, comme la balise P par exemple – et d’autres se referment seules, comme les balises META ou les balises d’image IMG. Dans ce cas, on ajoute un anti-slash dans la balise juste après son nom, comme ci-dessous :

1
<meta description="Description de la page ..." />

3. Indiquer l’URL canonique pour éviter le contenu dupliqué

Il existe de nombreuses raisons pour qu’une page soit accessible à différentes adresses à la fois. C’est un problème pour les sites dynamiques qui peuvent parfois afficher le même contenue dans des situations distincts (session, catégorie …). Afin d’éviter le problème du contenu dupliqué et d’être sanctionné par Google, nous vous conseillons d’indiquer l’URL canonique de votre page. Pour en savoir plus : La balise d’URL canonique.

1
<link rel="canonical" href="http://ton-site.com/page.html" />

4. Définir le cache pour une navigation plus rapide

Bien qu’il existe d’autres solutions plus complète, vous pouvez néanmoins régler certain aspect du cache du navigateurs de vos visiteurs. Le cache du navigateur, c’est quoi ? Pour faire simple, lorsque vous affichez une page web, votre navigateur télécharge cette page (en HTML) mais pas seulement. Il télécharge également les feuille de style – pour mettre le site en page – dit CSS, les fichiers reliés (JavaScript par exemple) et les images à afficher.

Suivant votre cas, il peut être préférable de définir le cache. Il est inutile pour un site statique de tout re-télécharger entre les différente page du site. L’en-tête ou haut de page ainsi que le footer et peut-être même le menu et la colonne latéral sont identique. La vitesse de navigation de vos visiteurs sera décuplé.

En revanche si, par exemple, votre site à accès régulièrement à des bases de données qui le maintiennent à jour le cache ne dois pas fonctionner. Servez-vous de la balise META ci-dessous :

1
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

5. Définir les emplacement pour le JavaScript

Bien souvent, mais parfois à tort, les script eux-même ou les liens les pointant sont placé entre les balises HEAD. Or, le navigateur affiche votre site au fur et à mesure de son téléchargement et de l’interprétation de ses fichiers dans lequel ils on été disposé. Pour bien comprendre, nous allons prendre l’exemple du script en JavaScript de Google Analythics.

Si nous plaçons ce script en début de page, entre les balises HEAD par exemple, lorsqu’un visiteur viendra sur votre site son navigateur commencera à télécharger et interpréter les fichier reliés. Et, avant d’afficher le contenu de votre site encadré par les balise BODY, il interagira avec Google Analythics.

Par contre si vous le placez à la fin de votre page, juste avant la balise de fermeture BODY, le navigateur affichera d’abord le contenu et à la fin de celui-ci, il enverra une requête à Google Analythics. Votre site s’affichera donc plus rapidement de cette façon pour votre visiteur. Attention, car cette technique ne s’applique pas à tous les script. Suivant leur fonction et leur action, ce sera à vous de définir leur meilleur emplacement.

6. Respecter la sémantique

Le respect de la sémantique est primordiale pour un bon référencement naturel. Cela consiste à utiliser les balises idoines en fonction de la situation. Pour éclaircir ce point, comprenez que si une balise existe c’est qu’elle a un but. Ne vous cantonnez pas utiliser que les balises principales. Si ces dernières doivent être autant utiliser, remarquez que dans certain cas, d’autre aurais été plus approprié.

Le choix d’une balise HTML ne dois jamais être fait en fonction de la mise en page
. Elle dois correspondre à ceux qu’elle décris. Si par exemple vous écrivez une abréviation, préféré la balises ABBR qu’aux balises de mise en page italique tel que I ou EM. Votre référencement en bénéficiera.

7. Respecter la hiérarchisation des titres

Pour le référencement, les balises de titres sont des plus prépondérante. La balise H1 ayant le plus haut taux d’importance pour la logique comme pour l’indexation dans les moteurs de recherches. Les mots-clés de la page doivent à tout prix y figurer puis être classer par importance pour les déclinaison. H2, H3 …

Il est inutile d’utiliser les six. H1 et H2 étant les plus importante, je me contente d’utiliser généralement uniquement les 3 premiers H1, H2 et H3. J’applique ensuite une feuille de style à ces éléments pour réduire au augmenter la police.

8. Influencer le référencement en encadrant de balise certain mot-clé

Comme ce fût stipulé précédemment, les balises HTML joue un rôle essentiel dans votre référencement. Les principaux mots-clés ou expressions de votre page devront être encadrés par certaines balises bien précise. Un mot en gras est plus visible pour un lecteur, c’est identique pour les moteurs de recherche. Les mots encadrés des balises STRONG par exemple, seront mis en valeur par un coefficient supérieur dans l’indexation de votre page.

Bien que la balise STRONG est surement un petit plus par rapport à certaines, d’autres rempliront la même tache. Un mot-clé placé entre les balise HEADER d’un article sera plus important que celui placé entre les balises FOOTER .

9. Bien choisir le texte d’un lien

L’importance d’un lien se situe dans la transmission du PageRank. Il transmet donc un score diviser entre le nombre de lien à toutes les pages vers qui les liens pointent. Il est donc important de relier les page de votre site. Pour en savoir plus : Qu’est ce que le PageRank et comment le connaitre ?

Mais en plus du PageRank, un lien transmet aussi une valeur pour le mots-clés qu’il contient.

Si votre lien est la forme : cliquez-ci, alors il ne partagera que le PageRank de sa page. En revanche si vous ancré des mots-clés cela influencera votre positionnement dans les moteurs de recherches sur ces propres mots-clés. A la place de l’exemple précédent, nous aurions du mettre : En savoir plus sur les liens. En plus du PageRank, le mots-clés lien étais transmit.

Un bon backlink ne se résume donc pas qu’au PageRank d’une page mais également aux nombres de liens sortants et à la qualité des mots-clés insérer dans ce lien. Vous pouvez également rajouter l’attribut title, encore un petit plus pour le référencement ….

10. L’attribut No Follow pour éviter de diluer le PageRank

Le PageRank est un indice, parmi d’autre, déterminant votre positionnement lors d’une requête sur un moteur de recherche. En savoir plus : Qu’est ce que le PageRank et comment le connaitre ?

Il es tout naturel de redistribuer le PageRank de vos meilleurs pages vers d’autres. Mais, sachant que la transmission de cet indice est divisé par le nombre de lien sortant de cette page, plutôt que de limiter les liens, placer leur un attribut afin que les moteurs comprennent qu’il ne doivent pas être suivis, et donc le PageRank ne sera pas reversé.

1
<a href="#" rel="nofollow">PageRank non redistribue</a>

11. Mettre un attribut ALT à chaque balise d’image

L’attribut ALT de la balise IMG - image – n’as pas que pour but de faciliter la compréhension en cas de non affichage de cette image. Nous vous conseillerons doublement de mettre cet attribut car, comme cité précédemment, il permet l’accessibilité par tous mais il améliore également votre référencement.

L’attribut ALT remplacera les yeux de Google lorsque son robot indexera votre site et il prendra en compte les différents mots-clés que cet attribut comporte. Le moteur de recherche de Google ayant aussi un volet « recherche d’image », il vous y sera important d’y figurer, même si le trafic apporté sera parfois moindre. Pensez à incorporer des mots-clés dans l’attribut ALT de la balise IMG.

1
<img src="img/photo.jpg" alt="Pierre en vacance" />

12. Préciser la taille des images

Lorsqu’un visiteur se rend sur votre site, son navigateur télécharge différents fichiers ainsi que les images à afficher. Afin de réduire le labs de temps entre sa requête et l’affichage de votre site, nous vous conseillons d’indiquer la taille de chaque image. Ainsi, son navigateur ne téléchargera pas une image de 1500×1500 pixels pour finalement l’affichez en 120×120 px – Taille définis en CSS. Il généra, en connaissance de cause, une image directement de 120x120px. Ajouter l’attribut WIDTH et HEIGHT à chaque balise IMG :

1
<img src="img/pic.jpg" width="80" height="60" alt="trombinoscope" />

13. L’importance de la balise <time> pour le référencement en temps réel

L’information n’attends pas et Google indexe toujours plus vite … Si vous éditez un blog ou un site dont vous datez les articles, vous aurez surement remarqué que, suite à son indexation dans Google, sous le titre de votre page et juste avant le début de sa description, dans la page des résultats, apparait la date de publication (et non d’indexation) de votre article.

Facilitez l’indexation de la date de publication en encadrant celle-ci des balises TIME :

1
<p>Posté le <time datetime="2010-11-29">29.11.2010</time>.</p>

14. Limiter le nombre de balise <div>

Nous vous conseillons d’éviter, autant que possible, la création d’une multitude de calque symbolisé par les balises DIV. Par un soucis de clarté et de respect de la sémantique, veuillez utiliser les nouvelles balises HTML5 facilitant l’architecture de votre site. Vous retrouverez parmi celles-ci, les balises HEADER, FOOTER ou ASIDE délimitant certaine zone ainsi que les balises NAV ou ARTICLE qui seront imbriqué dans les précédente. Tout a été fait dans le but de réduire l’emploie inutile des balises DIV

15. Préférer les feuilles de style CSS au attribut STYLE

Afin que les robots de Google ou des autres moteurs de recherches comprennent et indexent votre page au mieux, il est conseillé d’utiliser le moins possible l’attribut STYLE pour une balise. Il est préférable et plus pratique de définir le style des éléments depuis la feuille de style CSS. Ainsi, votre page HTML sera plus clair et son indexation plus simple.

16. Utiliser l’attribut ID comme sélecteur pour vos feuille de style

Si la mise en page via les feuilles de style CSS vous semble trop général et que vous souhaitez ajouter un style valable pour un seul élément, nous vous conseillons d’utiliser l’attribut ID pour la balise relative. Ainsi vous pourrez sélectionner précisément cet élément depuis votre feuille de style sans modifier le style des autres éléments.

1
2
3
4
5
6
<ul id="liste1">
  <li>Avec l'Identifiant "liste1"</li>
  <li>Vous ne modifirez que cette liste</li>
  <li>depuis le CSS</li>
  <li id="element1">ou que cet élément</li>
</ul>

17. Limiter et combiner les fichiers de même type

Dans la mesure du possible, il est préférable de joindre en un seul et même fichier tous les fichiers de même type. Si chaque page à sa propre feuille de style, cela ne pose pas de problème. Mais imaginez que vous avez créer votre site il y a deux ans avec sa feuille de style. L’année dernière, vous lui rajoutez différents éléments qui, pour être mis en place, on nécessité une nouvelle feuille de style. Plutôt que de télécharger ces deux feuilles, regroupez-les en une seule. Vous y gagnerez en temps d’affichage pour votre page.

Le cas de nombreuses feuilles CSS est fréquent lorsqu’on utilise un CMS (wordpress …). Chaque plug-in à généralement sa feuille de style, ce qui alourdis considérablement le temps d’affichage surtout s’il y en as plusieurs d’installé.

Il en est de même pour les fichier JavaScript.

Pour ce qui et de WordPress, nous vous conseillerons un autre plug-in, mais qui cette fois, au lieu d’ajouter un nouveau script ou une nouvelle feuille de style à télécharger les minimiseront et les regrouperont ensemble : WP Minify.

18. Limiter le nombre de connections à d’autres domaines

Tout comme il est important de limiter et combiner les fichier de même type, nous vous conseillerons de limiter les adresses de connections externes. Par exemple, lorsque vous installez sur votre site un bouton like ou une like-box de Facebook, vous créer une ou plusieurs connections externes suivant le widget. En effet, lorsqu’un visiteur arrive sur votre site, en plus de télécharger les fichiers de votre domaine nécessaire à l’affichage de votre site, son navigateur dois se connecter à d’autre domaines. Il dois se connecter à Facebook dans notre exemple.

C’est souvent le cas lors de l’installation d’un widget (bouton twitter, bouton like, shareThis …). Limiter le nombre de connexion à d’autres domaines vous offre donc un gain de temps d’affichage (surtout si leur serveur sont saturé à certaines heures).

19. Internet explorer et le htML5

Si tout les navigateurs ne comprennent pas à l’heure actuelle l’ensemble des nouvelles balises HTML5, elles les afficheront de type InLine ou « en ligne ». On pourrais comparé cette affichage à une simple balise SPAN. Afin de l’utiliser correctement, il faudra lui appliquer un style correspondant en CSS. Par exemple pour la balises HEARDER :

1
2
3
header {
  display:block;
}

Le problème, comme bien souvent, viens d’internet Explorer. Ne connaissant pas ces nouvelles balises, il ne les afficheras pas. Heureusement, grâce à un article d’alsacréation, nous avons découvert qu’il est possible, à l’aide d’un petit JavaScript rendre la compatibilité possible. Il vous faudra commencer par relier ce script à votre page entre les balise HEAD. Il sera intégrer par un Hack, ou contournement, permettant de rendre lisible ce script uniquement pour I.E :

1
<!--[if IE]><script src="js/html5.js"></script><![endif]-->

Le script en lui-même qui permet de créer ces fameuses balises pour I.E :

1
2
3
4
5
6
7
8
9
10
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("figure");
document.createElement("figcaption");
document.createElement("hgroup");
document.createElement("time");

20. Toujours tester le rendu final sur les différents navigateurs

Le monde merveilleux d’internet et des navigateurs au rendu similaire n’est pas encore la. Prenez le temps de toujours tester le rendu final sur les différents navigateurs. Des solutions en ligne existe vous permettant de visualiser différentes versions et plateforme.

Pensez à toujours remettre le style des balises à « zéro » afin que tout les navigateur partent sur un affichage plus similaire. Par exemple la marge intérieur ou padding, n’est pas la même pour certain élément suivant le navigateur qui l’affiche.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,
font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,
u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td {
   margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-
   align:baseline;background:transparent;
}
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after {
  content:'';content:none; }
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
table{border-collapse:collapse;border-spacing:0}
a {text-decoration:none;}

[cadreHTML5]

Article du même thême : .

  • http://www.ccd-design.com Christophe Cussigh-Denis

    Attention, le HTML 5 étant un héritier du HTML4 il n’est pas obligatoire de fermer tous les éléments : http://www.w3.org/TR/html5/syntax.html#optional-tags

    C’était le cas en XHTML seulement.

    • http://41mag.fr 41Mag

      Bien sur Christophe, je suis tout à fait d’accord avec toi. Mais malgré tout je persiste dans la volonté de bien refermer les balises pour assurer une compatibilité maximum entre les différents navigateurs.Avec certains navigateurs encore utilisés, le rendu n’est pas du tout le même avec, par exemple, une balise de calque – symbolisé par la balise div – non fermé. Surtout si un style flottant lui est attribué en CSS … Tout le reste flottera …Donc, malgré ta précision tout à fait juste et valable, je pense qu’a l’heure actuel, la fermeture des balises s’imposent mais si ce n’est pas obligatoire pour toutes.

  • Pingback: Apprendre le HTML5 – Tutoriel complet « TAKACLIKE //

  • Chris

    Article intéressant avec parfois quelques petits rappels assez indispensables.
    Seul petit reproche, attention à l’orthographe et à la grammaire qui sont utilisés pour la rédaction de l’article, cela gâche un peu le plaisir.

  • LaRumeur

    Idée intéressante mais beaucoup d’imprécisions voir erreurs.

    Dans les bonnes pratiques il ne FAUT PAS spécifier de lien canonique sur sa propre page. Le lien canonique est à spécifier sur une page « aspirée » pour rendre à César en indiquand « la page originale est là => ».

    Pour le Javascript c’est également très discutable. Les bonnes pratiques évoluent et on retourne à une injection dans le HEAD. La vraie bonne pratique voudrait que les CSS et jQuery soient unifiés et compressés…

    Il FAUT utiliser des liens vers d’autres domaines afin justement d’optimiser les requêtes. Il est plus rapide de télécharger des éléments à partir de plusieurs sources qu’une seule, c’est pourquoi de nombreux sites utilisent des sous domaines pour héberger CSS ou éléments graphiques. Ce qu’il faut éviter c’est de multiplier les appels fichiers inutiles (ce qui rejoint l’idée de compresser toutes ses CSS/jQuery dans un seul fichier).

    Bref, une jolie initiative mais à lire avec beaucoup de pincettes.

  • Pingback: 24 Astuces et Techniques HTML5 à connaitre

  • Pingback: HTML5 : Améliorer votre sémantique en remplaçant les balises <DIV> par de nouveaux éléments

  • Adams Drikenof

    Pas mal mais ça serait mieux sans fautes d’orthographe, ça fait moyen pou un site qui donne des conseils…

    • Adams Drikenof

       Je reformule : c’est vraiment BLINDÉ de fautes, ça en devient illisible ><

      • http://41mag.fr 41Mag

        Va pleurer ailleurs ….

  • Marco46

    Le point 17 est particulièrement idiot compte tenu du titre de l’article. Il faut faire très exactement l’inverse de ce qui est écrit pour avoir un code propre est lisible. Si le titre de l’article avait été, 20 conseils et astuces pour avoir un site rapide de New York à Vladivostok en passant par le Pôle Nord alors oui le point 17 serait pertinent mais là … Je sèche sur la logique …

  • MatTheCat

    Le point 12 est une énorme connerie, ce n’est pas le fait d’avoir des attributs HTML ou des règles CSS qui va influer sur le comportement d’un serveur. Ce dernier se contentera de servir l’image ; si redimensionnement il y a c’est le navigateur qui s’en chargera.

    Préciser les dimensions des images a pour unique intérêt d’éviter des reflow/repaint en permettant au navigateur de savoir quel espace attribuer à l’image avant de la charger.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.