Emmet est une boîte à outils essentielle pour écrire rapidement du code HTML, XML et CSS grâce à l'expansion d'abréviations inspirées de CSS.
Syntaxe de hiérarchie structurelle
Élément enfant (>)
nav>ul>li se transforme en :
<nav>
<ul>
<li></li>
</ul>
</nav>
Élément frère (+)
div+p+bq se transforme en :
<div></div>
<p></p>
<blockquote></blockquote>
Remonter d'un niveau (^)
div+div>p>span+em^^bq se transforme en :
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Multiplication (*)
ul>li*3 se transforme en :
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Regroupement (())
div>(header>ul>li*2)+footer>p se transforme en :
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
Attributs et syntaxe de texte
Classes et identifiants (. et #)
header#main-header.navbar.fixed se transforme en :
<header id="main-header" class="navbar fixed"></header>
Attributs HTML personnalisés ([])
a[title="Home" target="_blank"] se transforme en :
<a href="" title="Home" target="_blank"></a>
Numérotation des éléments ($)
ul>li.item$*3 se transforme en :
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
Utilisez plusieurs caractères $ pour ajouter des zéros initiaux (ex. item$$ génère item01, item02).
Nœuds de texte ({})
a{Click Here} se transforme en :
<a href="">Click Here</a>
p>{Click }+a{here}+{ to continue} se transforme en :
<p>Click <a href="">here</a> to continue</p>
Structure de base HTML5 classique
Tapez ! ou html:5 puis appuyez sur Tab :
<!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>