IMPORTANT AMP HTML Cheat Sheet
Hello World 👶
Hello World
Images
Basic syntax
Responsiveness
src="/narrow.jpg"
srcset="/wide.jpg 640w,
/narrow.jpg 320w"
width="1200"
height="800"
layout="responsive"
alt="demo image">
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:
media="(min-width: 720px)"
src="demo.jpg"
width=300
height=200
layout="responsive">
Placeholder
Shows a placeholder while the element is being loaded:
layout="responsive"
width="300"
height="200">
src="demo.jpg"
layout="fill">
Fallback
When an element is not supported:
width="300"
height="200"
layout="responsive"
src="videofile.webp">
fallback
width="300"
height="200"
layout="responsive"
src="image.jpg">
Hide loading indicator
noloading
Google Analytics 📈
Include
Replace UA-XXXXXXXX-1 with your code
After the opening body tag, add your ID.
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
☰
MySite
Facebook comments💬
Include
Code
height="350"
layout="responsive"
data-numposts="5"
data-colorscheme="dark"
data-locale="es_ES"
data-order-by="time"
data-href="https://htmlcheatsheet.com/">
Social share buttons 📡
Include
Code
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com">
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com">
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com">
Carousel🎠
Include
Code
height="200"
layout="responsive"
type="slides">
width="300"
height="200"
layout="responsive"
alt="a demo image">
width="300"
height="200"
layout="responsive"
alt="another cool image">
width="300"
height="200"
layout="responsive"
alt="and the last one">
Important ‼
Define AMP page location on Desktop site
Link back to Desktop from AMP
Image tag
Keep in mind!
Don't use !important CSS
https:// highly recommended
No custom .JS files
Only 50Kb inline style allowed in
Common attributes
fallback, heights, layout, media, noloading, on, placeholder, sizes, width and height
Video 📼
Include
Example
width="600"
height="400"
layout="responsive"
poster="geekprank.png">
type="video/webm" />
type="video/mp4" />
Video element not supported.
Attributes
src, poster, autoplay, controls, controlsList, loop, crossorigin, disableremoteplayback, noaudio, rotate-to-fullscreen
artwork, artist, album, title
Youtube Video
data-videoid="VeeFwwAz7no"
layout="responsive"
width="480" height="270">
Actions, events
Syntax
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Example
on="submit-success:lightbox1;submit-error:lightbox2"
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
Button changes 'World' to 'John':
Hello World
amp-state
Initialize state:
{
"foo": "bar"
}
thisState.foo == "bar"
Update state with AMP.setState()
AMP.pushState
Facebook like 👍
Include
Code
layout="fixed"
data-layout="button_count"
data-href="https://www.facebook.com/htmlcoding/">
iFrame
Include
Use it for Google Maps or anything else
title="Collection of HTML codes"
height="300"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen
frameborder="0"
src="https://htmlcheatsheet.com/">
src="/placeholder.jpg"
placeholder>
Accordion menu
Include
Example
Title 1
Add any text.
Title 2
Add any HTML content.
Title 3
width="400"
height="200"
layout="responsive"
alt="description">
This post first appeared on Kursus Komputer Karawang - Cikampek, please read the originial post: here
