AMP HTML Cheat Sheet
Hello World 👶
<!doctype html>
Important ‼ <html amp lang="en">
<head>
<meta charset="utf-8">
Define AMP page location on Desktop site <script async src="https://cdn.ampproject.org/
<link rel="amphtml" <title>Hello World!</title>
href="https://htmlcheatsheet.com/m/"> <link rel="canonical" href="https://htmlcheats
<meta name="viewport" content="width=device-wi
Link back to Desktop from AMP <script type="application/ld+json">
<link rel="canonical" {
href="https://htmlcheatsheet.com/"> "@context": "http://schema.org",
"@type": "NewsArticle",
Image tag "headline": "Hello World",
<amp-img src="/m/cheatsheet.jpg" alt="Cheat "datePublished": "2018-08-08T12:02:41Z",
Sheet" layout="responsive" height="200" "image": [
width="300"></amp-img> "logo.jpg"
]
Keep in mind! }
</script>
Don't use !important CSS
<style amp-boilerplate>body{-webkit-animation
https:// highly recommended
<style amp-custom>
No custom .JS files
Only 50Kb inline style allowed in <style amp- p {
custom> </style> margin: 1em;
}
Common attributes </style>
</head>
fallback, heights, layout, media, noloading, on, placeholder,
sizes, width and height <body>
<h1>Hello World</h1>
Useful Links 🔗
</body>
</html>
Simple AMP Template
Quick overview Validator
Structured data testing tool
Project Home Page Simple template Images 🖼
AMP for WordPress plugin Examples
Templates Basic syntax
<amp-img src="/m/cheatsheet.jpg" alt="Cheat
Sheet" height="200" width="300"></amp-img>
Video 📼 Responsiveness
<amp-img
Include src="/narrow.jpg"
srcset="/wide.jpg 640w,
<script async custom-element="amp-video" /narrow.jpg 320w"
src="https://cdn.ampproject.org/v0/amp-video- width="1200"
0.1.js"></script> height="800"
layout="responsive"
Example
alt="demo image">
<amp-video controls </amp-img>
width="600"
height="400" Layout types
layout="responsive"
poster="geekprank.png"> nodisplay – works like display: none style.
<source src="geekprank.webm" fixed – fixed width & height
type="video/webm" /> responsive – fills container automatically to aspec
<source src="geekprank.mp4" ratio
type="video/mp4" /> fixed-height – keeps the specified height unchang
<div fallback> fill – fills available height & width
<p>Video element not supported.</p> container – lets its children define its size, like a
</div> normal div
</amp-video> flex-item – works like display:flex style
intrinsic – responsive until it reaches its height and
Attributes width
src, poster, autoplay, controls, controlsList, loop, crossorigin, CSS media queries
disableremoteplayback, noaudio, rotate-to-fullscreen
@media screen and (max-width: 720px) {
artwork, artist, album, title p { font-size: 0.9em; }
}
Youtube Video
Element media queries:
<script async custom-element="amp-youtube"
<amp-img
src="https://cdn.ampproject.org/v0/amp-youtube-
media="(min-width: 720px)"
0.1.js"></script>
src="demo.jpg"
<amp-youtube width=300
data-videoid="VeeFwwAz7no" height=200
layout="responsive" layout="responsive">
width="480" height="270"></amp-youtube> </amp-img>
Actions, events 🤹
Placeholder
Shows a placeholder while the element is being loaded:
Syntax <amp-anim src="animation.gif"
layout="responsive"
eventName:targetId[.methodName[(arg1=value, width="300"
arg2=value)]] height="200">
<amp-img placeholder
Example
src="demo.jpg"
on="submit-success:lightbox1;submit- layout="fill">
error:lightbox2" </amp-img>
<div id="cookie-consent">The site is using </amp-anim>
Cookies!</div>
Fallback
<button on="tap:cookie-consent.hide">OK, I
understand!</button> When an element is not supported:
Events <amp-img alt="Demo"
width="300"
show, hide – shows/hides the target element height="200"
toggleVisibility, toggleClass layout="responsive"
scrollTo(duration=INTEGER, position=STRING) – src="videofile.webp">
focus – make the target element gain focus <amp-img alt="Demo"
open – opens the amp-image-lightbox with the fallback
source image being the one that triggered the action width="300"
close – closes the lightbox height="200"
change – on input & select layout="responsive"
input-debounced – 300ms passed since an input src="image.jpg"></amp-img>
value change </amp-img>
input-throttled – change event fired maximum once
every 100ms Hide loading indicator
tap – click or tap Google Analytics 📈
noloading
slideChange – amp-carousel[type="slides"]
toggleAutoplay – amp-carousel[type="slides"]
goToSlide(index=INTEGER) – advance the Include
carousel to the index <script async custom-element="amp-analytics"
lightboxOpen – amp-lightbox fully visible src="https://cdn.ampproject.org/v0/amp-
lightboxClose – amp-lightbox fully closed analytics-0.1.js"></script>
sidebarOpen – amp-sidebar fully open
sidebarClose – amp-sidebar fully closed Replace UA-XXXXXXXX-1 with your code
play, pause, mute, unmute, fullscreen – video <amp-analytics type="googleanalytics">
controls <script type="application/json">
firstPlay – first user interaction with video {
timeUpdate – video playing position changed "vars": {
submit – form is submitted "account": "UA-XXXXXXXX-1"
clear – clears values in the inputs },
submit-error – form submission response is an error "triggers": {
play, pause – controls amp-audio "trackPageview": {
refresh – refreshes data from the src and re-renders "on": "visible",
the amp-list "request": "pageview"
selectUp(delta=INTEGER), selectDown(delta) – }
moves the amp-selector up/down by a value }
open, close, toggle – amp-sidebar controls }
navigateTo(url)
goBack – go back in history
print – Opens the Print Dialog
amp-bind
AdSense 💰
<script async custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind- Include
0.1.js"></script>
Button changes 'World' to 'John': <script async custom-element="amp-auto-ads"
<p [text]="'Hello ' + str">Hello World</p> src="https://cdn.ampproject.org/v0/amp-auto-ad
<button on="tap:AMP.setState({str: 'John'})"> 0.1.js"></script>
amp-state After the opening body tag, add your ID.
Initialize state: <amp-auto-ads type="adsense" data-ad-client="c
<amp-state id="thisState"> pub-XXXXXXXXXXXXXXXX"></amp-auto-ads>
<script type="application/json">
{
"foo": "bar"
Sidebar ☰
}
</script> Include
</amp-state> <script async custom-element="amp-sidebar"
thisState.foo == "bar" src="https://cdn.ampproject.org/v0/amp-sidebar
0.1.js"></script>
Update state with AMP.setState()
<button on="tap:AMP.setState({foo: 'bar', baz: Custom CSS:
myAmpState.someVariable})"></button> .sidebar {padding: 10px;margin: 0;color:
<input type="range" #FFF;font-weight:bold;}
on="change:AMP.setState({myRangeValue: #sidebar1{background: #CE5937;}
event.value})"> .sidebar > li {list-style: none;margin-
bottom:10px;}
AMP.pushState .sidebar a {text-decoration: none;color: #FFF
<button on="tap:AMP.pushState({foo: '123'})">Set .close-sidebar {font-size: 1.5em;padding: 5px
Facebook like 👍
'foo' to 123</button> 15px;cursor: pointer;color: #FFFFFF;}
.headerbar {background: #CE5937;color:
#FFF;line-height: 30px;position: fixed;top:
Include 0;left: 0;right: 0;height: 40px;z-index: 1000
.headerbar a {text-decoration: none;color:
<script async custom-element="amp-facebook-like"
#FFF;}
src="https://cdn.ampproject.org/v0/amp-facebook-
like-0.1.js"></script> amp-sidebar
Code <header class="headerbar">
<div role="button" on="tap:sidebar1.toggle
<amp-facebook-like width=90 height=20
tabindex="0" class="hamburger">☰</div>
layout="fixed"
<a href="/" class="site-name">MySite</a>
data-layout="button_count"
</header>
data-
<amp-sidebar id="sidebar1" layout="nodisplay"
href="https://www.facebook.com/htmlcoding/">
side="left">
</amp-facebook-like>
<div role="button" aria-label="close sideba
on="tap:sidebar1.toggle" tabindex="0"
Facebook comments 💬 class="close-sidebar">✕</div>
<ul class="sidebar">
<li><a
Include
href="https://htmlg.com/">Editor</a></li>
<li><a href="https://html5-
<script async custom-element="amp-facebook- templates.com/">Templates</a></li>
comments" <li><a
src="https://cdn.ampproject.org/v0/amp-facebook- href="https://htmlcheatsheet.com/">Cheat
comments-0.1.js"></script> Sheet</a></li>
</ul>
Code </amp-sidebar>
<amp-facebook-comments width="300" iFrame 🖼
height="350"
layout="responsive"
data-numposts="5" Include
data-colorscheme="dark" <script async custom-element="amp-iframe"
data-locale="es_ES" src="https://cdn.ampproject.org/v0/amp-iframe
data-order-by="time" 0.1.js"></script>
data-href="https://htmlcheatsheet.com/">
</amp-facebook-comments> Use it for Google Maps or anything else
<amp-iframe width="400"
title="Collection of HTML codes"
Social share buttons 📡 height="300"
layout="responsive"
sandbox="allow-scripts allow-same-origin
Include
allow-popups"
<script async custom-element="amp-social-share" allowfullscreen
src="https://cdn.ampproject.org/v0/amp-social- frameborder="0"
share-0.1.js"></script> src="https://htmlcheatsheet.com/">
<amp-img layout="fill"
Code src="/placeholder.jpg"
<amp-social-share type="facebook" width="30" placeholder></amp-img>
height="30" </amp-iframe>
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com">
</amp-social-share>
<amp-social-share type="twitter" width="30" Accordion menu 🗺
height="30"
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com"> Include
</amp-social-share> <script async custom-element="amp-accordion"
<amp-social-share type="gplus" width="30" src="https://cdn.ampproject.org/v0/amp-
height="30" accordion-0.1.js"></script>
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com"> Example
</amp-social-share> <amp-accordion>
Carousel 🎠 <section expanded>
<h4>Title 1</h4>
<p>Add any text.</p>
Include
</section>
<script async custom-element="amp-carousel" <section>
src="https://cdn.ampproject.org/v0/amp-carousel- <h4>Title 2</h4>
0.1.js"></script> <div>Add any <strong>HTML</strong>
content.</div>
Code </section>
<amp-carousel width="300" <section>
height="200" <h4>Title 3</h4>
layout="responsive" <figure>
type="slides"> <amp-img src="/demo.jpg"
<amp-img src="/img1.jpg" width="400"
width="300" height="200"
height="200" layout="responsive"
layout="responsive" alt="description"></amp-img>
alt="a demo image"></amp-img> <figcaption>This is an
<amp-img src="/img2.jpg" image</figcaption>
width="300" </figure>
height="200" </section>
layout="responsive" </amp-accordion>
alt="another cool image"></amp-img>
<amp-img src="/img3.jpg"
width="300"
height="200"
layout="responsive"
alt="and the last one"></amp-img>
</amp-carousel>
HTML Cheat Sheet is using cookies to collect anonymous visitor statistics and to show better ads. | Terms and Conditions, Privacy Policy
© HTMLCheatSheet.com
