Scribd
Upload
40 views

Htmlcheatsheet Com Amp

The document provides information about HTML, CSS, JavaScript, and AMP (Accelerated Mobile Pages) including cheat sheets, tags, generators, templates, and links. It includes examples of AMP code for basic pages, images, videos, forms, analytics, and ads. It also summarizes key attributes and events for various AMP components.

Uploaded by

yusufmbube
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
40 views

Htmlcheatsheet Com Amp

The document provides information about HTML, CSS, JavaScript, and AMP (Accelerated Mobile Pages) including cheat sheets, tags, generators, templates, and links. It includes examples of AMP code for basic pages, images, videos, forms, analytics, and ads. It also summarizes key attributes and events for various AMP components.

Uploaded by

yusufmbube
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

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 amp­custom> </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
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
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, 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 ᾓ ? ↖ 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 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>
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 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 Ὃ ? ↖ 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;}

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 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 mobile­friendly 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

You might also like