<![CDATA[Emmet for HTML]]>https://emmetintroduction.hashnode.devRSS for NodeSun, 06 Sep 2026 02:47:18 GMT60<![CDATA[Emmet for HTML: A Beginner’s Guide to Writing Faster Markup]]>https://emmetintroduction.hashnode.dev/emmet-for-html-a-beginners-guide-to-writing-faster-markuphttps://emmetintroduction.hashnode.dev/emmet-for-html-a-beginners-guide-to-writing-faster-markupFri, 30 Jan 2026 08:20:58 GMTHow slow writing HTML without emmet?

When we spin(open) code editor like VS code for writing some code for HTML, CSS and any kind of language.But when we start writing HTML line by line in code editor(VS code) it’s take more time to write HTML tags, class, ID, content and many kinds HTML elements and also write some elements in repeated times it’s fells boring and erritative. To solve this problem Emmet comes into the picture.

What is emmet?

Emmet is open source tool kit to write HTML, CSS, in code editors. It comes with VS code in built, it’s no need to install. It speeds workflow of developers when they write HTML, CSS by using the abbreviations that expand into full code blocks.

When beginners type HTML before emmet execution they write line by line

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

But when they learn about emmet here,

How emmet work inside code editor?

Stage 1: When you type in code editor like div>ul>li and press tab or enter.

Satge 2: Code editors check is it HTML file or not, If Yes then text send to the emmet engine

Stage 3: Emmet engine analyze the text and breaks it into token form. This is known as parsing

Stage 4: Emmet convert this into DOM (It happens internally)

Stage 5: When DOM is generate it converts into code so final output is look like this

 <div>
    <ul>
        <li></li>
    </ul>
 </div>

press (shift+1) it’s show ! sign and after that press enter it’s automatically generate boilerplate code of HTML

Beginnes guide of some emmet abberivation

Basics emmet syntax

  1. Parent-child(>) : It prints the child

type div>p it’s print

   <div>
    <p></p>
   </div>

2.Siblings(+) : It’s print siblings

Type div>h1+div+p it prints

 <div>
    <h1></h1>
    <div></div>
    <p></p>
 </div>
  1. Multiplication(*) : it’s prints how many times of an element

Type div>ul>li*3 it prints

    <div>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>

  1. climb up(^) : move one level up

    Type div>ul>li^p it print

     <div>
     <ul>
         <li></li>
     </ul>
     <p></p>
 </div>

  2. Grouping( () ) : Group elments together

Type div>(header+h1)+(section+a)^footer it’s print

 <div>
    <header>
        <h1></h1>
    </header>
    <section><a href=""></a></section>
 </div>
 <footer></footer>

Above mention basics syntax of emmet and syntax are many kind of, when you start writing HTML you will learned automatically.

  1. Adding classes, IDs, and attributes, content

Type div.container>h1{This your H1 heading}+label+input:text[name=”first”]+h2#heading2{This is your H2 heading}

Output of above type syntax

<div class="container">
        <h1>This your H1 heading</h1>
        <label for=""></label><input type="text" name="”first”" id="">
        <h2 id="heading2">This is your H2 heading</h2>
    </div>

That all for Emmet for HTML: A begginers guide.

]]>