DEV Community

Cover image for Emmet Part 1 - Basics
codeSTACKr
codeSTACKr

Posted on • Updated on • Originally published at codestackr.com

Emmet Part 1 - Basics

Emmet is a FREE plugin for many popular code editors which helps you write HTML and CSS fast! Emmet has support for many editors, including Sublime Text, Atom, Visual Studio Code, and many others. VS Code comes with Emmet pre-installed.

When you start typing an Emmet abbreviation, you will see the abbreviation displayed in the suggestion list.

Alt Text

In this post we cover the following topics:
📌 Tags
📌 Siblings
📌 Children
📌 Class
📌 Id
📌 Id & Class
📌 Content
📌 Multiply⠀⠀⠀⠀⠀⠀

Part 2 coming soon!

Tags

Basic abbreviations can be used to quickly create HTML tags.

  • div

    <div></div>
    
  • p

    <p></p>
    
  • h1

    <h1></h1>
    

Siblings

To create a set of HTML tags as siblings just use + in between each abbreviation.

  • hdr+sect+ftr

    <header></header>
    <section></section>
    <footer></footer>
    

Children

Child elements can be created by using > in between each abbreviation.

  • sect>ul>li

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

Class

In order to create elements with classes just append the class to the abbreviation using .

  • h1.center

    <h1 class="center"></h1>
    

Id

To add an Id to an element, append the Id to the abbreviation using #

  • h1#header

    <h1 id="header"></h1>
    

Id & Class

You can include multiple attributes on an element abbreviation.

  • h1#header.center

    <h1 id="header" class="center"></h1>
    

Content

Text content of an element can be included by wrapping the content with { }

  • p{This is a paragraph.}

    <p>This is a paragraph.</p>
    

Multiply

We can create multiple elements by multiplying them using *

  • ul>li*4

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

Part 2 coming very soon! Check out the full video on my YouTube channel.

Thanks for reading!

Say Hello! Instagram | Twitter | YouTube

Top comments (3)

Collapse
 
heallz1 profile image
Heallz

Pretty interesting, very useful to get faster when building structures

Collapse
 
codestackr profile image
codeSTACKr

More advanced techniques will be in the next part..

Collapse
 
zgparsons profile image
Zachary Parsons

Thank you! I keep meaning to learn all of these abbreviations, and this will help!