AMP HTML Cheat Sheet

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>

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

Important ‼

Define AMP page location on Desktop site

Link back to Desktop from AMP

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

Sidebar ☰

Include

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

<a href="/" class="site-name">MySite</a>

</header>

<amp-sidebar id="sidebar1" layout="nodisplay" side="left">

<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>

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

iFrame🖼

Include

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 📡

Include

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🗺

Include

Example

<amp-accordion>

<h4>Title 1</h4>

</section>

<h4>Title 2</h4>

<div>Add any <strong>HTML</strong> content.</div>

</section>

<h4>Title 3</h4>

<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🎠

Include

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>

Video 📼

Include

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" />

<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

<amp-youtube

data-videoid="VeeFwwAz7no"

layout="responsive"

width="480" height="270"></amp-youtube>

Google Analytics 📈

Include

Replace UA-XXXXXXXX-1 with your code

<amp-analytics type="googleanalytics">

{

"vars": {

"account": "UA-XXXXXXXX-1"

"triggers": {

"trackPageview": {

"on": "visible",

"request": "pageview"

}

Facebook comments💬

Include

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>

Facebook like 👍

Include

Code

<amp-facebook-like width=90 height=20

layout="fixed"

data-layout="button_count"

data-href="https://www.facebook.com/htmlcoding/">

</amp-facebook-like>

AdSense 💰

Include

After the opening body tag, add your ID.

<amp-auto-ads type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"></amp-auto-ads>

Useful Links 🔗

Source:

https://htmlcheatsheet.com/amp/

AEM Tutorials for Beginners

December 23, 2022
Estimated Post Reading Time ~