Home / HTML5 / The Easiest Way To Write HTML Code using Emmet

The Easiest Way To Write HTML Code using Emmet

Saturday August 7, 2021
8 minutes read
246 Views
Write HTML Code using Emmet

When it comes to creating HTML code, if you’re writing a lot of it, it may be excruciating. In today’s post, we’ll show you how to increase your productivity by writing quicker, and you know how to use HTML Code using Emmet. Emmet is a tool for developers to write HTML code. So let’s get started.

Let’s say we want to make a list of fruits. So, here’s a snippet of code:

<h2 class="title">Fruits</h2>
<ul class="fruits">
  <li class="item fruit-1">Fruit 1</li>
  <li class="item fruit-2">Fruit 2</li>
  <li class="item fruit-3">Fruit 3</li>
  <li class="item fruit-4">Fruit 4</li>
  <li class="item fruit-5">Fruit 5</li>
  <li class="item fruit-6">Fruit 6</li>
  <li class="item fruit-7">Fruit 7</li>
  <li class="item fruit-8">Fruit 8</li>
  <li class="item fruit-9">Fruit 9</li>
  <li class="item fruit-10">Fruit 10</li>
</ul>

This is a basic list, but it will take some time to create code by hand. We don’t want to spend time manually writing every single character. But, if we don’t want to write every character by hand, what should we do? Fortunately, we have a solution. Vadim Makeev considered the issue and devised a fantastic solution.

Let me introduce Emmet

Respectfully, ladies and gentlemen, Allow me to introduce Emmet to you (formerly Zen Coding). Emmet is a suite of text editor plug-ins that enable high-speed coding and editing in HTML and CSS using content aid. Vadim Makeev began the project in 2008, and Sergey Chikuyonok and other Emmet users are still actively working on it.
When developing HTML code, Emmet will help you to be much more productive. Simply put, you type a sample, push the tab key, and voila. You simply acquired some time in exchange for the same outcome.
What if I told you that the HTML code for the Fruits list example above could be created in only one line? You don’t think I’m telling the truth? Here’s how to do it:

h2.title{Fruits}+ul.list>li.item.fruit-${Fruit $}*10

Installing Emmet

VSCode: already integrated, you have nothing to do Just Chill and Enjoy.

Atom

Sublime Text

Eclipse

Vim

Emmet basics

Consider the following as it is your Emmet cheatsheet!

Create div tag quickly

It may be the most popular feature that: the quickest method to create a div is to write . and press tab

div

Expands to:

<div></div>


Creating a div with empty class

.

Expands to:

<div class=""></div>

Create tags with a class

The fastest way to create any tag with a class name is just write the tag name then write . then write the class name.

ul.fruits

Expands to:

<ul class="fruits"></ul>

div with empty class name

To create any tag with a class name you do not need to write div, as by default it creates a div tag and helps you.

.container

Expands to:

<div class="container"></div>

Create a tags with multiple classes

To create more tags with any tags:

.row.align-items-center

Expands to:

<div class="row align-items-center"></div>

Create tags with IDs

Same as the one above, instead of that this time we are developing an element with an ID. To develope any tag with ID name, just add # after tag name and then add id name.

section#app

Expands to

<section id="app"> </section>

Create nested tags

To create nested tags try to use >.What is this >? >  is a real-time-saver. Instead of formatting your HTML by yourself and wasting time writing all your > and <, you can use > to create inner tags.

.row>.col-md-12

Expands to:

<div class="row">
  <div class="col-md-12">

  </div>
</div>

Example 2:

ul>li

Expands to:

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


Implicit tag names

Cool thing: Emmet can understand implicit tag names. So, if you started to write a list or a table, Emmet will automatically know what elements should add.

table.fruits>row>.col

Expands to:

<table class="fruits">
  <tr class="row">
    <td class="col"></td>
  </tr>
</table>

Example 2

em>.class

Expands to:

<em><span class="class"></span></em>

Example 3:

ul>.class

Expands to:

<ul>
  <li class="class"></li>
</ul>

Insert content in a tag

To insert text content into tag elements, just bundle up

 the content with {} and add it after . & # (classes & ids) This is the easiest way, for example

article{The Beta Coders}

Expands to:

<article>The Beta Coders</article>

Example: 2

ul.fruits>li.item{item 1}

Expands to:

<ul class="fruits">
  <li class="item">Item 1</li>
</ul>

lorem ipsum content

You can also lorem ipsum text as content. To add lorem ipsum text, just add lorem + add a number of words you want to generate, when add lorem ipsum tex and it will add it, we will not be wrapping lorem within {}, instead, we will be using nest > symbol.

article>lorem15

Expands to:

<article>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui enim, dolor et libero corporis voluptates?
</article>


Create sibling tags – +

Same as > , you can use + to create sibling tags it is also helpful. It is Powerful if you want to quickly layout a page, for example.

header+main+aside+footer

Expands to:

<header></header>
<main></main>
<aside></aside>
<footer></footer>


Climb up tags – ^^

If you will go too deep in your HTML code, you lose some time thinking of how many times you have to climb up to create other tags in HTML. It is not commonly used.

header>nav>img^^footer

Expands to:

<header>
  <nav>
    <img src="" alt="" />
  </nav>
</header>
<footer></footer>


Grouping your tags – ()

You can also group your tags with this useful tag. It can be considered as another way to climb up tags, above mentioned tag can be hard to read.If you want to group mutliple tags, just bind them with ().

(header>nav>img)+footer

Expands to:

<header>
  <nav>
    <img src="" alt="" />
  </nav>
</header>
<footer></footer>


Miltiply tags – *

You can use multiply tags to create more instances of tags. It comes in handy when you are developing demo HTML content for your site, And you do not want to repeat the same code again.

Just Add * then add the number of times you want to repeat that element.

ul>li*5{Item $}

Expands to:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Now you will be thinking, how to add counting in text content. Let us talk about them.


Numbering/Counting – $

When you need to add classes on the fly, this feature comes in handy. This is something I much value because it saves me a great deal of time. By simply adding $ to classes, IDs, and text content, you may quickly produce dynamic numbering. Take a look below.

ul>li.item_$*5{Item $}

Expands to:

<ul>
  <li class="item_1">Item 1</li>
  <li class="item_2">Item 2</li>
  <li class="item_3">Item 3</li>
  <li class="item_4">Item 4</li>
  <li class="item_5">Item 5</li>
</ul>

Choose number to start from

You can choose the number which you want to start with @

ul>li.item_$*5{Item $@0}

Expands to:

<ul>
  <li class="item_1">Item 0</li>
  <li class="item_2">Item 1</li>
  <li class="item_3">Item 2</li>
  <li class="item_4">Item 3</li>
  <li class="item_5">Item 4</li>
</ul>
Add Leading Zeroes

You can also include 0 before the number as below, it is given.

ul>li.item_$*5{Item $@6}

Expands to:

<ul>
  <li class="item_1">Item 06</li>
  <li class="item_2">Item 07</li>
  <li class="item_3">Item 08</li>
  <li class="item_4">Item 09</li>
  <li class="item_5">Item 10</li>
</ul>

Number in descending order

You can add number in descending order as below:

ul>li.item_$*5{Item $@-}

Expands to:

<ul>
  <li class="item_1">Item 5</li>
  <li class="item_2">Item 4</li>
  <li class="item_3">Item 3</li>
  <li class="item_4">Item 2</li>
  <li class="item_5">Item 1</li>
</ul>


Attributes – []

You can also include attributes to HTML elements, by using []Tag. Let us have a look at the example below to understand.

button[type=button]

Expands to:

<button type="button"></button>

Multiple attributes

You can use more than one attribute by adding space between them see the example below:

button[type=button tabindex=1]

Expands to:

<button type="button" tabindex="1"></button>

Custom html attributes

You can insert the `lorem Ipsum’ text as content. To add lorem ipsum content, just add `lorem` + add number of words  you want to develope, when adding lorem ipsum text, not wrap lorem withing `{}`, instead we will be using nest `>` symbol.

button[data-toggle='model']

Expands to:

<button data-toggle="model"></button>


Creating Complete Example

Now let us create fruits list example now, So you can better understand it.

h2.title{Fruits}+ul.fruits>li.item.fruit-${Fruit $}*10

Expands to:

<h2 class="title">Fruits</h2>
<ul class="fruits">
  <li class="item fruit-1">Fruit 1</li>
  <li class="item fruit-2">Fruit 2</li>
  <li class="item fruit-3">Fruit 3</li>
  <li class="item fruit-4">Fruit 4</li>
  <li class="item fruit-5">Fruit 5</li>
  <li class="item fruit-6">Fruit 6</li>
  <li class="item fruit-7">Fruit 7</li>
  <li class="item fruit-8">Fruit 8</li>
  <li class="item fruit-9">Fruit 9</li>
  <li class="item fruit-10">Fruit 10</li>
</ul>

Example: 2

ul.fruits>li.item{item 1}

Expands to:

<ul class="fruits">
  <li class="item">Item 1</li>
</ul>


Shortcut – html5

We can quickly create basic HTML5 markup by using Emmit.

html:5

Expands to:

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

You can also use `doc` to create HTML5 markup fastly.


Shortcut – link

We can quickly create a link tags by using links so we can include any CSS, Favicons, manifest, RSS files in an HTML document.
For example, we want to add a CSS file.

link:css

Expands to:

<link rel="stylesheet" href="style.css">

Other options with link are atomimimportmfmanifestimimportrsstouch & favicon


Shortcut – script:src

We can quickly to Javscript files in HTML documents by using script.

script:src

Expands to:

<script src=""></script>


Generate Basic site layout

Look at complex example, Let’s create a basic site layout using emmet below.

div.wrapper>(header.site-header>(a.logo.ir[href="#"]{Business Name}+nav.main-naviation>ul>(li>a[href="#"])*6))+(div.wrapper>(article.main-content>(h1+p))+aside.sidebar>nav.sub-navigation>ul>(li>a[href="#"])*6)+footer.site-footer>((ul>(li>a[href="#"])*6))+p.copyright

Expands to:

<div class="wrapper">
  <header class="site-header">
    <a href="#" class="logo ir">Business Name</a>
    <nav class="main-naviation">
      <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
      </ul>
    </nav>
  </header>
  <div class="wrapper">
    <article class="main-content">
      <h1></h1>
      <p></p>
    </article>
    <aside class="sidebar">
      <nav class="sub-navigation">
        <ul>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
          <li><a href="#"></a></li>
        </ul>
      </nav>
    </aside>
  </div>
  <footer class="site-footer">
    <ul>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
    </ul>
    <p class="copyright"></p>
  </footer>
</div>


Further Reading for Write HTML Code using Emmet 📚

Check out the following to learn more about Write HTML Code using Emmet:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *