Emmet for HTML: A Beginner Guide To Writting Faster Markup
Emmet
it is basiclly a tool for writting a html and css superfast . Instead of tying manually everything , you can tpe a short abbreviation , and emmet expands it into full code , for example typing ul>li*3 instantly creates a unorder list with three items
it basically a shortcut sysytem that saves time and reduce unnucessay typing
Why Emmet
without Emmet writting HTMLl sn feel very painfull slow . you have to tyoe every tag opening and lose tag manually . this process is repetitive and take more time
on the place of <div><ul><li></li><li></li><li></li></ul></div> you can just write div>ul>li*3.
Emmet is like having a turbo mode for coding means less tyoing , fewer mistake and much faster workflow ,we can say a shortvut language for html.
How Emmet works inside code editors
emmet works in a code editor by taking t he shortcut u tyoe and then expansodng them into full HTML code when u press trigger key ( tab key )
Here’s the simple flow:
You type an abbreviation, like
nav>ul>li*4.You press Tab.
Emmet automatically converts it into:
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
some most commomly abbreviation
| Emmet Abbreviation | Expanded HTML |
html:5 | 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> |
div | <div></div> |
ul>li*3 | html <ul> <li></li> <li></li> <li></li> </ul> |
div#header | <div id="header"></div> |
div.container>p | html <div class="container"> <p></p> </div> |
a[href="https://"] | <a href="https://"></a> |
h1{Hello World} | <h1>Hello World</h1> |
section>div*2>p | html <section> <div><p></p></div> <div><p></p></div> </section> |
you should definately try eac one here are few u can find many on there website
here is the cheatsheet i found online
Classes, IDs, and attributes:
wehnn we cccretes a html element we oftwn need to identify them , make visually good or giv exytra information . For this we use lasses , IDs and attributes
class
a class is used when u want to aplliy same style for more than 1 element
Example:
<p class="text">Hello</p>
<p class="text">Welcome</p>
Here, both paragraph got the same class name text.
With Emmet:
p.text
Output:
<p class="text"></p>
2.ID ( for unique element )
no two element can have same id , only usedd to identify only one element and style them
Example:
<h1 id="title">My Website</h1>
This ID title is unique and can be used for styling.
With Emmet:
h1#title
Output:
<h1 id="title"></h1>
Attribute
it basically gave more detail about an element
Example:
Image source:
<img src="photo.jpg">
Link address:
<a href="home.html">Home</a>
Input type:
<input type="text">
Here:
srctells image locationhreftells link locationtypetells input type
Nested element
it basically means putting one html element inside another element
Example:
<div>
<p>Hello</p>
</div>
Here:
<p>is inside<div>So
<p>is the child<div>is the parent
This is called nesting.
Creating Nested Elements Using Emmet
emmet can make this easy also
Example
Emmet:
div>p
Output:
<div>
<p></p>
</div>
Repeating Element using Multiplication
instead of writing the same tag again and again, we can just tell Emmet how many copies you want using (* )
Why Use Multiplication?
It helps to:
Save typing time
Avoid repetition
Create lists, cards, rows quickly
Basic Example
Emmet:
p*3
Output:
<p></p>
<p></p>
<p></p>
HTML Boilerplate
It is a basic structure of an HTML page.
It includes:
<!DOCTYPE html><html><head><meta>tags<title><body>
Every proper webpage needs this layout
Generating Full HTML Boilerplate Using Emmet
Emmet can generate the complete HTML structure in one line.
Emmet Shortcut:
! or html : 5
now press Tab or Tab
Output You Get
<!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>
This is a standard, correct HTML template.
