Écrivez plus vite en HTML avec Emmet

Introduction à Emmet

Emmet est un plugin conçu afin de coder plus rapidement en HTML et CSS. Écrire à la main des balises devient désormais plus rapide !

Aussi, bonne nouvelle : de nombreux éditeurs de codes l’embarquent par défaut. Du coup, si par exemple vous utiliser ce plugin dans Visual Studio Code, vous n’avez pas besoin de réaliser de configuration supplémentaire, tout est déjà intégré par défaut !

Pour utiliser Emmet, vous devez ouvrir un fichier html, et vous pouvez déjà commencer à écrire des abréviations et appuyer sur Tab pour laisser l’auto-complétion faire le travail !

Par exemple, vous pouvez écrire div dans votre fichier index.html et appuyer sur la touche Tab, et voilà ce que vous avez:

<div></div>

Tada ! Maintenant nous allons présenter ici quelques abréviations utiles pour aller plus vite.

La structure HTML

Syntaxe: !

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Les balises

Syntaxe: balise; exemple: div

<div></div>

Les classes

Syntaxe: .class; exemple: section.content

<section class="content"></section>

Les ID

Syntaxe: #id; exemple: section#content

<section id="content"></section>

Les enfants

Syntaxe: >; exemple: nav>ul>li

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

Les frères

Syntaxe: +; exemple: div+p+sect

<div></div>
<p></p>
<section></section>

Revenir plus haut

Syntaxe: ^; exemple: div>p>span+em^a

<div>
  <p><span></span><em></em></p>
  <a href=""></a>
</div>

La multiplication

Syntaxe: *; exemple: ul>li*5

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Le groupement

Syntaxe: (); exemple: div>(header>h1)+footer>p

<div>
  <header>
    <h1></h1>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

Les nombres

Syntaxe: $; exemple: ul>li.items$\*5

<ul>
  <li class="items1"></li>
  <li class="items2"></li>
  <li class="items3"></li>
  <li class="items4"></li>
  <li class="items5"></li>
</ul>

Le faux texte

Syntaxe: lorem; exemple: lorem10

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, distinctio?

Conclusion

Voilà les différentes abréviation HTML que j’utilise le plus ! Si vous voulez plus d’informations, voici un lien de la documentation: https://docs.emmet.io/, et ici un lien vers la cheat sheet officielle.