Emmet permet gagner en productivité lorsque vous codez. Il est installé par défaut sur Visual Studio code et est proposé en tant qu’extension sur d’autres éditeurs de code. Pour valider une instruction Emmet, il faut, selon l’éditeur de code, appuyez sur la touche TAB ou ENTREE !
Obtenir le squelette de base d’un document hml avec !
!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Générer du Lorem Ipsum
Le Lorem ipsum est du faux texte qui permet de placer du contenu texte fictif en attendant le contenu réel du client. Avec Emmet, vous avez la possibilité d’indiquer la longueur du Lorem :
lorem3
Lorem, ipsum dolor.
lorem50
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla dolorum corporis totam facere aperiam enim id nisi, dolor dolores adipisci fugit officiis magni, voluptatum, debitis tempora omnis? Cumque qui perspiciatis voluptates dolor exercitationem, corrupti dolore in magni quibusdam molestias! Repellendus quia natus officiis inventore, rem nihil alias eveniet tenetur accusantium!
Intégration de class
nav.navigation
<nav class="navigation"></nav>
Gestion des identifiants :
nav#navigation
<nav id="navigation"></nav>
Pour multiplier les éléments, il faudra utiliser l’astérisque *
p*5
<p></p> <p></p> <p></p> <p></p> <p></p>
Pour créer des éléments enfants, on utilisera le chevron fermant >
nav>ul>li*3>a
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>Pour créer des éléments frères, on utilisera le signe de l’addition +
header+main+footer
<header></header> <main></main> <footer></footer>
Intégration d’une chaine de caractères grâce aux accolades { }
p{salut !}*5<p>salut !</p> <p>salut !</p> <p>salut !</p> <p>salut !</p> <p>salut !</p>
Le système d’itération s’emploie avec le dollar $
p{paragraphe n°$}*5<p>paragraphe n°1</p> <p>paragraphe n°2</p> <p>paragraphe n°3</p> <p>paragraphe n°4</p> <p>paragraphe n°5</p>
Accéder à un élément parent avec le caret ^
Dans l’exemple ci-dessous, j’utilise deux fois le caret pour remonter jusqu’à l’élément figure :
figure>bq+figc>cite^^div
<figure>
<blockquote></blockquote>
<figcaption><cite></cite></figcaption>
</figure>
<div></div>Avec tout cela, vous pouvez rapidement et facilement réaliser le squelette de votre structure html 😉
(header>h1{Titre niveau 1}+nav>ul>li*4>a{Lien n°$})+(section>h2{Titre niveau 2}+(article>h3{Titre 3 n°$}+p{lorem2})*5)+footer>a{mon site}<header>
<h1>Titre niveau 1</h1>
<nav>
<ul>
<li><a href="">Lien n°1</a></li>
<li><a href="">Lien n°2</a></li>
<li><a href="">Lien n°3</a></li>
<li><a href="">Lien n°4</a></li>
</ul>
</nav>
</header>
<section>
<h2>Titre niveau 2</h2>
<article>
<h3>Titre 3 n°1</h3>
<p>lorem ipsum.</p>
</article>
<article>
<h3>Titre 3 n°2</h3>
<p>lorem ipsum.</p>
</article>
<article>
<h3>Titre 3 n°3</h3>
<p>lorem ipsum.</p>
</article>
<article>
<h3>Titre 3 n°4</h3>
<p>lorem ipsum.</p>
</article>
<article>
<h3>Titre 3 n°5</h3>
<p>lorem ipsum.</p>
</article>
</section>
<footer><a href="">mon site</a></footer>