Comment je nomme mes éléments HTML

Avoir une Convention de nommage pour des éléments HTML est une évidence (vous êtes d’accord hein ?).

Lorsque l’on se base un framework HTML ou CSS c’est encore plus vrai car il est aisé de tomber dans la facilité d’un usage purement visuel de son outil.

Voilà brièvement comment je vois les choses, et dans quel ordre d’importance :

  1. Sens / fonction
    C’est le nom de balise (h2, aside, nav), mais aussi le rôle ARIA (banner, navigation, main) et les microdata
  2. Nom
    C’est l’identifiant (id) ou le groupe (classe) qui définira l’élément.
    L’id sera nécessaire si l’élément est une ancre (navigation, contenu principal, recherche), un élément de formulaire, un élément à cibler en JS. Il sera privilégié pour un élément unique qui le restera tout au long du projet.
    Pour le cibler en CSS, on évitera cependant le sélecteur d’id.
  3. Famille
    La famille d’un élément est généralement définie par un comportement issu du framework CSS employé. Il s’agira d’ajout de classes telles que .mod, .line, .grid ou .flex par exemple. Cette sur-classification est optionnelle.
  4. Positionnement
    Toujours dans le cadre d’un framework, certaines classes facilitent le positionnement des éléments (.left, .right, .txtright, etc.). Évidemment en option
  5. Déco et divers
    Tous les “helpers” permettant de distinguer un élément de ses 12 frères presque identiques (les classes telles que .mtm, .pt0, etc.). En option également.

Enfin, en avant-première, voici la Convention de nommage HTML générale employée dans l’agence Alsacréations :

  • <body>
    • corps de page et du site web
  • <div id=”wrapper”>
    • sous-conteneur optionnel. Par exemple si body ne suffit pas
  • <div class=”inner”>
    • sous-conteneur optionnel. Par exemple pour centrer plusieurs blocs de la même manière
  • <div id=”main” role=”main”>
    • conteneur général du contenu
  • <header id=”header” role=”banner”>
    • entête global
  • <footer id=”footer” role=”contentinfo”>
    • pied de page global
  • <aside class=”aside”>
    • barre latérale globale
  • <nav id=”navigation” role=”navigation”>
    • navigation principale
  • <form id=”search” role=”search”>
    • recherche principale