Table des matières

Coder en HTML

Ecriture du code

Le rendu HTML d'une page n'est pas sensible à la mise en forme du code source HTML écrit :

Ne sont pas interprétés par le navigateur.

Ils permettent par contre de rendre plus lisible un code source :

<h1>Liste exemple</h1><ul><li>Item1</li><li>Item 2</li></ul>

<h1>Liste exemple</h1>
<ul>
    <li>Item1</li>
    <li>Item 2</li>
</ul>

Votre IDE (Webstorm ou un autre) doit vous permettre de formater votre code automatiquement, et peut être configuré pour le faire sur enregistrement.

Débogage

Affichage source

Pour afficher le code source de la page produit côté client : CTRL + U

Affichage DOM

Il est également possible de visualiser la structure du DOM créée par le navigateur, à partir du HTML interprété :

Pour inspecter les éléments : CTRL + MAJ +U

Affichage réseau

L'affichage du réseau peut également donner des indications sur un disfonctionnement (fichier CSS non chargé par exemple) :

Activer l'onglet Network ou Réseau après avoir choisi Inspecter :

Validateur W3C

Le validateur W3C peut également donner des indications sur une mauvaise interprétation du code :