Emmet is a remarkably easy way to add speed and efficiency to your development. With the emmet plugin, you'll never have to think about writing out unnecessary HTML tags again. It's that simple!
What is Emmet?
Emmet is a tool for generating autocomplete and syntax highlighting from HTML, CSS and JS code. The name comes from the word "Emmet" which is an acronym for "Emoji and Modifier Tables."
How to start with Emmet?
If you are a VS Code or Visual Studio Code user then it is already pre-installed in it. You just need to press ! (Exclamation mark) at the first line of the code and press enter key. WOW, that's great it has been initiated.
What about the user who uses another code editor?
Simple, Just follow these three steps:
1. Download Emmet for your editor.
2. Install the extension from https://emmet.io/
3. Start using Emmet!
Emmet in Action
How to add the id and class attributes in <html>?
For adding a class in html using Emmet we use dot(.) before the class name as given below:
Example: .classname
div.content
Result=> <div class="content"> </div>
To add an id in html using Emmet we use hash(#) before the id a name like this:
Example: #idname
div#main
Result=> <div id = "main"></div>
Helpful? Hit the like button
Adding Custom Attributes
To add the Custom Attributes of a tag in html we use Square Brackets [ ] after the tag name as given below:
Example: element [ attribute = value ]
p[title = "main_title"]
Result=> <p title = "main_title"></p>
Adding Text
To add the text in the tag we use Curly brackets { } after the tag as given below:
Example: p{ Clean code always looks like it was written by someone who cares.}
p{Clean code always looks like it was written by someone who cares.}
Result =>
<p>Clean code always looks like it was written by someone who cares.</p>
The basics have been completed yet, For more automation by using Emmet, READ the Second Part of this blog click https://sahilbuild.hashnode.dev/