How to write HTML faster with Emmet in PhpStorm

Emmet header

How to write HTML faster with Emmet in PhpStorm

In our company everyone is free to choose a preferred IDE to work with. Recently several of us switched from Netbeans to PhpStorm.

One of the new features we make use of is “Emmet”.

With Emmet it’s possible to write HTML in a CSS kind of way and then “expand” it to html.

For example, typing


section.wrapper>header+nav+main+footer

followed by a tab will result in the following HTML structure: 


<section class="wrapper">

   <header></header>

   <nav></nav>

   <main></main>

   <footer></footer>

</section>

Dots (.) are used for classes and hash (#) results in an id.

It’s also possible to repeat certain elements and give content. For example, typing


nav#main-navigation>ul>li*5>a{Menu Item $}

will result in:


 <nav id="main-navigation">

   <ul>

       <li><a href="">Menu Item 1</a></li>

       <li><a href="">Menu Item 2</a></li>

       <li><a href="">Menu Item 3</a></li>

       <li><a href="">Menu Item 4</a></li>

       <li><a href="">Menu Item 5</a></li>

   </ul>

</nav>

Just for fun, try this:


section.wrapper>header+nav>ul>li*5>a[href="#"]{Menu Item $}^^^main>article>header>h1{Page title}+p.intro{Intro}^p{Lorem ipsum}+footer{Written by}^aside^footer

Learn more about Emmet

Blijf op de hoogte via onze nieuwsbrief