10 Raccourcis Emmet Indispensables pour Ecrire du HTML

Emmet est un plugin incontournable pour les développeurs front-end qui cherchent à optimiser leur workflow à travers des raccourcis d’écriture. Voici les 10 raccourcis Emmet indispensables.

Et si je vous disais qu’il était possible d’écrire cet extrait de code HTML en 7 secondes chrono ? 👇

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Emmet est incroyable !</h1>
	<script src=""></script>
</body>
</html>

Dit comme ça, c’est plutôt sympa. Mais comment s’y prendre ?! Welcoooome Emmet !

Qu’est-ce qu’Emmet ?

Emmet est un plugin qui permet d’accélérer le processus d’écriture de code HTML et de CSS en proposant des raccourcis d’écriture.

La syntaxe des ces raccourcis est étroitement inspirée de celles des sélecteurs CSS pour créer des structures HTML complexes en quelques touches. Un avantage indéniable qui rend l’écriture de raccourcis Emmet très intuitive.

Outre le gain de temps, générer son code avec des raccourcis permet d’éviter des erreurs courantes comme l’oubli d’un chevron dans l’écriture d’une balise HTML.

Intégré nativement dans de nombreux éditeurs de code comme VS Code, il peut également l’être par l’intermédiaire d’un plugin.

Emmet est aujourd’hui si populaire et puissant qu’il est impensable pour un développeur web front de ne pas l’utiliser.

TOP 10 raccourcis Emmet indispensbales

Vous allez découvrir 10 raccourcis Emmet indispensables pour écrire du HTML plus rapidement.

1. Créer un squelette HTML

Créer un squellette HTML avec les balises de premier niveaux (html, head et body) est une tâche longue et récurrente. Heureusement, il existe un raccourci Emmet permettant de générer un squelette type de document HTML.

Pour créer un squelette de document HTML, tapez ! :

Raccourci Emmet :

copié !

HTML généré :

<!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>

2. Créer un élément

Pour créer une balise HTML, tapez simplement le nom de l'élément, sans les chevrons :

Raccourci Emmet :

copié !

section

HTML généré :

<section></section>

3. Créer un élément avec un id

Pour créer une balise HTML avec un id associé, tapez # suivi d’un nom de l’identifiant :

Si le nom d’un élément préfixe le #, alors l’identifiant sera associé à l’élément en question.
Si rien ne préfixe le #, alors l’identifiant sera associé à l’élément div.

Raccourcis Emmet :

copié !

img#avatar
#preview

HTML généré :

<img src="" alt="" id="avatar">
<div id="preview"></div>

4. Créer un élément avec une class

Pour créer une balise HTML avec une class associée, tapez . suivi d’un nom de classe :

Si le nom d’un élément préfixe le ., alors la classe sera associée à l’élément en question.
Si rien ne préfixe le ., alors la classe sera associée à l’élément div.

Raccourcis Emmet :

copié !

button.btn.btn-primary
.container

HTML généré :

<button class="btn btn-primary"></button>
<div class="container"></div>

Pour cumuler des classes, il suffit de les chaîner avec plusieurs ..

5. Créer un élément avec des attributs

Pour ajouter des attributs custom à un élément, on les note entre crochets : [], selon le format : [attribut1="valeur" attribut2="valeur" ...].

Raccourci Emmet :

copié !

img[src="https://picsum.photos/500" alt="Image aléatoire"]

HTML généré :

<img src="https://picsum.photos/500" alt="Image aléatoire">

6. Créer un élément contenant du texte

Pour ajouter du texte au sein d’une balise paire, on note ce dernier entre accolades {} :

Raccourci Emmet :

copié !

h1{Emmet est fantastique !}

HTML généré :

<h1>Emmet est fantastique !</h1>

7. Créer des éléments imbriqués

Pour imbriquer un élément dans un autre, on utilise le chevron >, selon le format : elementParent>elementEnfant :

Raccourci Emmet :

copié !

header>nav

HTML généré :

<header>
	<nav></nav>
</header>

8. Créer des éléments voisins

Pour créer un élément au même niveau d’arborescence qu’un autre, on utilise le +, selon le format : elementAvant+elementApres :

Raccourci Emmet :

copié !

header+main+footer

HTML généré :

<header></header>
<main></main>
<footer></footer>

9. Multiplier des éléments

Pour multiplier le nombre d’éléments créés, on utilise l’opérateur * suivi du nombre de générations souhaitées.

Raccourci Emmet :

copié !

a*3

HTML généré :

<a href=""></a>
<a href=""></a>
<a href=""></a>

10. Regrouper des raccourcis

Et si je souhaite créer deux section au même niveau d’arborescence, contenant chacune un h2. Comment faire ?

Cet extrait va bien générer deux sections voisines :

copié !

section#s1+section#s2

HTML généré :

<section id="s1"></section>
<section id="s2"></section>

Mais alors, comment ajouter du contenu dedans ? Comme cela ? 👇

copié !

section#s1>h2{Section 1}+section#s2>h2{Section 2}

HTML généré :

<section id="s1">
	<h2>Section 1</h2>
	<section id="s2">
		<h2>Section 2</h2>
	</section>
</section>

Raté… le problème vient du fait que la section 2 sera créée au même niveau d’arborescence que l’élément créé par l’abréviation précédente, autrement dit h2{Section 1}.

Heureusement, Emmet a pensé à tout en implémentant l’usage de parenthèses (), permettant de créer des élements au sein de plusieurs éléments de même niveau. On parle de groupement.

Pour regrouper des éléments, le format est le suivant : (groupe de selecteurs 1)+(groupe de selecteurs 2) :

Raccourci Emmet :

copié !

(section#s1>h2{Section 1})+(section#s2>h2{Section 2})

HTML généré :

<section id="s1">
	<h2>Section 1</h2>
</section>
<section id="s2">
	<h2>Section 2</h2>
</section>

Les parenthèses agissent ici, comme en mathématiques, en définissant des groupes de priorité.Cela permet de contrôler précisément la hiérarchie des éléments, garantissant que les sections et leur contenu sont créés au même niveau d’arborescence, évitant ainsi toute imbrication incorrecte.

BONUS : Des raccourcis de raccourcis…

Pour simplifier la création d’éléments courants, Emmet propose des raccourcis… de raccourcis. Leur syntaxe est bien souvent :

Une version abrégée d’un nom d’élément
Constitué de l’opérateur :
Préfixée d’un + pour créer un groupement usuel d’éléments imbriqués
Etc.

En voici quelques exemples :

Raccourci Emmet simplifié	Raccourci Emmet traditionnel	HTML
`link:css`	`link[rel="stylesheet" href="style.css"]`	`<link rel="stylesheet" href="style.css">`
`link:favicon`	`link[rel="shortcut icon" type="image/x-icon" href="favicon.ico"]`	`<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />`
`script:src`	`script[src=""]`	`<script src=""></script>`
`input:text`	`input[type="text" name="" id=""]`	`<input type="text" name="" id="">`
`a:mail`	`a[href="mailto:"]`	`<a href="mailto:"></a>`
`table+`	`table>tr>td`	`<table><tr><td></td></tr></table>`

Exécuter un raccourci

Lorsque vous avez écrit un raccourci, votre IDE ouvrira une petite fenêtre permettant de constater que la syntaxe d’Emmet a été reconnue. Pour exécuter le raccourci, il suffira donc de taper la commande TAB ou ENTER.

Il peut arriver que cette fenêtre n’apparaisse pas (bien souvent car vous avez déplacé votre curseur ou édité le raccourci), il faudra alors placer votre curseur en fin de raccourci et taper Ctrl+ESPACE.

Exemples de raccourcis complexes

Emmet offre bien évidemment la possibilité de combiner ces raccourcis entre eux pour créer des structures complexes.

Voici quelques extraits démontrant la potentiel d’Emmet :

Générer un tableau complexe

Raccourci Emmet :

copié !

table>(caption{Légende du tableau})+(thead>tr>th*3{Colonne $})+(tbody>tr*5>td*3{Data $})+(tfoot>tr>th*3{Colonne $})

HTML généré :

<table>
	<caption>Légende du tableau</caption>
	<thead>
		<tr>
			<th>Colonne 1</th>
			<th>Colonne 2</th>
			<th>Colonne 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Colonne 1</th>
			<th>Colonne 2</th>
			<th>Colonne 3</th>
		</tr>
	</tfoot>
</table>

Générer un menu de navigation

Raccourci Emmet :

copié !

header>(a>img[src="https://picsum.photos/500" alt="Image de démo"])+nav.navbar>ul.navbar-links>li.navbar-link*5>a{Lien$}

HTML généré :

<header>
	<a href=""><img src="https://picsum.photos/500" alt="Image de démo"></a>
	<nav class="navbar">
		<ul class="navbar-links">
			<li class="navbar-link"><a href="">Lien1</a></li>
			<li class="navbar-link"><a href="">Lien2</a></li>
			<li class="navbar-link"><a href="">Lien3</a></li>
			<li class="navbar-link"><a href="">Lien4</a></li>
			<li class="navbar-link"><a href="">Lien5</a></li>
		</ul>
	</nav>
</header>

Générer un listing de produits

Raccourci Emmet :

copié !

section#products>article.product*3>(header.product-header>img+h2{Produit $})+(.product-body>span.product-price{}+.product-description{})

HTML généré :

<section id="products">
	<article class="product">
		<header class="product-header">
			<img src="" alt="">
			<h2>Produit 1</h2>
		</header>
		<div class="product-body">
			<span class="product-price"></span>
			<div class="product-description"></div>
		</div>
	</article>
	<article class="product">
		<header class="product-header">
			<img src="" alt="">
			<h2>Produit 2</h2>
		</header>
		<div class="product-body">
			<span class="product-price"></span>
			<div class="product-description"></div>
		</div>
	</article>
	<article class="product">
		<header class="product-header">
			<img src="" alt="">
			<h2>Produit 3</h2>
		</header>
		<div class="product-body">
			<span class="product-price"></span>
			<div class="product-description"></div>
		</div>
	</article>
</section>

Comme vous avez pu le constater avec ces exemples, si les raccourcis Emmet sont redoutablement efficaces pour générer de grandes portions de code HTML, leur syntaxe devient plus complexe à mesure que les structures s’approfondissent.

Une astuce que j’exploite personnellement consiste à procéder par itérations.

J’ai par exmeple pour habitude de décomposer une expression comme table>(caption{Légende du tableau})+(thead>tr>th*3{Colonne $})+(tbody>tr*5>td*3{Data $})+(tfoot>tr>th*3{Colonne $}) de la manière suivante :

Dans un premier temps une structure globale avec : table>caption{Légende du tableau}+thead+tbody+tfoot
Puis mettre mon curseur dans thead pour écrire : tr>th*3{Colonne $}
Puis mettre mon curseur dans tbody pour écrire : tr*5>td*3{Data $}
Puis mettre mon curseur dans tfoot pour écrire : tr>th*3{Colonne $}

Emmet, des raccourcis aussi pour CSS

Bien qu’Emmet soit principalement connu pour faciliter l’écriture de balises HTML grâce à des abréviations inspirées des sélecteurs CSS, il offre également de puissants raccourcis pour le CSS lui-même.

La syntaxe d’Emmet étant étroitement liée aux sélecteurs CSS, il n’est pas spécialement utilisé pour générer des sélecteurs, mais plutôt pour accélérer l’écriture de couples propriétés/valeurs fréquemment utilisés.

Voici quelques exemples concrets qui illustrent à quel point Emmet peut simplifier et accélérer l’écriture du style CSS :

Raccourci Emmet	Équivalent CSS
`w100p`	`width: 100%;`
`df`	`display: flex;`
`dg`	`display: grid;`
`jcsb`	`justify-content: space-between;`
`p10`	`padding: 10px;`
`bgc#f00`	`background-color: #f00;`
`bgc#f00`	`grid-template-columns: repeat();`
`fw700`	`font-weight: 700;`

Il existe de nombreuses autres abréviations, qui reposent généralement sur l’écriture des initiales seules des propriétés/valeurs dans le but qu’Emmet assure leur autocomplétion.

Ces abréviations permettent de coder rapidement des styles complexes avec une syntaxe concise, rendant ainsi la conception CSS bien plus rapide.

En tant que développeur web, Emmet est un outil incontournable pour accélérer l’écriture de code HTML et CSS, grâce à des raccourcis simples et intuitifs.

Alors, si vous ne l’utilisez pas encore, je ne peux que vous recommander de l’intégrer dans votre workflow. Chaque raccourci Emmet est une opportunité de coder plus vite, tout en réduisant les erreurs. Vous verrez, une fois maîtrisé, vous ne pourrez plus vous en passer !

N’hésitez pas à explorer davantage les possibilités d’Emmet et à personnaliser vos propres raccourcis pour aller encore plus loin.

Newsletter

Qu’est-ce qu’Emmet ?

TOP 10 raccourcis Emmet indispensbales

1. Créer un squelette HTML

2. Créer un élément

3. Créer un élément avec un id

4. Créer un élément avec une class

5. Créer un élément avec des attributs

6. Créer un élément contenant du texte

7. Créer des éléments imbriqués

8. Créer des éléments voisins

9. Multiplier des éléments

10. Regrouper des raccourcis

BONUS : Des raccourcis de raccourcis…

Exécuter un raccourci

Exemples de raccourcis complexes

Emmet, des raccourcis aussi pour CSS

Lire aussi