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:
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:
Type h1 then ENTER:
- 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>
h1.Hero1.Hero2 —> <h1 class="Hero1 Hero2"></h1>
- Usage of Emmet in ID's:
Example:
div#hero —> <div id="hero"></div>
- You can also combine class and ID's using EMMET
:
div#hero.wrapper —> <div id="hero" class="wrapper"></div>
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:
<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>
- How to link CSS in HTML using EMMET:
link:css --> <link rel="stylesheet" href="style.css">
- Images using EMMETs:
Type img in body
img --> <img src="xyz.jpg" alt="">
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:
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>
- 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>
CHEAT SHEET for EMMET:
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)