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

Scribd
Upload
34 views2 pages

Emmet HTML

The Emmet HTML Cheat Sheet provides a quick reference for basic HTML tags, ID and class usage, nesting of elements, sibling elements, multiplication of items, custom attributes, text content, and numbered items. It includes examples for each category, demonstrating how to efficiently write HTML using Emmet syntax. A full example of a login form is also provided to illustrate the practical application of these shortcuts.

Uploaded by

scot0718757621
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
34 views2 pages

Emmet HTML

The Emmet HTML Cheat Sheet provides a quick reference for basic HTML tags, ID and class usage, nesting of elements, sibling elements, multiplication of items, custom attributes, text content, and numbered items. It includes examples for each category, demonstrating how to efficiently write HTML using Emmet syntax. A full example of a login form is also provided to illustrate the practical application of these shortcuts.

Uploaded by

scot0718757621
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/ 2

Emmet HTML Cheat Sheet

Basic Tags

div -> <div></div>

span -> <span></span>

header -> <header></header>

ID and Class

#header -> <div id="header"></div>

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

div.red.big -> <div class="red big"></div>

Nesting (Child Elements)

nav>ul>li ->

<nav>

<ul>

<li></li>

</ul>

</nav>

Siblings

h1+p+bq ->

<h1></h1>

<p></p>

<blockquote></blockquote>

Multiplication

ul>li*3 ->

<ul>

<li></li>

<li></li>
Emmet HTML Cheat Sheet

<li></li>

</ul>

Custom Attributes

input[type="text"] -> <input type="text">

a[href="https://"] -> <a href="https://"></a>

Text Content

a{Click me} -> <a href="">Click me</a>

p{This is a paragraph} -> <p>This is a paragraph</p>

Numbered Items

ul>li.item$*3 ->

<ul>

<li class="item1"></li>

<li class="item2"></li>

<li class="item3"></li>

</ul>

Full Example - Login Form

form>input[type="text" placeholder="Username"]+

input[type="password" placeholder="Password"]+

button{Login} ->

<form>

<input type="text" placeholder="Username">

<input type="password" placeholder="Password">

<button>Login</button>

</form>

You might also like