Tutorial

AMP HTML, an Overview

Published on June 29, 2016

Alligator.io

AMP stands for Accelerated Mobile Pages and is an open source initiative put forth by Google to create a unified way to make sites load faster on mobile devices by an order of magnitude. AMP should prove to be a great way to make the web better on mobile, especially for those on slow connections.

AMP restricts certain parts of HTML, CSS and JavaScript to ensure a fast experience. To make up for the extra restrictions, it also comes with components to let you do things like embed videos, integrate carousels and a bunch of other neat things. AMP will be used by outlets such as Twitter, Pinterest and Google to link to a super fast version of a page on mobile. Try out a demo of AMP pages in Google here.

Getting Started

Start your AMP HTML pages like the following:

<!doctype html>
<html ⚡>

<head>
  <meta charset="utf-8">
  <link rel="canonical"
    href="https://path/to/regular/page"&#x3E;
  <meta name="viewport"
    content="width=device-width,
      minimum-scale=1,initial-scale=1">
  <style amp-boilerplate></style>

A few things to keep in mind:

Notice the use of ⚡ with the opening html tag to indicate that this is an AMP HTML page.
Also notice the use of the canonical tag to indicate the location of the regular non-AMP page.
Don’t forget the meta charset right after the opening head tag.
Load the AMP JS runtime right before the closing head tag. Notice the use of async, which is very important here. All scripts need to load asynchronously in order for the page to validate as AMP HTML.
The boilerplate style wasn’t included in the snippet above for brevity, but here’s the full code for it:

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

With this inline CSS boilerplate, the content will be hidden at first, then displayed when the assets are loaded. This way, you’ll prevent a flash of unstyled content (FOUC) that happens when loading fonts asynchronously.

Content & Components

After the head section, your AMP HTML pages will mostly be just plain old html, with a few key exceptions. For example, img tags aren’t supported and amp-img should be used instead:

<amp-img src="../alligator.svg"
  width="400"
  height="150"
  layout="responsive"
  alt="Dead Gator">
</amp-img>

For amp-img, you define both the width and height. Browsers will be smart enough to downsize proportionally if needed.

Here’s a list of a few more components that are available with AMP HTML: amp-accordion, amp-instagram, amp-sidebar, amp-youtube, amp-audio…

For most of these additional components, you’ll need to load an extra JavaScript file in the head section. For example, for the amp-instagram component:

<script async
  custom-element="amp-instagram"
  src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">

Testing, Debugging & Publishing

In order for your AMP HTML pages to be served, they first need to be valid. Simply add #development=1 at the end of an AMP page and the JavaScript console will be in debug mode and let you know if anything is wrong.

The next step is to make sure that you include a rel tag on your original page that points to the AMP version like this:

<link rel=”amphtml”
  href=”https://alligator.io/some-post.amp.html" />

Learn More + Resources

Here are some good resources to learn more about AMP HTML and to get involved:

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors

Alligator.io

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.