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

So basically, In this bog, we are understand what is emmet and how to use emmet in HTML and CSS to write a three time faster code.

What is Emmet?

Emmet is basically a bunch of shortcuts and snippets.
So when you type a small piece of code it creates a bunch of code by just using a small part of information.
You write a short code, emmet expands it into full HTML and CSS for you.

example

You type:

Then press Tab
Emmet turns it into:

<p></p>

Why emmet exist:

Saves time
Fewer mistakes
Less typing

Why emmet is useful for beginners:

When someone is new to HTML and they write HTML , they feel very irritating because they need to open a tag and close the tag ,every time they write HTML.

So emmet helps with reducing type,avoiding syntax errors, clear clusture HTML structure and main it makes writing HTML is less irritating.

E.g.

With Emmet:

p + Tab

You get:

<p></p>

Basic emmet syntax and its abbreviations:-

Symbol Meaning

div Create an element
> Child (nested inside)
. Class
# ID
* Repeat
{} Text content
! HTML boilerplate

These emmet we are going to use in daily basis.

Creating HTML elements using emmet:

Create elements inside elements (child)

Use >

div>p

⬇️

<div>
  <p></p>
</div>

Create multiple elements at once

Use *

li*3

⬇️

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

Create elements next to each other

Use +

h2+p

⬇️

<h2></h2>
<p></p>

Create elements with class

Use .

div.container

⬇️

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

Create elements with ID

Use #

section#about

⬇️

<section id="about"></section>

Generating full HTML boilerplate with Emmet

Type this in an empty HTML file:

Then press Tab (or Enter)

Emmet generates this automatically:

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

Why this is called “boilerplate”

It includes everything a basic webpage needs:

<!DOCTYPE html> → tells browser it’s HTML5
<meta charset> → supports all characters
<meta viewport> → makes site responsive
<title> → page title
<body> → content area

Command Palette