 |
| IMPORTANT AMP HTML Cheat Sheet |
IMPORTANT AMP HTML Cheat Sheet
Hello World 👶
<!doctype html>
<html amp lang="en">
<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:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
p {
margin: 1em;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Images
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
fixed-height – keeps the specified height unchanged
fill – fills available height & width
container – lets its children define its size, like a normal div
flex-item – 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
Google Analytics 📈
Include
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Replace UA-XXXXXXXX-1 with your code
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
AdSense 💰
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 ☰
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;}
amp-sidebar
<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 comments💬
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>
Social share buttons 📡
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>
Carousel🎠
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>
Important ‼
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 amp-custom> </style>
Common attributes
fallback, heights, layout, media, noloading, on, placeholder, sizes, width and height
Video 📼
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, rotate-to-fullscreen
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
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 amp-image-lightbox with the source image being the one that triggered the action
close – closes the lightbox
change – on input & select
input-debounced – 300ms passed since an input value change
input-throttled – change event fired maximum once every 100ms
tap – click or tap
slideChange – amp-carousel[type="slides"]
toggleAutoplay – amp-carousel[type="slides"]
goToSlide(index=INTEGER) – advance the carousel to the index
lightboxOpen – amp-lightbox fully visible
lightboxClose – amp-lightbox fully closed
sidebarOpen – amp-sidebar fully open
sidebarClose – amp-sidebar 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
submit-error – form submission response is an error
play, pause – controls amp-audio
refresh – refreshes data from the src and re-renders the amp-list
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
<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'})">
amp-state
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>
Facebook like 👍
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>
iFrame
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>
Accordion menu
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>
Tags
Tutorial