#13 Emmet for HTML: A Beginner’s Guide to Writing Faster Markup

Writing HTML can sometimes feel like a lot of repetitive typing—opening tags, closing tags, and moving brackets. This is where Emmet comes in.

Think of Emmet as "Autocomplete for HTML." It is a plugin built into almost every modern code editor (like VS Code) that allows you to type short "shorthand" abbreviations and expand them into full blocks of code instantly.

1. Why Every Beginner Needs Emmet

When you're building a project—perhaps like your hariss-international site or a new Next.js component—you want to focus on the structure, not the typing.

• Speed: You can write 50 lines of HTML with just 10 characters.

• Accuracy: Emmet automatically closes your tags, so you never have to worry about a missing </div>.

• Standardization: It ensures your HTML boilerplate is always perfect.

2. The Magic Button: Tab

The secret to using Emmet is the Tab key. You type your abbreviation and immediately hit Tab to expand it.

3. Basic Syntax and Abbreviations

Creating Simple Elements

To create a tag, just type the name and hit Tab.

• Type div → Press Tab → Result: <div></div>

• Type h1 → Press Tab → Result: <h1></h1>

Adding Classes and IDs

Emmet uses the same symbols as CSS selectors (. for class and # for ID).

• Class: div.container → <div class="container"></div>

• ID: section#header → <section id="header"></section>

Multiplication (The Time Saver)

Need five list items? Don't copy-paste. Use the * symbol.

• li*5 → Creates <li></li> five times.

4. Nesting and Structure

You can build entire sections of a page in a single line using the > symbol (for children) and + (for siblings).

• Nesting: div>ul>li

  • This creates a li inside a ul inside a div.

• Siblings: h1+p

  • This creates an h1 and puts a paragraph directly after it.

5. The Ultimate Shortcut: HTML Boilerplate

Every HTML file needs a head, body, and meta tags. Instead of memorizing them, just type: ! and press Tab.

This instantly generates the full "skeleton" of a web page so you can start coding immediately.

6. Real-World Example

If you wanted to create a navigation bar with a logo and three links, you could type: nav>div.logo+ul>li*3>a

This one line expands into:

HTML

<nav>
    <div class="logo"></div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</nav>