Top 5 EMMET Shortcut For HTML
Hello 👋 Everyone, Good to see you again. So for today’s I am going to write about one of the crucial things in web development which is writing HTML faster. Yes, HTML is the core part of web development writing those tags line by line is somewhat cumbersome and lengthy, right?
That’s why the EMMET tool is generated so that you can write HTML way faster and in an efficient way. EMMET is a tool kit out of the box in VS Code as I use VS Code a lot for development purposes so I know about it but I think for another code editor you can use this feature with an extension.
- Let’s start with HTML Boilerplate code…
You can bring HTML boilerplate code by pressing “!” this bang sign and then pressing the TAB button.
!
2. Let’s jump to any line without touching the mouse anymore.
You can do this by pressing the shortcut “CTRL+ G”.
3. Now it’s time to write some class and id.
For class write a continuous line with “.” like
div.container
For ID write “#” instead “.”
div#container
4. I bet you’re having fun and your ankle is feeling great because you’re not touching the mouse anymore. Let’s write nested tags.
div>ul>li*5
// To create a div under which 5 unordered list items. You can press the tab to jump to another list item without touching the arrow key.
5. Last one, how to write multiple tags with siblings?
article+nav>ul>li*5>Lorem
// It will create siblings article and nav. Nav will have 5 unordered lists and each list will be filled with lore Ipsum.
That’s all for this post. If I found any more shortcuts which will be useful for development I’ll add a new post.
For this and more stay connected with me so that future posts will reach you sooner than others. Thank you for finding extra time to read this post. See you in the next post.
Please share your thoughts through the comment section. I’ll be glad to know more shortcuts from you.
You can also connect with me on LinkedIn and other social sites.
