<![CDATA[Emmet In HTML]]>https://emmet-and-html.hashnode.devRSS for NodeMon, 07 Sep 2026 05:04:02 GMT60<![CDATA[How to Write HTML at the Speed of Light]]>, then the content, then . Then doing it again. A...]]>https://emmet-and-html.hashnode.dev/how-to-write-html-at-the-speed-of-lighthttps://emmet-and-html.hashnode.dev/how-to-write-html-at-the-speed-of-lightSun, 01 Feb 2026 18:22:24 GMTWelcome back to The Tech Tales.

In our recent blogs, we learned HTML (the skeleton) and CSS Selectors (how to point at the skeleton).

But let’s be honest: writing HTML is exhausting. Typing <div>, then the content, then </div>. Then doing it again. And again. The < and > keys on your keyboard probably hate you by now.

What if I told you that you could type a simple abbreviation like ul>li*5 and the computer would instantly write 10 lines of code for you?

This isn't magic. It's Emmet.

What is Emmet?

Emmet is a plugin that comes pre-installed in most modern code editors (like VS Code).

Think of Emmet as Auto-Correct or Text Expansion for coders.

  • Real Life: You type "OMW", your phone expands it to "On my way!"

  • Coding: You type h1, Emmet expands it to <h1></h1>.

It turns you from a slow typist into a code generator.

1. The Basics: Tags, Classes, and IDs

You don't need to memorize complex commands. Emmet uses the exact same syntax as the CSS Selectors we learned in the last blog!

The Element

  • You Type: div (then hit Tab or Enter)

  • Emmet Writes: <div></div>

The Class (.)

  • You Type: .container

  • Emmet Writes: <div class="container"></div> (Note: If you don't specify a tag, Emmet assumes you mean a div).

The ID (#)

  • You Type: #navbar

  • Emmet Writes: <div id="navbar"></div>

Combining Them

  • You Type: p.text-bold

  • Emmet Writes: <p class="text-bold"></p>

2. Nesting: The Child (>)

HTML is a tree. You have parents and children. Emmet lets you build the whole family at once using the "Greater Than" symbol >.

  • You Type: div>ul>li

  • Emmet Writes:

    HTML

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

  • Analogy: You are telling Emmet: "Create a box, inside that put a list, and inside that put an item."

3. Multiplication: The Star (*)

This is the best feature. If you need a list with 5 items, don't copy-paste the line 5 times. Just use math.

  • You Type: li*5

  • Emmet Writes:

    HTML

      <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>

4. Grouping: The Complex Workflow

Let's combine everything we just learned into one "Power Move." Imagine you want a navigation bar (nav) with an unordered list (ul) containing 4 links (a).

  • The Old Way: Typing 15 separate tags manually.

  • The Emmet Way: nav>ul>li*4>a

Result:

HTML

<nav>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>

You just wrote that in 3 seconds.

5. The Ultimate Shortcut: The Boilerplate (!)

When you start a brand new HTML file, you need that standard structure (<html>, <head>, <body>, etc.). It's boring to type.

  • You Type: ! (Exclamation mark + Tab)

  • Emmet Writes:

    HTML

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

Summary

Emmet is optional. You can type everything manually if you enjoy finger pain. But if you want to be efficient, learn to speak Emmet.

  • Tags: Just type the name.

  • Classes: Use dot .classname.

  • IDs: Use hash #idname.

  • Children: Use >.

  • Multiplication: Use *.

Open your VS Code right now, create a dummy HTML file, and try typing ul>li*5. It feels satisfying every single time.

See you in the next blog of The Tech Tales!

]]>