HTML Auto-comments with Emmet

Emmet does comments

I don't know about you but this was a revelation to me. But you can easily add comments in your HTML files using Emmet.

section.testing>.grid>.child1+.child2

In the above code example we are creating a section with the class of testing, direct child of a div with class grid with a direct child of a div with child1 class and a sibling of div class child 2


      <section class="testing">
        <div class="grid">
          <div class="child1"></div>
          <div class="child2"></div>
        </div>
      </section>

When writing your HTML if you add |c to your Emmet code it will add comments.

Input:

  section.testing>.grid>.child1+.child2|c

Output:

      <section class="testing">
        <div class="grid">
          <div class="child1"></div>
          <!-- /.child1 -->
          <div class="child2"></div>
          <!-- /.child2 -->
        </div>
        <!-- /.grid -->
      </section>
      <!-- /.testing -->

This works with both IDs and Classes by default. Just use # instead of .

Avatar for Shane-Donlon

Written by Shane-Donlon

Loading

Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.