Parlons de l'organisation de HTML et de comment en tirer le meilleur parti. Cela vous sera d'une grande aide une fois que vous aborderez la section CSS.

Disons que vous créez un site de médias sociaux et que vous allez créer la section "fil d'actualité" où vous pouvez voir toutes les mises à jour de vos amis. Un utilisateur s'attendrait à voir plusieurs publications. Chaque publication pourrait avoir un auteur, une date de publication, une photo de profil et le message que l'utilisateur a posté. Modélisons cela en HTML :

<div>
  <h2>@sassy_pants_mcgee</h2>
  <h3>Posté il y a 15 minutes</h3>
  <img src="http://pets-images.dev-apis.com/pets/dog25.jpg" alt="un chiot" />
  <p>
    Vous êtes-vous déjà demandé ce que cela ferait d'aboyer par la fenêtre ? Que
    se passerait-il si je ne leur aboyais pas dessus ? Ça me hante la nuit.
  </p>
</div>

Remarquez que nous gardons tout ensemble avec une balise

. Comme je l'ai dit précédemment, c'est un conteneur, une boîte en carton. Nous avons une publication et nous la gardons entière avec une balise
encapsulante. Nous aurions aussi pu utiliser la balise
. Quelle est la différence entre "article" et "div" ? En ce qui concerne le navigateur, rien. Gardez à l'esprit que vous n'écrivez pas seulement du code une fois, vous devez aussi y revenir plus tard pour le maintenir. Et si un bogue survient plus tard et que vous devez déboguer ce qui ne va pas ? Il est bon d'écrire un code qui rend très évident ce que vous essayez de faire. Dans ce cas, la balise
permet à votre futur vous (ou à vos collègues) de savoir qu'il s'agit d'un contenu autonome. Les
n'ont pas de signification particulière. Comme une boîte en carton, c'est ce qui est à l'intérieur qui compte. Un article est une boîte en carton avec une étiquette qui dit que c'est un contenu autonome. Les deux sont valides ici, mais continuons avec les
(car c'est ce que vous verrez le plus souvent).

Améliorons cela. Ajoutons des classes.

<div class="social-post">
  <h2 class="user-name">@sassy_pants_mcgee</h2>
  <h3 class="posted-date">Posté il y a 15 minutes</h3>
  <img
    class="profile-picture"
    src="http://pets-images.dev-apis.com/pets/dog25.jpg"
    alt="un chiot"
  />
  <p class="social-post-text">
    Vous êtes-vous déjà demandé ce que cela ferait d'aboyer par la fenêtre ? Que
    se passerait-il si je ne leur aboyais pas dessus ? Ça me hante la nuit.
  </p>
</div>

Remarquez que l'apparence est exactement la même. Mais maintenant, essayez de lire le code que nous venons d'écrire au lieu de celui d'avant. Tout est bien plus clair. Nous avons pris une étiqueteuse et tout étiqueté. Ce code est bien plus facile à maintenir.

De plus, c'est maintenant réutilisable. Nous pourrions avoir un fil complet de ces éléments.

<div class="social-feed">
  <div class="social-post">
    <h2 class="user-name">@sassy_pants_mcgee</h2>
    <h3 class="posted-date">Posté il y a 15 minutes</h3>
    <img
      class="profile-picture"
      src="http://pets-images.dev-apis.com/pets/dog25.jpg"
      alt="un chiot"
    />
    <p class="social-post-text">
      Vous êtes-vous déjà demandé ce que cela ferait d'aboyer par la fenêtre ?
      Que se passerait-il si je ne leur aboyais pas dessus ? Ça me hante la
      nuit.
    </p>
  </div>
  <div class="social-post">
    <h2 class="user-name">@TailCurious</h2>
    <h3 class="posted-date">Posté il y a 18 minutes</h3>
    <img
      class="profile-picture"
      src="http://pets-images.dev-apis.com/pets/dog26.jpg"
      alt="un autre chiot"
    />
    <p class="social-post-text">
      Avez-vous déjà remarqué ce petit morceau de peluche derrière vous ? C'est
      seulement moi ? J'essaie toujours de le pourchasser mais il s'échappe
      toujours. #QueueEffrayante
    </p>
  </div>
  <div class="social-post">
    <h2 class="user-name">@haveUrCakeAndEatIt2</h2>
    <h3 class="posted-date">Posté il y a 21 minutes</h3>
    <img
      class="profile-picture"
      src="http://pets-images.dev-apis.com/pets/dog27.jpg"
      alt="un chiot"
    />
    <p class="social-post-text">#AnniversaireGrrrrrrrrrrl</p>
  </div>
</div>

J'ai utilisé une balise

pour envelopper tout le fil social, puis j'ai réutilisé notre structure ci-dessus pour recréer plusieurs fois la même publication. Plutôt sympa, non ? Nous construisons un composant une fois, puis nous le réutilisons à maintes reprises. J'imagine qu'ensuite, nous placerions la balise