Custom Elements

Plutôt que de mettre des <div> partout et de déléguer l'information cruciale à l'identifiant ou à une classe, comme ceci:

<nav>
  <div class="nav-row">
    <a href="#">About me</a>
    <a href="#">Portfolio</a>
    <a href="#">GitHub</a>
  </div>

  <div class="nav-row">
    <a href="#">My Channel</a>
    <a href="#">Discord</a>
  </div>
</nav>

On peut inventer nos propres éléments html (qui se comporteront comme des <div>).

<nav>
  <nav-row>
    <a href="#">About me</a>
    <a href="#">Portfolio</a>
    <a href="#">GitHub</a>
  </nav-row>

  <nav-row>
    <a href="#">My Channel</a>
    <a href="#">Discord</a>
  </nav-row>
</nav>

Il faut cependant que le nom comporte toujours un tiret -. Si vous n'êtes pas inspirés, vous pouvez toujours démarrer vos éléments par x- comme <x-chart> par exemple.

C'est cool, ça fait moins de trucs à lire, et ça nous donne des balises fermantes plus claires, et on pourra leur programmer un comportement dans le cours de JS (pouvoir leur donner un nom n'est que 15% de l'intéret). Au même titre que <textarea> et <details> ont des fonctionnements qui les rendent différents de la simple <div>.

Ceci dit, il ne faut pas non plus en créer autant que possible, les <div> sont toujours pratiques, certaines choses ne meritent pas de nom. Si ils ont tous un nom alors les éléments qui en meritent vraiment un ressortiront moins.