H TM L C S S J S
Editor Tags Cheat Sheet Characters Generators Templates Blog Links
AMP HTML Cheat Sheet HTML
CS S
JS
jQ
Hello World ? ↖ x
➤ ⚡ AMP
<!doctype html>
<html amp lang="en">
SEO
<head>
<meta charset="utf‐8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello World!</title>
<link rel="canonical" href="https://htmlcheatsheet.com">
<meta name="viewport" content="width=device‐width,minimum‐scale=1,initial‐scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Hello World",
"datePublished": "2018‐08‐08T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp‐boilerplate>body{‐webkit‐animation:‐amp‐start 8s steps(1,end) 0s 1 normal both;‐moz‐animation:
<style amp‐custom>
p {
margin: 1em;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Simple AMP Template
Important ‼ ? ↖ x
Define AMP page location on Desktop site
<link rel="amphtml" href="https://htmlcheatsheet.com/m/">
Link back to Desktop from AMP
<link rel="canonical" href="https://htmlcheatsheet.com/">
Image tag
<amp‐img src="/m/cheatsheet.jpg" alt="Cheat Sheet" layout="responsive" height="200"
width="300"></amp‐img>
Keep in mind!
Don't use !important CSS
https:// highly recommended
No custom .JS files
Only 50Kb inline style allowed in <style ampcustom> </style>
Common attributes
fallback, heights, layout, media, noloading, on, placeholder, sizes, width and height
Ads ? ↖ x
Useful Links ὑ ? ↖ x
Quick overview Validator Structured data testing tool
Project Home Page Simple template AMP for WordPress plugin
Examples Templates
Images Ὓ ? ↖ x
Basic syntax
<amp‐img src="/m/cheatsheet.jpg" alt="Cheat Sheet" height="200" width="300"></amp‐img>
Responsiveness
<amp‐img
src="/narrow.jpg"
srcset="/wide.jpg 640w,
/narrow.jpg 320w"
width="1200"
height="800"
layout="responsive"
alt="demo image">
</amp‐img>
Layout types
nodisplay – works like display: none style.
fixed – fixed width & height
responsive – fills container automatically to aspect ratio
fixedheight – keeps the specified height unchanged
fill – fills available height & width
container – lets its children define its size, like a normal div
flexitem – works like display:flex style
intrinsic – responsive until it reaches its height and width
CSS media queries
@media screen and (max‐width: 720px) {
p { font‐size: 0.9em; }
}
Element media queries:
<amp‐img
media="(min‐width: 720px)"
src="demo.jpg"
width=300
height=200
layout="responsive">
</amp‐img>
Placeholder
Shows a placeholder while the element is being loaded:
<amp‐anim src="animation.gif"
layout="responsive"
width="300"
height="200">
<amp‐img placeholder
src="demo.jpg"
layout="fill">
</amp‐img>
</amp‐anim>
Fallback
When an element is not supported:
<amp‐img alt="Demo"
width="300"
height="200"
layout="responsive"
src="videofile.webp">
<amp‐img alt="Demo"
fallback
width="300"
height="200"
layout="responsive"
src="image.jpg"></amp‐img>
</amp‐img>
Hide loading indicator
noloading
Video ? ↖ x
Include
<script async custom‐element="amp‐video" src="https://cdn.ampproject.org/v0/amp‐video‐0.1.js">
</script>
Example
<amp‐video controls
width="600"
height="400"
layout="responsive"
poster="geekprank.png">
<source src="geekprank.webm"
type="video/webm" />
<source src="geekprank.mp4"
type="video/mp4" />
<div fallback>
<p>Video element not supported.</p>
</div>
</amp‐video>
Attributes
src, poster, autoplay, controls, controlsList, loop, crossorigin, disableremoteplayback, noaudio, rotatetofullscreen
artwork, artist, album, title
Youtube Video
<script async custom‐element="amp‐youtube" src="https://cdn.ampproject.org/v0/amp‐youtube‐
0.1.js"></script>
<amp‐youtube
data‐videoid="VeeFwwAz7no"
layout="responsive"
width="480" height="270"></amp‐youtube>
Actions, events ᾓ ? ↖ x
Syntax
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Example
on="submit‐success:lightbox1;submit‐error:lightbox2"
<div id="cookie‐consent">The site is using Cookies!</div>
<button on="tap:cookie‐consent.hide">OK, I understand!</button>
Events
show, hide – shows/hides the target element
toggleVisibility, toggleClass
scrollTo(duration=INTEGER, position=STRING) –
focus – make the target element gain focus
open – opens the ampimagelightbox with the source image being the one that triggered the action
close – closes the lightbox
change – on input & select
inputdebounced – 300ms passed since an input value change
inputthrottled – change event fired maximum once every 100ms
tap – click or tap
slideChange – ampcarousel[type="slides"]
toggleAutoplay – ampcarousel[type="slides"]
goToSlide(index=INTEGER) – advance the carousel to the index
lightboxOpen – amplightbox fully visible
lightboxClose – amplightbox fully closed
sidebarOpen – ampsidebar fully open
sidebarClose – ampsidebar fully closed
play, pause, mute, unmute, fullscreen – video controls
firstPlay – first user interaction with video
timeUpdate – video playing position changed
submit – form is submitted
clear – clears values in the inputs
submiterror – form submission response is an error
play, pause – controls ampaudio
refresh – refreshes data from the src and rerenders the amplist
selectUp(delta=INTEGER), selectDown(delta) – moves the ampselector up/down by a value
open, close, toggle – ampsidebar controls
navigateTo(url)
goBack – go back in history
print – Opens the Print Dialog
ampbind
<script async custom‐element="amp‐bind" src="https://cdn.ampproject.org/v0/amp‐bind‐0.1.js">
</script>
Button changes 'World' to 'John':
<p [text]="'Hello ' + str">Hello World</p>
<button on="tap:AMP.setState({str: 'John'})">
ampstate
Initialize state:
<amp‐state id="thisState">
<script type="application/json">
{
"foo": "bar"
}
</script>
</amp‐state>
thisState.foo == "bar"
Update state with AMP.setState()
<button on="tap:AMP.setState({foo: 'bar', baz: myAmpState.someVariable})"></button>
<input type="range" on="change:AMP.setState({myRangeValue: event.value})">
AMP.pushState
<button on="tap:AMP.pushState({foo: '123'})">Set 'foo' to 123</button>
Ads ? ↖ x
Google Analytics Ὄ ? ↖ x
Include
<script async custom‐element="amp‐analytics" src="https://cdn.ampproject.org/v0/amp‐analytics‐
0.1.js"></script>
Replace UAXXXXXXXX1 with your code
<amp‐analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA‐XXXXXXXX‐1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
AdSense Ὃ ? ↖ x
Include
<script async custom‐element="amp‐auto‐ads" src="https://cdn.ampproject.org/v0/amp‐auto‐ads‐
0.1.js"></script>
After the opening body tag, add your ID.
<amp‐auto‐ads type="adsense" data‐ad‐client="ca‐pub‐XXXXXXXXXXXXXXXX"></amp‐auto‐ads>
Sidebar ☰ ? ↖ x
Include
<script async custom‐element="amp‐sidebar" src="https://cdn.ampproject.org/v0/amp‐sidebar‐
0.1.js"></script>
Custom CSS:
.sidebar {padding: 10px;margin: 0;color: #FFF;font‐weight:bold;}
#sidebar1{background: #CE5937;}
.sidebar > li {list‐style: none;margin‐bottom:10px;}
.sidebar a {text‐decoration: none;color: #FFF;}
.close‐sidebar {font‐size: 1.5em;padding: 5px 15px;cursor: pointer;color: #FFFFFF;}
.headerbar {background: #CE5937;color: #FFF;line‐height: 30px;position: fixed;top: 0;left:
0;right: 0;height: 40px;z‐index: 1000;}
.headerbar a {text‐decoration: none;color: #FFF;}
ampsidebar
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<a href="/" class="site‐name">MySite</a>
</header>
<amp‐sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria‐label="close sidebar" on="tap:sidebar1.toggle" tabindex="0"
class="close‐sidebar">✕</div>
<ul class="sidebar">
<li><a href="https://htmlg.com/">Editor</a></li>
<li><a href="https://html5‐templates.com/">Templates</a></li>
<li><a href="https://htmlcheatsheet.com/">Cheat Sheet</a></li>
</ul>
</amp‐sidebar>
Facebook like ὄ ? ↖ x
Include
<script async custom‐element="amp‐facebook‐like" src="https://cdn.ampproject.org/v0/amp‐
facebook‐like‐0.1.js"></script>
Code
<amp‐facebook‐like width=90 height=20
layout="fixed"
data‐layout="button_count"
data‐href="https://www.facebook.com/htmlcoding/">
</amp‐facebook‐like>
Ads ? ↖ x
Facebook comments Ὂ ? ↖ x
Include
<script async custom‐element="amp‐facebook‐comments" src="https://cdn.ampproject.org/v0/amp‐
facebook‐comments‐0.1.js"></script>
Code
<amp‐facebook‐comments width="300"
height="350"
layout="responsive"
data‐numposts="5"
data‐colorscheme="dark"
data‐locale="es_ES"
data‐order‐by="time"
data‐href="https://htmlcheatsheet.com/">
</amp‐facebook‐comments>
iFrame Ὓ ? ↖ x
Include
<script async custom‐element="amp‐iframe" src="https://cdn.ampproject.org/v0/amp‐iframe‐
0.1.js"></script>
Use it for Google Maps or anything else
<amp‐iframe width="400"
title="Collection of HTML codes"
height="300"
layout="responsive"
sandbox="allow‐scripts allow‐same‐origin allow‐popups"
allowfullscreen
frameborder="0"
src="https://htmlcheatsheet.com/">
<amp‐img layout="fill"
src="/placeholder.jpg"
placeholder></amp‐img>
</amp‐iframe>
Social share buttons ? ↖ x
Include
<script async custom‐element="amp‐social‐share" src="https://cdn.ampproject.org/v0/amp‐social‐
share‐0.1.js"></script>
Code
<amp‐social‐share type="facebook" width="30" height="30"
data‐param‐text="HTML Cheat Sheet"
data‐param‐url="https://htmlcheatsheet.com">
</amp‐social‐share>
<amp‐social‐share type="twitter" width="30" height="30"
data‐param‐text="HTML Cheat Sheet"
data‐param‐url="https://htmlcheatsheet.com">
</amp‐social‐share>
<amp‐social‐share type="gplus" width="30" height="30"
data‐param‐text="HTML Cheat Sheet"
data‐param‐url="https://htmlcheatsheet.com">
</amp‐social‐share>
Accordion menu Ὗ ? ↖ x
Include
<script async custom‐element="amp‐accordion" src="https://cdn.ampproject.org/v0/amp‐accordion‐
0.1.js"></script>
Example
<amp‐accordion>
<section expanded>
<h4>Title 1</h4>
<p>Add any text.</p>
</section>
<section>
<h4>Title 2</h4>
<div>Add any <strong>HTML</strong> content.</div>
</section>
<section>
<h4>Title 3</h4>
<figure>
<amp‐img src="/demo.jpg"
width="400"
height="200"
layout="responsive"
alt="description"></amp‐img>
<figcaption>This is an image</figcaption>
</figure>
</section>
</amp‐accordion>
Carousel Ἲ ? ↖ x
Include
<script async custom‐element="amp‐carousel" src="https://cdn.ampproject.org/v0/amp‐carousel‐
0.1.js"></script>
Code
<amp‐carousel width="300"
height="200"
layout="responsive"
type="slides">
<amp‐img src="/img1.jpg"
width="300"
height="200"
layout="responsive"
alt="a demo image"></amp‐img>
<amp‐img src="/img2.jpg"
width="300"
height="200"
layout="responsive"
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 Preview
1
p
Online AMP HTML Cheat Sheet
This online AMP cheat sheet will help you find the code snippets easily
and quickly while working on your next project. Even the HTML Cheat
Sheet has its own mobilefriendly version. Check it out here and see
how fast it loads!
I have already written a short article reviewing and discussing the benefits of
why you should implement this technology in your online projects.
Make sure you save this link to help your next project.
HTML Cheat Sheet is using cookies to collect anonymous visitor statistics and to show better ads. | PDF | Terms and
Conditions, Privacy Policy
© HTMLCheatSheet.com