chapitre 55 | L’indentation en HTML et CSS

L’indentation en HTML et CSS

Objectifs :

Comprendre ce qu’est l’indentation et pourquoi elle est essentielle dans le développement web.
Identifier les bonnes pratiques pour structurer un code lisible et maintenable.
Apprendre à utiliser Visual Studio Code pour indenter facilement et efficacement votre code.
Reconnaître les erreurs courantes d’indentation et les corriger.

Qu’est-ce que l’indentation ?

L’indentation désigne le fait d’ajouter des espaces ou des tabulations au début des lignes de code pour représenter leur hiérarchie logique. Elle permet de :

Structurer visuellement le code afin de le rendre plus lisible.
Montrer clairement les relations entre les éléments (par exemple, qu’un élément <p> est contenu dans un <body>).
Faciliter la collaboration entre plusieurs développeurs.

Pourquoi l’indentation est-elle importante ?

Éviter les erreurs : Une bonne structure réduit les risques d’oublier de fermer des balises ou de mal organiser les éléments.

Lisibilité : Un code bien indenté est plus facile à lire et à comprendre, même pour quelqu’un qui ne l’a pas écrit.

Collaboration : Les équipes de développement utilisent des normes d’indentation pour assurer la cohérence dans les projets.

Les bonnes et mauvaises pratiques d’indentation

Comment indenter avec Visual Studio Code ?

Parfois, VS code peut vous demander de choisir parmi plusieurs plugin d’indentation :

Cliquez sur CONFIGURE et regarder les choix en haut de la fenêtre.

Choisir CSS Formatter

Pour information : des plugins et options existent pour formater le code à chaque sauvegarde. Si cela vous intéresse, vous pouvez faire des recherches. Nous ne traiterons pas ce sujet ici pour ne pas surcharger les apprentissages. Libre à vous d’investir du temps dans cette recherche non primordiale.

Exercice

Ces codes sont volontairement mal indentés. L’objectif est d’exercer la réorganisation et l’indentation correcte pour améliorer leur lisibilité et leur structure. Veuillez utiliser la fonction Format Document.

<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
</head>
<body>
<div><h1>Titre principal</h1><p>Paragraphe introductif avec du texte.</p><ul><li>Élément 1</li><li>Élément 2</li><li>Élément 3</li></ul></div><footer><p>© 2024 Mon Site Web</p></footer>
</body>
</html>

body {background-color:#f4f4f4;color:#333;font-family:Arial,sans-serif;}h1 {color:#0056b3;text-align:center;}p {line-height:1.6;margin:0 0 10px;}ul {list-style-type:disc;margin:0;padding:0;}li {margin:5px 0;}