La partie HTML et CSS de conception d'une page web est souvent répétitive et contraignante pour sa rédaction.
Il est nécessaire de créer de nombreuses balises contenant elles-mêmes d'autres balises et des attributs comme un ID ou des classes.
Pour accélérer cette rédaction, une extension à la plupart des IDE et éditeurs de code a été créée.
Celle-ci s'appelle "Emmet".
Elle simplifie grandement la création de code HTML et CSS en reprenant la syntaxe du CSS.
Utilisation
Dans ce tutoriel, nous utiliserons Visual Studio Code, mais les exemples fournis seront valides dans tous les éditeurs.
Nous saisirons des "abréviations" qui seront ensuite traduite en code HTML par "Emmet"
La structure de la page
La 1ère abréviation que nous allons voir est celle permettant de créer le code HTML de base de notre page.
Tapez "html" dans votre page et vous verrez apparaître la liste ci-dessous

Cette liste contient 3 exemples d'abréviations et affiche à côté le résultat attendu.
Si vous sélectionnez "html:5" et validez en appuyant sur entrée, le code ci-dessous s'affichera
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Il ne vous restera ensuite qu'à modifier ce que vous souhaitez.
Insérer une balise
Si vous souhaitez ajouter une balise seule, par exemple une "div", vous tapez son nom puis entrée. Ainsi, taper "div" (sans guillemets) puis entrée donnera
<div></div>
Créer une balise qui porte un id
Si notre div précédente doit comporter un attribut "id", nous allons l'inclure lors de la saisie. Nous nous baserons sur la syntaxe CSS pour déterminer l'ID.
Ainsi, si nous tapons
div#id-de-la-div
Nous obtiendrons
<div id="id-de-la-div"></div>
Créer une balise qui a une ou des classes
Si notre div doit comporter un attribut "class", nous allons l'inclure de la même façon lors de la saisie.
Ainsi, si nous tapons
div.classe-de-la-div
Nous obtiendrons
<div class="classe-de-la-div"></div>
Bien sûr, une balise peut avoir plusieurs classes. Par exemple, si notre "div" a les classes "bg-white" et "text-dark", nous taperons
div.bg-white.text-dark
Et nous obtiendrons
<div class="bg-white text-dark"></div>
Créer une balise qui a des attributs spécifiques
Si notre balise doit comporter un ou plusieurs attributs spécifiques, nous allons les inclure en utilisant les crochets "[attributs]".
Ainsi, si nous tapons
a[href="lien" target="_blank"]
Nous obtiendrons
<a href="lien" target="_blank"></a>
Insérer du texte
Dans l'exemple précédent nous n'avons pas mis le texte du lien, nous pouvons le faire en l'ajoutant entre accolades "{texte}"
Notre abréviation sera donc
a[href="lien" target="_blank"]{texte du lien}
Et sera remplacée par
<a href="lien" target="_blank">texte du lien</a>
Créer plusieurs balises identiques
Imaginons que nous avons à créer 3 balises identiques sur l'exemple précédent, nous pouvons indiquer que nous voulons répéter le code 3 fois en ajoutant "*3" après l'abréviation, comme ceci
div.bg-white.text-dark*3
Cette abréviation donnera le code html suivant
<div class="bg-white text-dark"></div>
<div class="bg-white text-dark"></div>
<div class="bg-white text-dark"></div>
Créer plusieurs éléments qui se suivent
Si nous souhaitons créer 3 sections qui auront des classes différentes, nous pouvons les enchainer au moyen du "+" qui, ici, signifiera "suivant"
Ainsi, la saisie de
section.section-1+section.section-2+section.section-3
Créera le code html suivant
<section class="section-1"></section>
<section class="section-2"></section>
<section class="section-3"></section>
Il est également possible d'enchainer des balises différentes
p+div+section
Créera
<p></p>
<div></div>
<section></section>
Imbriquer des éléments
Si un élément doit être créé à l'intérieur d'un autre élément, nous pourrons, comme en CSS, utiliser le symbole ">"
De cette façon, utiliser
div>p
Permettra de créer
<div>
<p></p>
</div>
Remonter dans les éléments
Il peut arriver d'avoir à "remonter" dans la hiérarchie des éléments qu'on écrit, dans ce cas nous utiliserons "^"
Ainsi, si nous tapons
div+div>p>span^p>img
Nous obtiendrons
<div></div>
<div>
<p><span></span></p>
<p><img src="" alt=""></p>
</div>
Nous "remontons" donc dans la "div" pour créer une nouvelle balise "p"
Grouper les éléments
Il sera parfois nécessaire de grouper certains éléments pour pouvoir créer des successions plus complexes de balises.
Nous pourrons utiliser les parenthèses pour nous "simplifier" le travail
Ainsi, nous pourrons taper
(header>h1+h2)+(main>section*3)+footer
Pour obtenir
<header>
<h1></h1>
<h2></h2>
</header>
<main>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>
Numéroter des éléments
Il peut arriver de vouloir numéroter des id par exemple. Dans ce cas, nous utiliserons le symbole "$" pour numéroter les éléments. Le symbole "$" peut être répété autant de fois que nécessaire afin de représenter les différents chiffres souhaités
Si nous souhaitons créer 12 balises numérotées, nous pourrons écrire
div#element$*12
Sera remplacé par
<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>
<div id="element4"></div>
<div id="element5"></div>
<div id="element6"></div>
<div id="element7"></div>
<div id="element8"></div>
<div id="element9"></div>
<div id="element10"></div>
<div id="element11"></div>
<div id="element12"></div>
Et
div#element$$*12
Sera remplacé par
<div id="element01"></div>
<div id="element02"></div>
<div id="element03"></div>
<div id="element04"></div>
<div id="element05"></div>
<div id="element06"></div>
<div id="element07"></div>
<div id="element08"></div>
<div id="element09"></div>
<div id="element10"></div>
<div id="element11"></div>
<div id="element12"></div>
Exemple complet
Voici un exemple complet de ce qui peut être réalisé
(header.container>div.row>div.col-12>h1{Titre du site}+h2{Sous titre})+(main.container>(section.row>div.col-12*2)*3)+footer.container-fluid>div.row>div.col-4>p*3^div.col-8>ul>li#lien$*4
Sera remplacé par
<header class="container">
<div class="row">
<div class="col-12">
<h1>Titre du site</h1>
<h2>Sous titre</h2>
</div>
</div>
</header>
<main class="container">
<section class="row">
<div class="col-12"></div>
<div class="col-12"></div>
</section>
<section class="row">
<div class="col-12"></div>
<div class="col-12"></div>
</section>
<section class="row">
<div class="col-12"></div>
<div class="col-12"></div>
</section>
</main>
<footer class="container-fluid">
<div class="row">
<div class="col-4">
<p></p>
<p></p>
<p></p>
</div>
<div class="col-8">
<ul>
<li id="lien1"></li>
<li id="lien2"></li>
<li id="lien3"></li>
<li id="lien4"></li>
</ul>
</div>
</div>
</footer>
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat