Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
5 views10 pages

HTML

This document provides tips for enhancing HTML coding efficiency using Emmet, a shorthand tool. It includes various techniques such as skipping divs, creating multiple elements, nesting, and adding classes or IDs. The document aims to help users streamline their HTML workflow with practical examples and shortcuts.

Uploaded by

18131A0259 MODUKURI SAI VENKATA SHRAVAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views10 pages

HTML

This document provides tips for enhancing HTML coding efficiency using Emmet, a shorthand tool. It includes various techniques such as skipping divs, creating multiple elements, nesting, and adding classes or IDs. The document aims to help users streamline their HTML workflow with practical examples and shortcuts.

Uploaded by

18131A0259 MODUKURI SAI VENKATA SHRAVAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML tips

HTML Emmet
Snippets

Page 1
HTML tips

Boost Your HTML Workflow with Emmet


Emmet is a powerful shorthand tool that speeds up HTML coding.
Simply type the snippet in your editor (VS Code, Sublime, etc.), hit
Tab or Enter, and it expands into full HTML code instantly.

1. Skip the Div


You don’t need to type "div" in Emmet! Just use . for a class
or # for an ID, and Emmet will assume it’s a div.

Page 2
HTML tips

2. Basic Multiplication
Create multiple elements at once

type this :

div * 4
get this :

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

Page 3
HTML tips

3. Nesting Elements (>)


Place an element inside another

type this :

p>span
get this :

<p>
<span></span>
</p>

Page 4
HTML tips

4. Siblings (+)
Place elements next to each other

type this :

div+section+footer
get this :

<div></div>
<section></section>
<footer></footer>

Page 5
HTML tips

5. Grouping (())
Structure complex layouts easily

type this :

(header>ul>li*2)+main
get this :
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<main></main>
Page 6
HTML tips

6. Adding Classes & IDs


Quickly add classes and IDs to elements

type this :

.container
get this :
<div class="container"></div>

type this :

#main
get this :
<div id="main"></div>

Page 7
HTML tips

7. Adding Text ({})


Insert text content directly inside elements

type this :

p{Hello, World!}
get this :

<p>Hello, World!</p>

Page 8
HTML tips

8. Numbering ($)
Automatically number elements in a sequence

type this :

ul>li.item-$*3
get this :

<ul>
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
</ul>
Page 9
HTML tips

Hopefully You Found It


Usefull!
Be sure to save this post so you
can come back to it later

like Comment Share

Page 10

You might also like