3. Emmet

Emmet pour générer du HTML à partir de sélecteurs CSS

3. Emmet

Exemples Emmet – sélecteurs et génération HTML
Emmet est une extension préinstallée dans beaucoup d’éditeurs de code, dont VSCode et PHPStorm.

Emmet utilise la syntaxe des sélecteurs CSS pour générer les balises HTML.

Sélecteurs simples

Les noms des balises peuvent être utilisés pour générer la balise ouvrante et la balise fermante.

Exemple : taper p, puis Tab → <p></p>

Enfants et voisins

  • Enfant : > (sélecteur d’enfants)
  • Voisin : + (sélecteur de voisin consécutif)

Exemple – un div contenant 3 paragraphes :

div>p+p+p

Résultat :

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

Multiplication

Opérateur * pour multiplier un élément.

Exemple :

div>p*3

Résultat :

<div>
    <p></p>
    <p></p>
    <p></p>
</div>

Parenthèses

Les parenthèses permettent de préciser le résultat à obtenir.

Exemple :

div>(header>ul>li*2>a)+footer>p

Résultat :

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Exemples utiles pour le TP1

Abréviation Description
nav>ul>(li>a)*5 Une balise <nav> avec une liste de 5 items contenant chacun un lien
figure>img+figcaption Une balise <figure> avec une image et une légende
ul>(li>a)*3 Une liste de 3 hyperliens
footer>p>small Un <footer> avec un paragraphe et une balise <small> pour la mention légale

Références