HTML CSS JS

AMP HTML Cheat Sheet AMP HTML Cheat Sheet

Hello World 👶

Minimalist template.
<!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>
Simple AMP Template

Important ‼

Helperke

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

We show ads to support this free website.

Useful Links 🔗

A list of free useful resources.
Quick overview Validator Structured data testing tool Project Home Page Simple template AMP for WordPress plugin Examples Templates

Images 🖼

Helperke

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 📼

Add motion picture to pages.

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 🤹

Install event handlers on elements

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

We show ads to support this free website.

Google Analytics 📈

Helperke

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 💰

Set up AdSense auto ads

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 ☰

Hamburger menu

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://html6.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 👍

Set up a Facebook like button

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

We show ads to support this free website.

Facebook comments💬

Comments widget.

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🖼

Embed external pages

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 📡

Helperke

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🗺

Click to reveal more details.

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🎠

Image sliders.

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
CSS
Apply CSS
Preview

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!

amp html cheat sheet

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
➤