Emmet : Accélérez votre développement web avec ces raccourcis magiques

Vous connaissez déja les bases du HTML, mais vous cherchez a gagner en productivité ? Emmet est l'outil qu'il vous faut. En comparant les méthodes traditionnelles et les raccourcis Emmet, vous de couvrirez un gain de temps considérable et une amélioration de la qualité de votre code. Développeurs front-end, cette extension est faite pour vous ! Emmet vous offre un arsenal de raccourcis et de snippets pour automatiser la création de structures HTML, CSS et me me de certains langages de préprocesseur. Gagnez en efficacité et concentrez-vous sur la logique de votre application.

1. Qu’es ce que c’est Emmet

Emmet est une extension pour les éditeurs de code qui utilise unesyntaxe inspirée des sélecteurs CSS pour
générer rapidement du code HTML et CSS. Imaginez pouvoir écrire div#container>ul>li*5>a pour créer
une liste non ordonne e avec 5 éléments de liste, chacun contenant un lien. C'est ce que vous permet
Emmet !

En résumé, Emmet offre de nombreux avantages :

Gain de temps considérable : Fini de taper des lignes de code répétitives.
Reduction des erreurs : Moins de risque de fautes de frappe.
Amélioration de la productivité : Plus de temps pour se concentrer sur la logique de votre application.
Code plus propre et plus lisible : Les structures de code générées par Emmet sont bien formate es.

Pour qui ?

Emmet est un outil indispensable pour tous les développeurs web, des débutants aux experts, qui
souhaitent gagner en efficacité dans leur travail.

2. Les Bases d'Emmet : Maîtriser la Syntaxe pour un Codage Efficace

Emmet offre une syntaxe concise et intuitive pour générer rapidement du code HTML et CSS. En maîtrisant
ces bases, vous pourrez écrire du code plus rapidement et avec moins d'erreurs.

2.1 STRUCTURE DE BASE D’UNE PAGE HTML

Pour avoir une structure de base complète d’une page html tout ce que vous avez a taper c’est :
Html:5 ou encore simplement ! (un point d’exclamation) pour avoir la structure de base d’une page html.
Vous ouvrez votre éditeur de code vous tapez html:5 ou ! et vous obtiendrez cette structure :

<!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.2 LES ÉLEMENTS HTML

Utilisez les noms d'éléments HTML standard : div, p, span, section,
header, etc.

Pour générer la balise ouvrante et fermante et ainsi ne perdez plus du temps a faire a chaque fois les balises
ouvrantes et fermantes avec des chevrons <>.

Exemple : div génèrera une balise <div></div>.

2.3 LES ATTRIBUTS

2.3.1 Les attributs génériques

Gênerez des balises html avec leurs attributs en une fois en Utilisant le symbole # (dièse)pour définir un ID et . (Point) pour de finir une classe.

Exemples :

div#monId génèrera <div id="monId"></div>
div.maClasse génèrera <div class="maClasse"></div>
div#maDiv.class1.class2 génèrera <div id="maDiv" class="class1 class2"></div>.

2.3.2 Créer une balise qui a des attributs spécifiques

Si les attributs que vous voulez générer ne sont pas des classes ou des identifiants vous pouvez mettre
l’attribut en question entre crochets [ ].

Exemples :

input[type="password"] génèrera <input type="password">
a[href="lien" target="_blank"] génèrera <a href="lien" target="_blank"></a>

2.4 LES ENFANTS

Utilisez le symbole > pour imbriquer des éléments.

Exemple : ul>li*5 génèrera une liste non ordonnée avec 5 éléments de liste :

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

2.5 LE CONTENU DES BALISES

2.5.1 Texte tangible

Utilisez du texte entre accolades { } pour ajouter du contenu a un élément.

Exemple : div{Mon texte} génèrera <div>Mon texte</div> .

2.5.2 Texte de test

En tapant lorem vous obtiendrez un texte de remplissage en latin pour vos test.

Exemples :

Lorem génèrera Lorem ipsum dolor sit amet consectetur adipisicing elit…
lorem5 génèrera Lorem ipsum dolor sit amet. (5 mots)
lorem*5 génèrera

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero, ut? Eligendi rerum officia autem adipisci odio veritatis vitae, esse quaerat accusamus tempora perspiciatis commodi reprehenderit veniam fugiat laborum et tenetur?
Temporibus incidunt a vero! Commodi laboriosam suscipit amet illo tempora veniam mollitia laborum nihil saepe maxime ullam id magnam, numquam voluptatum atque quidem minima in laudantium nisi vero. Ratione, tempora!
Officiis maiores blanditiis ullam dignissimos, facere minima perspiciatis placeat quasi doloremque molestias ipsum quia omnis cum? Expedita voluptate, eveniet dolor nemo velit soluta non sequi fuga dolorum asperiores, nesciunt quod!
Officia tenetur atque quae eos deserunt, totam, maxime est ratione, suscipit id soluta. Nemo debitis deserunt quos. Corrupti aliquid suscipit delectus sed alias quo magni, quam non repellat, voluptatum recusandae.
Quae architecto nam ratione laudantium, reprehenderit exercitationem ab excepturi placeat quaerat maiores impedit cum, sunt illo aliquam atque! Beatae id vitae vero itaque dolor voluptatibus maiores perspiciatis nam iste quis.

(5 phrases).

Emmet gère automatiquement l'indentation de votre code, ce qui améliore considérablement sa
lisibilité. Chaque fois que vous ajoutez un élément enfant, il est indenté par rapport à son parent.

2.6 LES OPERATEURS

Les operateurs vous permettent d’écrire la structure d’une page de façon plus complète.

2.6.1 L’operateur +

Ajoute un élément frère au niveau du me me parent.

Exemple :

p+div+section génèrera

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

div>p+span génèrera

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

2.6.2 L’operateur >

Ajoute un élément enfant. (Déjà explique)

2.6.3 L’operateur ^

Ajoute un élément parent.

Exemple : div>p^h1 génèrera

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

2.7 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.

Exemples : (header>h1+h2)+(main>section*3)+footer génèrera

<header>
    <h1></h1>
    <h2></h2>
</header>
<main>
    <section></section>
    <section></section>
    <section></section>
</main>
<footer></footer>

2.8 LES MULTIPLICATEURS

*n : Multiplie l'élément précèdent n fois.

Exemples :

div>p*3 génèrera

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

div.bg-white.text-dark*3 génèrera

<div class="bg-white text-dark"></div>
<div class="bg-white text-dark"></div>
<div class="bg-white text-dark"></div>

2.9 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.

Exemples :

div#element$*12 génèrera

<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 génèrera

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

2.10 EXEMPLE COMPLET

(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

Génèrera

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

2.11 EMMET ET LE CSS

w:100 génèrera width: 100px;
h:25vw génèrera height: 25vw;
ml20 génèrera margin-left: 20px;
d:n génèrera display: none;
p:a génèrera position: absolute;
bg génèrera background: #000;
! génèrera !important

CONCLUSION

En somme, Emmet est un outil indispensable pour tout de veloppeur web qui souhaite gagner en
productivite et en efficacite . En maî trisant sa syntaxe concise, vous pouvez ge ne rer des structures HTML et
CSS complexes en un temps record, tout en re duisant conside rablement le risque d'erreurs. N'attendez plus
pour inte grer Emmet a votre workflow quotidien et de couvrez un nouveau niveau de productivite dans
votre developpement front-end.

Emmet : Accélérez votre développement web avec ces raccourcis magiques

1. Qu’es ce que c’est Emmet

En résumé, Emmet offre de nombreux avantages :

Pour qui ?

2. Les Bases d'Emmet : Maîtriser la Syntaxe pour un Codage Efficace

2.1 STRUCTURE DE BASE D’UNE PAGE HTML

2.2 LES ÉLEMENTS HTML

2.3 LES ATTRIBUTS

2.3.1 Les attributs génériques

2.3.2 Créer une balise qui a des attributs spécifiques

2.4 LES ENFANTS

2.5 LE CONTENU DES BALISES

2.5.1 Texte tangible

2.5.2 Texte de test

2.6 LES OPERATEURS

2.6.1 L’operateur +

2.6.2 L’operateur >

2.6.3 L’operateur ^

2.7 GROUPER LES ÉLÉMENTS

2.8 LES MULTIPLICATEURS

2.9 NUMÉROTER DES ÉLÉMENTS

2.10 EXEMPLE COMPLET

2.11 EMMET ET LE CSS

CONCLUSION

Navigation

Contact

Legal

Basculer le thème

Réseaux sociaux