Prahlad Inala
Prahlad Inala

Prahlad Inala

Getting Started with Emmet

Getting Started with Emmet

Prahlad Inala
ยทJul 12, 2022ยท

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

What is Emmet?

Emmet is a tool/plugin that comes preinstalled in the most popular Code editors. This tool helps developers to type HTML and CSS code much faster.

HTML Boilerplate code

! + Tab

<!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">
    <meta name="description" content="">
    <title>Document</title>
</head>
<body>

</body>
</html>

Emmet Shortcuts

1. Child ( > )

div>ol>li

<div>
    <ol>
        <li></li>
    </ol>
</div>

Some more examples

div>a>img
<div>
    <a href="">
        <img src="" alt="">
    </a>
</div>

2. Sibling ( + )

h1+h2+p

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

Some more examples

div+a+p
<div></div>
<a href=""></a>
<p></p>

3. Text ( {} )

h1{LearnCodeOnline}

<h1>LearnCodeOnline</h1>

Some more examples

a{LCO}
<a href="">LCO</a>

button{Submit}
<button>Submit</button>

4. Multiplication ( * )

ul>li*5

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

5. ID and Classes (# .)

#lco

<div id="lco"></div>

.lco

<div class="lco"></div>

p.center

<p class="center"></p>

Some more examples

span.span.center.pink
<span class="span center pink"></span>

p.center#lco
<p class="center" id="lco"></p>

6. Attributes ( : )

a:mail

<a href="mailto:"></a>

Some more examples

a:link
<a href="http://"></a>

a:blank
<a href="http://" target="_blank" rel="noopener noreferrer"></a>

a:tel
<a href="tel:+"></a>

form:get
<form action="" method="get"></form>

form:post
<form action="" method="post"></form>

input:button
<input type="button" value="">

input:checkbox
<input type="checkbox" name="" id="">

input:color
<input type="color" name="" id="">

input:datetime
<input type="datetime" name="" id="">a

input:email
<input type="email" name="" id="">

input:file
<input type="file" name="" id="">

input:hidden
<input type="hidden" name="">

input:image
<input type="image" src="" alt="">

input:password
<input type="password" name="" id="">

button:s | button:submit
<button type="submit"></button>

button:d | button:disabled
<button disabled="disabled"></button>

button:r | button:reset
<button type="reset"></button>

7. Custom Attributes ( [ ] )

input[value="User Name"]

<input type="text" value="User Name">

Some more examples

p[title="Prahlad Inala"]
<p title="Prahlad Inala"></p>

td[rowspan=2]
<td rowspan="2"></td>

td[colspan=2]
<td colspan="2"></td>

[title="Prahlad Inala"]
<div title="Prahlad Inala"></div>

8. Grouping ( () )

div>(header>ul>li*3>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

9. Naming and Numbering ( $ )

ul>li.lco$*5

<ul>
    <li class="lco1"></li>
    <li class="lco2"></li>
    <li class="lco3"></li>
    <li class="lco4"></li>
    <li class="lco5"></li>
</ul>

h1{Hello $}*3

<h1>Hello 1</h1>
<h1>Hello 2</h1>
<h1>Hello 3</h1>

h$.lco${Hitesh $}*3

<h1 class="lco1">Hitesh 1</h1>
<h2 class="lco2">Hitesh 2</h2>
<h3 class="lco3">Hitesh 3</h3>

Did you find this article valuable?

Support Prahlad Inala by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this