Bookmarklet de vérification de qualité HTML5/CSS

HTML5checker

Utilisation :

1. Glissez déposez l'icône ci-dessus sur vos bookmarks
2. Ouvrir votre page distante ou locale
3. Cliquer sur votre favori "HTML5 Checker"
4. Si un problème d'héritage apparaît, les blocs concernés sont surlignés en violet et le premier bloc en erreur est assorti d'une bulle rouge commençant avec une tête de mort
5. Si un problème de structure ou d'attribut HTML apparaît, les erreurs et les avertissements sont indiqués sur la page
6. Un récap du nombres d'erreurs HTML est résumé en bas à gauche quand le CSS de la page analysée le permet
7. Un récap des id HTML est résumé en bas à droite
8. Pour faire disparaître cette feuille de style de checkup, rafraîchir la page

Comment ça marche ?

• Ce bookmarklet utilise du JS pour injecter du code en fin de page (avant la fermeture du body). Le Javascript teste les id dupliqués et injecte un CSS inoffensif qui teste la structure et la validité du balisage HTML5
• Sans que vous n'ayez aucune mise à jour à faire, le code injecté pourra évoluer et s'enrichir d'autres tests qui seront listés ci-dessous

Tests effectués par cet HTML checker :

1. spécifier une langue de document
2. spécifier un encodage UTF-8
3. placer le meta[charset] en premier, avant le title
4. laissez vos internautes pincher ! utiliser le viewport flexible : width=device-width
5. eviter les redirections côté client, faites le côté serveur : https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160628/SVR1
6. [for] du label vide
7. [id] invalide
8. [width] et [height] sont interdits
9. bouton vide et sans titre
10. [href] vide
11. lien vide
12. [name] manquant
13. éléments interactifs imbriqués
14. [action] manquant
15. [alt] manquant
16. champ sans label
17. tag title de la page vide
18. iframe sans [title]
19. button sans [type]
20. input sans [type]
21. [tabindex]>0
22. enfant invalide de dl
23. figcaption à l'extérieur de figure
24. imbrication li invalide
25. imbrication invalide de balises
26. sectionnement mal utilisé
27. div dans un élément inline
28. [for] manquant dans un label
29. un fieldset commence par une legend
30. un tableau de données commence par caption
31. target blank sans [rel]
32. main doit être unique
33. lien sans cible
34. pas d'HTTPS
35. [placeholder] ne remplace pas un label
36. appel JS : [integrity] et [crossorigin] manquants
37. l'ordre des titres est cohérent

Les outils complémentaires

Cet outil est complémentaire au validateur HTML5 https://validator.w3.org/nu

HTML5 checker teste surtout la grammaire HTML alors que le validateur va également pointer des fautes d'orthographe, des fautes de frappe comme des balises mal fermées, ou guillemets de fermeture ou d'ouverture manquants.

Le validateur W3C vous permet donc de détecter :

• Bonne fermeture des tags et des attributs
• Est-ce qu'une balise form existe quand il y a des champs
• Eviter les balises inline autour des balises block...