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

HTML is the standard markup language for web pages. With HTML you can create your own website and HTML easy to learn and you will enjoy it!. HTML stands for Hyper Text Markup Language. It use create website structure.

What Emmet is (in very simple terms):

Emmet is a plugin for many popular text editors which greatly improves HTML && CSS workflow. It use while writing HTML and CSS code that improve coding workflow.

It is convert short abbreviation into full code.

#page>div.logo+ul#navigation>li*5>a{Item $}

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Why Emmet is useful for HTML beginners:

Emmet is very useful for beginners because it provide HTML and CSS Emmet abbreviation that help fast and efficient coding. Use Emmet then write short code into convert full code.

Emmet abbreviation => ul>li*3

Multiplication: *
ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Basic Emmet syntax and abbreviations (the few symbols that matter most)

• div (or any tag name) = create that element

• > = nest a child inside a parent

• + = create a sibling next to it

• . = add a class

• # = add an id

• [] = add attributes

• {} = add text inside an element

• * = repeat (multiply) elements

• ! = generate HTML boilerplate

How Emmet works inside code editors:

Emmet works inside code editors as a built-in engine or plugin. Who convert short abbreviation into full expanded code.

Developer typed short abbreviation syntax into code editors and after that it convert full code. and Emmet engine check abbreviation syntax then syntax are correct after that convert into full code.

The ul>li*3 is Emmet abbreviation syntax. It syntax check Emmet plugin after that convert form HTML.

Example patterns:

• > → parent → child

• * → repeat

• . → class

• # → id

Basic Emmet Syntax and abbreviations:

Emmet syntax are used special symbol while convert short code into full HTML structure. Emmet is short code system for writing HTML and CSS code efficiently.

Basic HTML Boilerplate

!

Creating HTML Elements :

Emmet Code	Expands To
h1{Hello World}	<h1>Hello World</h1>
p{This is a paragraph}	<p>This is a paragraph</p>
a{Click me}	<a href="">Click me</a>

Nesting Elements

ul>li*3 creates an unordered list with 3 list items.

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

Adding classes, ID's, and attributes :

Adding class . : - Adding class while using dot . in Emmet abbreviations.

div.container

div.container

Adding ID . : - Adding ID while using hash # in Emmet abbreviations.

div#header

<div id="header"></div>

Adding Attributes [ ] : - Adding attributes while using square bracket [] in Emmet abbreviations.

a[href="https://google.com"]

<a href="https://google.com"></a>

Creating Nested Elements :

Child > :- you can use > operator to nest elements inside each other;

div>ul>li

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

Repeating elements using multiplication :

Emmet abbreviation => ul>li*3

Multiplication: *
ul>li*5
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Generating full HTML boilerplate with Emmet :

Basic HTML Boilerplate

!