41Mag - HTML5 : 12 Oublies fréquents a corriger pour optimiser votre code

HTML5 : 12 Oublies fréquents a corriger pour optimiser votre code

Voici une liste de 12 oublies fréquents a corriger pour optimiser votre code source. Ce ne sont peut-être que des détails mais, mis bout-à-bout, ils feront la différence. En améliorant la sémantique, votre référencement en bénéficiera. Choisir la balise la mieux adapté est essentiel.

En corrigeant ces erreurs, à l’instar de votre référencement, c’est toute l’expérience utilisateur de votre site qui en profitera. Bonne lecture et gardez ces précieux conseils dans un coin de votre tête.

1. Déclarer le type mime

Déclarer le type mime vous sera très utile si vous ne souhaitez pas vous retrouver avec des caractères bizarres plein votre page en remplacement des accents ou symboles. Consulter l’article de wikipedia sur les différents type-mime pour en savoir plus. En règle général, la déclaration la plus utilisé est la suivante, elle se place entre entre les balises <head> et </head> du document HTML5 :

1
2
<!--  Déclaration du type-mime  -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

2. L’attribut Title pour les liens

Il y a les liens, les bon liens et les très bon liens. En faire un très bon n’est pas si simple, il suffit pourtant simplement d’appliquer les deux règles suivantes :

  • Essayer des placer un maximum – dans la mesure du possible et du correct – de mots-clés en rapport avec le document vers lequel il pointe.
  • Ajouter lui un titre – qui s’affichera au survol de la souris – en y placant, comme pour le lien lui-même, des mots-clés en rapport avec le document vers lequel il pointe.
1
2
3
4
5
6
7
8
<!--  Pas terrible  -->
Pour lire le 41Mag, cliquez <a href="http://41mag.fr">ici</a>
 
<!--  Bien meilleur  -->
Consulter le <a href="http://41mag.fr" 
title="Consulter le 41Mag, le magazine du développement web">
   41Mag, le magazine du développement web
<a>

3. L’attribut Alt pour les images

L’attribut alt est bien souvent oublié d’être associé à la balise <img />. Outre l’utilité essentiel d’afficher un texte de remplacement si l’image n’arrive pas à être charger, elle améliore le référencement de vos images dans Google. Ne l’oublié plus et faites deux coups en un : Assurez la plus grande accessibilité possible tout enaméliorant l’indexation.

1
2
<img src="http:/41mag.fr/images/logo.jpg"
alt="Logo du 41Mag" />

Attention à ne pas confondre, l’attribut alt ne donne aucune explication sur votre photo lorsque tous se passe bien. Pour afficher un court texte d’information – ou info-bulle – il vous faut utiliser l’attribut title. Comme pour un lien … Et, lorsque la souris survolera l’image, le texte de l’attribut title apparaitra :

1
2
3
<img src="http:/41mag.fr/images/logo.jpg"
alt="Logo du 41Mag" 
title="41Mag, magazine du développement web" />

Contrairement à l’attribut alt, l’attribut title n’est pas obligatoire pour les images.

4. Les citations

Bien souvent, les citations ne font l’objet d’aucun traitement spécial. Elle font souvent partie d’un paragraphe (<p>) sans être mis en évidence. Et c’est dommage car, niveau sémantique, plusieurs balises leur sont dédiés :

  • Pour une citation longue, utiliser les balises <blockquote>
  • Pour une citation courte, utiliser les balises <q>
  • Pour une très courte citation à l’intérieur d’un paragraphe ou d’une phrase, utiliser les balises <cite>

5. Les adresses mails et coordonnées personelles

La plupart du temps, les adresse eMails et coordonnées personnelles sont incorporé tels quels dans votre document HTML5. La balise <address> définit les informations pour contacter l’auteur ou le propriétaire d’un document.

La balise <address> permet de mettre en évidence des adresses, coordonnées et URL. Elles sont généralement affichées dans un paragraphe spécifique et en italique (mise en page modifiable en CSS). La représentation peut varier en fonction du navigateur.

1
2
3
4
<address>Le 41Mag
<a href="mailto:adresse@emeple.fr">Contact</a>
 Adresse: silicon valley bien sur !
 Tel: +33 6 00 00 00 00</address>

6. Les acronymes et définitions

La balise <abbr> définit une abréviation ou un acronyme. En marquant les abréviations grâce à la balise <abbr>, elles peuvent ainsi donner des informations utiles aux navigateurs et aux moteur de recherches.

1
2
Le <abbr title="Partir Sans Gagner">PSG</abbr>
a encore ... perdu !

7. Le titre ou légende d’un tableau

Certains utilisent des balises de titre (h1, h2 …) qu’il dissocie du tableau pour afficher des informations relatives. C’est une mauvaise technique ! Si vous souhaitez ajouter un titre ou une légende à votre tableau, inutile de le placer avant ou après. Incorporez le titre ou la légende à l’intérieur du tableau correspondant.

Pour un titre ou une légende général d’un tableau, utiliser la balise <caption>.

1
2
3
4
5
6
7
8
9
10
11
12
<table border="1">
  <!--  Legende général  -->
  <caption>Bilan comptable</caption>
  <tr>
    <th>Mois</th>
    <th>Gain</th>
  </tr>
  <tr>
    <td>Janvier</td>
    <td>100E</td>
  </tr>
</table>

8. Les définitions et mots ou expressions à définir

Pour afficher correctement un mot ou expression à définir, suivant votre cas de figure, vous disposerez de deux solutions vous permettant d’optimiser votre code. Et, par la même occasion, mettre en valeur (pour les moteurs de recherches) les mots-clés ou expression à définir.

Si le mot ou l’expression et sa définition sont contenu dans la même phrase, il vous faudra utiliser les balises <dfn>.

1
Utilisez le <dfn>HTML5</dfn>, langage de structuration de page web, pour optimiser votre site

En revanche, si vous recherchez une présentation plus classique sur le modèle : Mot a Définir : Définition, il vous faudra utiliser les balises <dl>, <dt> et <dd>. Ceci présentera vos définition sous forme de liste. Rien ne vous empêche de ne mettre qu’un seule terme dans une liste !

  • La balise <dl> définit une liste de définition
  • La balise <dt> définit un mot ou expression à définir dans une liste de définition
  • Et la balise <dd> indique la définition d’un mot à définir à l’intérieur d’une liste de définition
1
2
3
4
5
6
<dl>
  <dt>HTML5</dt>
    <dd>Langage de structuration</dd>
  <dt>CSS</dt>
    <dd>Langage de mise en page, design</dd>
</dl>

9. La legende des photos

Pour afficher la légende d’un photo, nous allons utiliser deux nouveaux éléments en HTML5 : <figure> et <figcaption>. Suivez la procédure suivante :

  • Commencez par inclure votre photo dans un élément <figure> pour la mettre en valeur (pour les navigateurs et les moteurs de recherches)
  • Ajouter ensuite un légende avec la balise <figcaption> à l’élément <figure>.
1
2
3
4
5
<figure>
  <img src="logo.jpg" alt="41Mag, le magazine du développement web"
  width="300" height="250" />
  <figcaption>Voici le logo du 41mag</figcaption>
</figure>

10. Le surlignage, ou mise en évidence, d’un mot ou expression

Ils existent plusieurs raisons de mettre un mot, une expression ou même une phrase en évidence. L’exemple le plus simple est la mise en GRAS d’un ou plusieurs mots. Ainsi, grâce au contraste généré, ces mots sauteront plus facilement aux yeux de vos lecteurs.

La principale raison d’une mise en évidence est d’ordre visuel.

Pour mettre en évidence un mot ou groupe de mots, vous disposez de plusieurs balises : Gras, Italique … Une nouvelle balise est apparu en HTML5 : <mark>. La balise <mark> correspond à un coup de surligneur sur une feuille papier. Il a le même effet dans votre programmation et généralement, les navigateurs afficheront l’élément entouré par ces balises avec une couleur d’arrière-plan jaune fluo.

1
2
3
4
5
6
7
<strong>Texte en Gras</strong>
<em>Texte en italique, ou emphasis</em>
<mark>Texte passé au marqueur</mark>
<dfn>Terme à définir</dfn>
<code>Portion de code</code>
<kbd>Touche de clavier</kbd>
<var>Variable</var>

Attention : Certaines balises sont devenus obsolètes ou dépréciés en HTML5. Par exemple, la balise <b> ne s’utilise plus, il est fortement conseillé d’utiliser la balise <strong> à la place !

Pourtant, on vous a toujours appris que le HTML5 était un langage de structuration, de hiérarchisation de contenu et qu’il existait le CSS pour la mise en page, le design. C’est tout à fait exact, alors pourquoi ces balises HTML5 ?

L’utilisation de ces balises vous apportera deux avantages : La mise en évidence pour vos lecteurs, mais aussi un meilleur référencement. Profitez-en pour encadrer les mots-clés de votre page par ces balises. Et diversifié vos mise en évidence : pour le même mot-clé, mettez-le parfois en gras, parfois en italique …

Les robots de Google qui indexeront votre site n’ont pas d’oeil. L’utilisation de ces balises leur indiquera donc qu’il s’agit d’un ou plusieurs mots importants.

1
2
3
4
5
<!--   Inutile pour le référencement  -->
<p>Le <span class="gras">HTML5</span> est un super langage !</p>
 
<!--   Meilleur pour le référencement  -->
<p>Le <strong>HTML5</strong> est un super langage !</p>

11. Le texte brut

La balise <pre> définit un texte préformaté. Elle affiche votre texte de façon brut.

Le texte dans un élément <pre> est affiché dans une police à largeur fixe (généralement Courier), et il préserve à la fois les espaces et les sauts de ligne d’origine.

12. Si le navigateur n’accepte pas le javascript

La balise <noscript> fournis un autre contenu pour les utilisateurs qui ont désactivé le javascript dans leur navigateur. L’élément <noscript> peut contenir tous les éléments que vous pouvez trouver à l’intérieur de l’élément du corps d’une page HTML5 normale.

Le contenu de l’élément <noscript> ne sera affiché que si le javascript n’est pas pris en charge ou désactivé dans le navigateur de l’utilisateur. C’est également une bonne habitude à prendre.

1
2
3
4
<script>
document.write("Hello World!")
</script>
<noscript>Votre navigateur ne supporte pas le javaScript</noscript>

Article du même thême :

  • Phil

    Merci ! Bonne piqûre de rappel mais attention aux fautes, il y en a beaucoup trop ;-)

  • Echo

    A part les points 9 et 10, ce n’est pas directement lié à HTML5. Ces conseils sont tout aussi valables en HTML4.

  • dupontel

    Bonjour,
    En AUCUN CAS on ne met un mailto: dans une page web. Sauf si l’on veut avoir sa boite de messagerie pleine de jolies spam…

    « 12. Si le navigateur n’accepte pas le javascript »
    On ne doit pas s’en préoccuper. Si l’utilisateur vie dans une grotte ou à volontairement désactivé le navigateur, ce n’est plus le problème du développeur. Les standard du web changent !

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