Eclapier Johanny

Comment structurer son code HTML lorsque l’on débute ?

2 Avr 2023 | Astuces, Programmation

image-présetation-blog

La structuration de ton code HTML est une étape cruciale pour la création d’un site web.

L’utilisation des balises sémantiques appropriées permet de donner du sens à ton contenu et d’améliorer l’accessibilité de ton site.

De plus, il est important d’organiser ton code afin de le rendre plus facile à lire et à maintenir.

En suivant les bonnes pratiques, tu pourras créer un site web bien structuré qui sera facilement compréhensible pour les utilisateurs et les moteurs de recherche.

1 – Connais les balises qui structure ta page web:

 

 

Pour commencer, voici un exemple de code HTML de base pour une page Web :

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la page</title>
  </head>
  <body>
    <header>
      <h1>Titre principal</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Lien 1</a></li>
        <li><a href="#">Lien 2</a></li>
        <li><a href="#">Lien 3</a></li>
      </ul>
    </nav>
    <main>
      <h2>Titre de section</h2>
      <p>Contenu de la section</p>
    </main>
    <footer>
      <p>Pied de page</p>
    </footer>
  </body>
</html>

 

Les balises sémantiques permettent de décrire le contenu de la page de manière plus précise.

Elles donnent des informations supplémentaires sur le contenu, ce qui permet aux moteurs de recherche et aux lecteurs d’écran de mieux comprendre la page.

 

Les balises sémantiques à utiliser:

 

<header>

 

est utilisé pour représenter l’en-tête de la page, généralement placé en haut de la page. Il peut contenir des éléments tels que des balises \<h1>-\<h6>, des images, des logos et d’autres éléments d’en-tête.

<nav>

 

est utilisé pour représenter la barre de navigation de la page, généralement placée en haut ou en bas de la page. Il peut contenir des liens vers d’autres pages, des catégories de contenu et d’autres éléments de navigation.

<main>

 

est utilisé pour représenter le contenu principal de la page, généralement situé entre l’en-tête et le pied de page. Il peut contenir des éléments tels que des balises \<h1>-\<h6>, des paragraphes, des listes et d’autres éléments de contenu.

<section>

 

est utilisé pour diviser une page en sections logiques et cohérentes de contenu. Cela peut inclure plusieurs éléments, tels que des balises \<h1>-\<h6>, \<p>, \<ul> et \<ol>.

<article>

 

est utilisé pour représenter un contenu indépendant et autonome, comme un blog post ou un article de journal. Il peut contenir plusieurs éléments, y compris des balises \<h1>-\<h6>, \<p>, \<ul>, \<ol>, et même d’autres balises \<article> ou \<section>.

 

 

2 – Organise ton Code

 

Indente ton code et mieux tu verras!

 

Voici un exemple d’indentation HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la page</title>
  </head>
  <body>
    <header>
      <h1>Titre principal</h1>
    </header>
  </body>
</html>

Chaque élément HTML est indenté avec une tabulation pour montrer sa relation avec les éléments parents et améliorer la lecture du code.

Et c’est vachement  plus lisible  !

 

Utilise des commentaires

 

Il arrivera que tu doives reprendre un projet écrit par un autre développeur pour comprendre certaines fonctions de ton code, et là, tu gagneras du temps.

Pour faire un commentaire en HTML, utilise la syntaxe suivante :

<!-- commentaire -->.

Tout ce qui est compris entre <!-- et --> sera considéré comme un commentaire et ignoré par le navigateur lors du rendu de la page.

Par exemple : <!-- Mon commentaire  en HTML -->.

 

⚠️ Les commentaires en HTML sont utilisés pour ajouter des informations supplémentaires au code sans qu’elles soient affichées dans le navigateur.

Ils sont utiles pour expliquer le code à d’autres développeurs ou pour ajouter des notes pour soi-même.

Ils peuvent également être utilisés pour désactiver temporairement une partie du code sans avoir à la supprimer…

 

 

Évite les balises pour styliser ton code

Quand tu codes en HTML, tu es souvent tenté d’utiliser des balises pour donner du style à ton contenu. Vrai ou pas vrai ? 

Mais savais-tu que ça peut avoir des conséquences néfastes sur l’accessibilité, la maintenance et la lisibilité de ton code ?

Du coup,  mieux vaux éviter d’utiliser des balises pour la mise en forme du contenu et plutôt d’utiliser des feuilles de styles CSS dédiées. D’ailleurs, certaines balises comme <font>, <center> et <b> sont particulièrement à éviter pour styliser ton contenu.

Je recommande plutôt d’utiliser les propriétés CSS comme 

font-family, font-size, text-align et font-weight

qui te permettront de styliser ton contenu de manière plus propre et plus efficace.

Voilà, maintenant tu sais que pour éviter les inconvénients et garantir un code plus propre, plus lisible et plus maintenable, l’utilisation de feuilles de styles CSS est super importante !

 

En conclusion

 

il est primordial de prendre en compte la structuration de ton code HTML si tu veux créer un site web bien organisé, facile à maintenir et optimisé pour le référencement.

En utilisant des balises sémantiques appropriées, en organisant ton code avec des indentations et des commentaires, et en évitant les balises obsolètes, tu pourras grandement améliorer l’accessibilité de ton site pour tous les utilisateurs.

En plus de cela, en respectant ces bonnes pratiques, tu pourras également optimiser le référencement de ton site sur internet (SEO). C’est un super bonus pour attirer encore plus de visiteurs sur ton site.

En somme, n’oublie pas que la structuration de ton code HTML est un élément clé pour réussir ton site web. Alors, prêt à appliquer ces bonnes pratiques pour créer un site web de qualité ?

N’hésite pas à commenter !

0 commentaires