Emmet - Écrire du HTML rapidement

Une liste de navigation avec cinq liens, c'est plus d'une centaine de caractères à taper : des chevrons, des barres obliques, des guillemets et, encore et encore, les mêmes noms de balises. Dès la troisième liste de ce genre, tu commences à faire des fautes de frappe, et au lieu de construire ta page, tu recopies des modèles. Dans l'Égypte antique, les scribes qui écrivaient sur du papyrus utilisaient, à la place des hiéroglyphes complets, l'écriture hiératique - une forme simplifiée et rapide des mêmes signes. Dans le monde du développement web, nous avons quelque chose de semblable : Emmet ! C'est un outil puissant intégré aux éditeurs de code populaires comme VS Code et WebStorm (et disponible sous forme d'extension pour les autres), qui te permet de générer du code HTML et CSS à l'aide de courtes abréviations.

Attention : l'éditeur de la plateforme CodeWorlds ne développe pas les abréviations Emmet - la touche Tab y insère une indentation. Dans les exercices, traite une abréviation comme un plan de construction et tape toi-même le code développé, puis essaie le développement automatique dans VS Code.

Les abréviations HTML de base

L'abréviation la plus simple, c'est le nom de la balise lui-même. Au lieu d'écrire toute la balise à la main, il suffit de taper l'abréviation et d'appuyer sur Tab :

1<!-- Tape : h1 + Tab -->
2<h1></h1>
3
4<!-- Tape : p + Tab -->
5<p></p>
6
7<!-- Tape : div + Tab -->
8<div></div>

Emmet a ajouté les chevrons et la balise fermante, puis il a placé le curseur à l'intérieur, si bien que tu peux taper le contenu tout de suite. Le nom doit être correct : à partir de hh1, Emmet créera docilement un élément <hh1> qui n'existe pas.

L'opérateur d'enfant (>)

Le signe > fonctionne comme une descente d'un étage dans la pyramide : l'élément suivant se place à l'intérieur du précédent. Utilise-le pour créer des éléments imbriqués :

1<!-- Tape : nav>ul>li + Tab -->
2<nav>
3  <ul>
4    <li></li>
5  </ul>
6</nav>
7
8<!-- Tape : div>h1+p + Tab -->
9<div>
10  <h1></h1>
11  <p></p>
12</div>

La deuxième abréviation utilise déjà deux opérateurs à la fois : > entre dans le <div>, et + ajoute un <p> à côté du <h1>. Emmet lit une abréviation de gauche à droite, pas à pas.

L'opérateur de frère (+)

Le signe + crée des éléments au même niveau - des frères et sœurs qui se tiennent côte à côte, et non l'un dans l'autre. Voici comment construire le squelette d'une page en un seul geste :

1<!-- Tape : header+main+footer + Tab -->
2<header></header>
3<main></main>
4<footer></footer>

Les trois sections sémantiques ont été créées côte à côte, et aucune n'est imbriquée dans une autre. Emmet possède aussi l'opérateur ^, qui remonte d'un niveau, ainsi que des parenthèses pour regrouper - ils te serviront quand les bases seront devenues une seconde nature.

La multiplication (*)

L'astérisque * suivi d'un nombre répète un élément autant de fois que tu le veux - fini de copier cinq lignes identiques :

1<!-- Tape : ul>li*5 + Tab -->
2<ul>
3  <li></li>
4  <li></li>
5  <li></li>
6  <li></li>
7  <li></li>
8</ul>

La multiplication s'applique à l'élément situé juste avant l'astérisque, avec tout ce que tu imbriques ensuite à l'intérieur. C'est pourquoi nav>ul>li*3>a donne une navigation, une liste et trois éléments li, chacun avec son propre lien a.

Les classes (.) et les ID (#)

Tu ajoutes les classes et les identifiants avec les mêmes signes que dans les sélecteurs CSS - le point désigne une classe, et le dièse un id :

1<!-- Tape : div.container + Tab -->
2<div class="container"></div>
3
4<!-- Tape : h1#title + Tab -->
5<h1 id="title"></h1>
6
7<!-- Tape : ul.menu>li.item*3>a + Tab -->
8<ul class="menu">
9  <li class="item"><a href=""></a></li>
10  <li class="item"><a href=""></a></li>
11  <li class="item"><a href=""></a></li>
12</ul>

Tu écris donc la carte d'une exposition sous la forme div.card. Si tu omets le nom de la balise et que tu tapes seulement .card, Emmet créera lui aussi un <div class="card">. La dernière abréviation combine une classe, une multiplication et une imbrication, et le lien a reçu un href vide, prêt à être complété.

Le texte ({})

Les accolades ajoutent du texte à l'intérieur d'un élément, si bien que tu obtiens tout de suite un titre ou un lien complet, avec son contenu :

1<!-- Tape : h1{Bienvenue en Égypte !} + Tab -->
2<h1>Bienvenue en Égypte !</h1>
3
4<!-- Tape : a{Clique ici} + Tab -->
5<a href="">Clique ici</a>

Le texte des accolades se place exactement entre la balise ouvrante et la balise fermante. Pour a, Emmet a de nouveau ajouté un href vide - l'adresse, tu la saisiras toi-même.

La numérotation ($)

Le signe dollar, combiné à la multiplication, génère des numéros consécutifs - aussi bien dans un nom de classe que dans un texte :

1<!-- Tape : ul>li.item${Élément $}*3 + Tab -->
2<ul>
3  <li class="item1">Élément 1</li>
4  <li class="item2">Élément 2</li>
5  <li class="item3">Élément 3</li>
6</ul>

Chaque $ se transforme en numéro de la copie : 1, 2, 3. Deux dollars à la suite donnent des numéros précédés d'un zéro : 01, 02, 03.

L'abréviation pour une page HTML5 complète

L'abréviation Emmet la plus importante est le point d'exclamation - elle génère un squelette HTML5 complet, celui que tu écrivais à la main dans les modules précédents :

1<!-- Tape : ! + Tab -->
2<!DOCTYPE html>
3<html lang="en">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8</head>
9<body>
10
11</body>
12</html>

Par défaut, Emmet insère lang="en" et le titre « Document » - sur une page en français, remplace-les tout de suite par lang="fr" et un vrai titre. Dans VS Code, tu peux fixer la langue une fois pour toutes dans le réglage emmet.variables, en ajoutant la valeur "lang": "fr", et je te le recommande : tu configures une seule fois, et chaque nouvelle page démarre correctement.

Mon conseil : n'apprends pas tous les opérateurs d'un coup. Commence par !, > et * - ces trois-là couvrent la majeure partie du travail quotidien. Dans la prochaine leçon, tu vérifieras avec un validateur si le code produit aussi vite est correct.

Pratique

Dans l'éditeur ci-dessous, tu verras des abréviations Emmet à côté du code qu'elles produisent. Essaie de prédire le résultat avant de regarder le code :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Emmet - Écrire du HTML rapidement</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Emmet en pratique</h1>
11
12    <section>
13        <h2>Raccourcis Emmet - Résultats</h2>
14
15        <article>
16            <h3>Raccourci : nav>ul>li*3>a{Link $}</h3>
17            <nav>
18                <ul>
19                    <li><a href="">Lien 1</a></li>
20                    <li><a href="">Lien 2</a></li>
21                    <li><a href="">Lien 3</a></li>
22                </ul>
23            </nav>
24        </article>
25
26        <article>
27            <h3>Raccourci : header+main+footer</h3>
28            <div class="demo-layout">
29                <header class="demo">HEADER</header>
30                <main class="demo">MAIN</main>
31                <footer class="demo">FOOTER</footer>
32            </div>
33        </article>
34
35        <article>
36            <h3>Raccourci : ul.menu>li.item${Element $}*4</h3>
37            <ul class="menu">
38                <li class="item1">Élément 1</li>
39                <li class="item2">Élément 2</li>
40                <li class="item3">Élément 3</li>
41                <li class="item4">Élément 4</li>
42            </ul>
43        </article>
44
45        <article>
46            <h3>Raccourci : div.card>h3{Title}+p{Opis}+a.btn{Read more}</h3>
47            <div class="card">
48                <h3>Titre</h3>
49                <p>Description</p>
50                <a class="btn" href="">En savoir plus</a>
51            </div>
52        </article>
53    </section>
54</body>
55</html>

Souviens-toi : Emmet est l'écriture hiératique du développeur web - quelques caractères d'abréviation se transforment en hiéroglyphes HTML complets, et tu gagnes du temps pour ce qui compte vraiment.