[HTML] Aide-mémoire

Head

Les Méta tags


<!-- Doctype HTML5 -->
<!doctype html>

<!-- Définit l'encodage des caractères pour le document -->
<meta charset="utf-8">

<!-- Demande à internet Explorer d'utiliser son dernier moteur de rendu -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Viewport pour le responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Titre du document (pas plus de 65 caractères) -->
<title>Titre de la page - Moins de 65 caractères</title>

<!-- Meta Description (Moins de 150 caractères) -->
<meta name="description" content="Description de la page">

<!-- Favicon standard -->
<link rel="icon" type="image/x-icon" href="https://exemple.com/favicon.ico">

<!-- Le format .png est recommandé, 32x32 -->
<link rel="icon" type="image/png" href="https://exemple.com/favicon-32x32.png">

<!-- Apple Touch Icon - pas obligé mais recommandé -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- Aide à prévenir les problèmes de duplication de contenu -->
<link rel="canonical" href="http://exemple.com/2017/09/nouvel-article-a-lire.html">

Les tags HTML

<!-- Langage du site spécifié -->
<html lang="fr">

<!-- Direction de lecture -->
<html dir="rtl">

HTML

Bonnes pratiques

  • On utilise bien les éléments sémantiques (header, section, footer, main..)
  • Les pages d’erreur 404 et 5xx existent bien. Pour les 5xx, le css est directement intégré sur la page.
  • Noopener : pour les liens extérieurs utilisant target=’_blank’, utiliser l’attribut rel=’noopener’ pour prévenir le tabnabbing.
  • On enlève les commentaires présents dans le HTML pour nettoyer la page.

Tester son HTML

Source

https://github.com/thedaviddias/Front-End-Checklist (anglais).