DEV Community

Cover image for Emmet makes life easier..!
poornachary1998
poornachary1998

Posted on • Updated on

Emmet makes life easier..!

INTRODUCTION TO EMMET:

EMMET - It is the essential tool kit for the web-developers.

  • This improves the HTML and CSS workflows.
  • You can write lot of code quickly.
  • This is one of the built - in feature of VS code.

Let's jump into how to implement / use / write HTML script using Emmet:

Open you VS code, In an HTML file simply type ! and you can see the pop-up as suggestion which is nothing but the Emmet.
Now hit Enter button, HTML syntax is ready for you:

Image description

Let us see what are the basic tags in HTML we can perform using EMMET:

  • To create the HTML tags just type the TAG name and hit ENTER.
  • You need to be very keen observer where your cursor is pointing in the tag.

Try Typing the below to see how Emmet works:

Type div then ENTER:

Image description

Type h1 then ENTER:
Image description

  • Similar way, we use

bq for <blockquote>
hdr for <header>
ftr for <footer>
btn for <button>
sect for <section>

- Usage of EMMETS in Classes:

EMMET uses the same way to refer the classes using *. * .

Example:

div.Hero1—> <div class="Hero1"></div>
Enter fullscreen mode Exit fullscreen mode
h1.Hero1.Hero2 —> <h1 class="Hero1 Hero2"></h1>
Enter fullscreen mode Exit fullscreen mode

- Usage of Emmet in ID's:

Example:

div#hero —> <div id="hero"></div>
Enter fullscreen mode Exit fullscreen mode

- You can also combine class and ID's using EMMET

:

div#hero.wrapper —> <div id="hero" class="wrapper"></div>
Enter fullscreen mode Exit fullscreen mode

Let us focus more into HTML Tags and their properties:

- Anchor tag:
An anchor tag is a HTML element that creates a link to a target URL.

  • 1. Type a then you can see the following suggestions:

Image description

<body>

    <!--if you click on a:blank which means when you click on link, it OPENS IN NEW TAB. -->
    <a href="http://poornachary.netlify.com" target="_blank" rel="noopener noreferrer">link</a>

    <!--a:link, simply adds a link and it opens in same tab.-->
    <a href="http://poornachary.netlify.com">link</a>

  <!--if you want to link any email address you can user a:mail-->
<a href="mailto:poornachary1@gmail.com">email</a>

    <!--to link a phone number you can use a:tel-->
    <a href="tel:+91-1234567890">phone number</a>

</body>
Enter fullscreen mode Exit fullscreen mode

- How to link CSS in HTML using EMMET:

link:css --> <link rel="stylesheet" href="style.css">

Enter fullscreen mode Exit fullscreen mode

Image description

- Images using EMMETs:

Type img in body

img --> <img src="xyz.jpg" alt="">

Enter fullscreen mode Exit fullscreen mode

Buttons:

In HTML Buttons are very important:

It is hard to remember all the buttons and the tags in HTML, but Emmet makes easier for us.

Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!

Tip: Always specify the type attribute for a element, to tell browsers what type of button it is.

The keyword for button is btn:

There are 3 types of Buttons:

Image description

btn:d (Disabled) >>
 <button disabled="disabled">disabled button</button>

btn:r (reset) >>
<button type="reset">Reset button</button>

btn:s (submit) >>
 <button type="submit">Submit button</button>

Enter fullscreen mode Exit fullscreen mode

The output is below:

- Siblings Children & Grouping using Emmet:

It just keeps getting better. We can also specify siblings and children using the + and > characters.

Sibling Relation:(+)
section+section —> <section></section><section></section>

Child Relation:(>)
ul>li —> <ul><li></li></ul>

Grouping:(   ()   )
div>(header>ul>li.type$*3)+footer>p

 <div>
        <header>
            <ul>
                <li class="type1"></li>
                <li class="type2"></li>
                <li class="type3"></li>
            </ul>
        </header>
        <footer>
            <p></p>
        </footer>
    </div>

Enter fullscreen mode Exit fullscreen mode

CHEAT SHEET for EMMET:

Download Now!

Conclusion:

Though HTML seems to be simple but I feel it is hard to remember all the tags and attributes. Instead of byhearting (Depending) the tags you can make habit of using Emmet and it makes life simple.

Thankyou for reading my Blog. Appreciate your time!

Top comments (0)