<![CDATA[Emmet for HTML]]>https://shubh-html-emmet.hashnode.devRSS for NodeSun, 20 Sep 2026 13:17:34 GMT60<![CDATA[Emmet for HTML: A Beginner’s Guide to Writing Faster Markup]]>
  • without Emmet Type every tag (
      ,
    • ,
      • ,
    ) Add every class and number by hand Move the cursor multiple ti...]]>https://shubh-html-emmet.hashnode.dev/emmet-for-html-a-beginners-guide-to-writing-faster-markuphttps://shubh-html-emmet.hashnode.dev/emmet-for-html-a-beginners-guide-to-writing-faster-markupFri, 30 Jan 2026 15:39:46 GMTImagine i have three list items in html without emmet
    <ul>
    <li class=”item1”><li>
    <li class=”item1”><li>
    <li class=”item1”><li>
    </ul>

    without Emmet

    • Type every tag (<ul>, <li>, </li>, </ul>)

    • Add every class and number by hand

    • Move the cursor multiple times

    This is fine for small snippets, but becomes very slow for

    • Forms with many fields

    • Navigation menus

    • Repeated cards, sections, or list items

    Emmet solves this you write a short “code sentence” (abbreviation) and expand it into full HTML.

    Emmet
    Emmet is a shortcut language for writing HTML and CSS.

    ex:- ul>li.item*3

    Then press the Emmet expand key usually Tab in VS Code, and it becomes
    <ul>
    <li class=”item1”><li>
    <li class=”item1”><li>
    <li class=”item1”><li>
    </ul>

    Emmet is optional you can write HTML without it. But once you get used to it, it makes everyday HTML much faster and less repetitive.

    How Emmet works inside a code editor

    Most modern editors (like VS Code) have Emmet built-in.

    flow:-

    1. You type an Emmet abbreviation, for example: ul>li*3

    2. Your cursor is at the end of the abbreviation.

    3. You press the expand key (often Tab or Enter depending on settings).

    4. The editor sends that text to Emmet.

    5. Emmet understands the mini-language and generates full HTML.

    6. The editor replaces your abbreviation with the expanded HTML.

    Basic Emmet syntax and abbreviations

    1. Single Elements

    2. Adding classes ( . ) and IDs ( # )

    Creating HTML elements using Emmet

    1. A div with a class

    div.card expands to → <div class=”card”></div>

    2. A link (a) with href and text
    Use {} for text content (inner text).

    a[href="#"]{Click me} to → <a href="#“>Click me</a>

    3. Input and label

    label[for="email"]{Email:}+input#email[type="email"]
    expand to:-

    <label for=”email”>Email:</label>
    <input id=”email” type=”email”>

    Adding classes, IDs, and attributes

    1. Class ( . ) and ID (#)

    span.highlight → <span class=”height”></span>

    input#username → <input id=”username”>

    2. Attributes with [ ]

    img[src="photo.jpg" alt="photo"] → <img src=”photo.jpg” "alt=”photo”>

    3. Text content with { }

    p{Hello world} → <p> Hello world </p>

    Creating nested elements

    1. Simple nesting

    ul>li → <ul><li><li></ul>

    2. Multiple nesting

    nav>ul>li
    to → <nav>
    <ul>
    <li></li>
    </ul>
    </nav>

    3. Adding classes inside the structure

    nav.navbar>ul.menu>li.item

    to → <nav class=”navbar”>
    <ul class=”menu”>
    <li class=”item”></li>
    </ul>
    </nav>

    Generating full HTML boilerplate with Emmet

    ! to → <!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>

    ]]>