Scribd
Upload
226 views2 pages

HTML Emmet CheatSheet

The document is an HTML Emmet Cheat Sheet that provides shortcuts for generating HTML structures and elements quickly. It includes basic boilerplate code, layout structures, content blocks, forms, and examples of repeating items. A full page combo example is also provided to illustrate how to create a complete blog-like layout using Emmet syntax.

Uploaded by

adityaahlawat544
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
226 views2 pages

HTML Emmet CheatSheet

The document is an HTML Emmet Cheat Sheet that provides shortcuts for generating HTML structures and elements quickly. It includes basic boilerplate code, layout structures, content blocks, forms, and examples of repeating items. A full page combo example is also provided to illustrate how to create a complete blog-like layout using Emmet syntax.

Uploaded by

adityaahlawat544
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

HTML Emmet Cheat Sheet

Basic Boilerplate
! => Full HTML5 document structure
html:5 => Full HTML5 document structure
title{My Page} => <title>My Page</title>
meta:vp => Responsive viewport meta tag

Layout Structure
header => <header></header>
main => <main></main>
section => <section></section>
footer => <footer></footer>
nav>ul>li*3>a{Link $} => Navigation with 3 links
.container => <div class="container"></div>
#wrapper => <div id="wrapper"></div>

Content Blocks
h1{Welcome} => <h1>Welcome</h1>
p{Hello World} => <p>Hello World</p>
img => <img src="" alt="">
a:link => <a href="http://"></a>
figure>img+figcaption{Caption} => Media with caption

Forms
form:post => <form method="post"></form>
label+input => Label and input field
input:text => Text input
input:checkbox => Checkbox
button:submit => Submit button

Repeating Items
ul>li.item$*4 => <li class="item1"> to item4
div.card*3>h2{Card $}+p{Some text} => Repeated card layout
Full Page Combo Example
html:5>body>header>h1{My Blog}+nav>ul>li*3>a{Link $}+main>section>article*2>h2{Post
$}+p{Content here...}+footer>p{Copyright} => Generates a blog-like full page layout

You might also like