AMP HTML, an Overview

Published on June 29, 2016


    AMP HTML, an Overview

    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.

    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 >
      <meta charset="utf-8">
      <link rel="canonical"
      <meta name="viewport"
      <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"
      alt="Dead Gator">

    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

    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 us

    About the authors
    Default avatar


    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
    Leave a comment

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Featured on Community

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel