Utiliser Emmet pour accélérer le développement

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>

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