29 / Jul / 2016 by Sunniya Maini 0 comments

Now-a-days, if anyone browse a website on mobile, everyone expect rich and HD graphics, smooth scrolling, fast animations, transitions to load quickly. Google introduces a new technique known as AMP. It’s a technique to build static content web pages that render fast. Its basic structure consists of three different layers:

  1. AMP HTML: HTML extended with custom AMP properties but with some restrictions for fast and reliable performance
  2. AMP JS Library: ensures the fast rendering of AMP HTML pages
  3. Google AMP Cache: used to serve cached Amp HTML pages

So AMP Project = AMP-HTML + AMP JS Library + Custom Styling + AMP Cache

Goals of AMP Project

  • Make pages fast
  • Easy to implement
  • Enable monetization
  • Embrace open web

Create first AMP Page:

Basic structure for AMP Page is below:

<!doctype html>
<html amp lang="en">


Code inside head tag:

<meta charset="utf-8">
<title>First AMP Page</title>
<link rel="canonical" href="" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

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

<style amp-custom>
  amp-img.grey-placeholder {
   background-color: grey;

<script async src=""></script>

Code inside body tag:

   <h1>This is my First AMP Page</h1>

<!doctype html> is required at the top.
<html amp> to tell browser that we are using amp.
<link rel=”canonical” href=”_canonical-url_” /> it points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
<script async src=”amp-js-library”></script> it includes AMP JS library.

Some extended HTML tags:

  • amp-img: replacement of HTML img tag
  • amp-ad: container to display ad and a script is required
  • amp-pixel: used to count the page views by typical tracking pixel
  • amp-embed: used to embed elements
  • amp-video: replacement of HTML5 video tag

Styling/ Presentation

Styling is done by using common CSS, by using starting tag <style amp-custom>:

<style amp-custom>
  body {
    background: white;
  amp-img {
    border: 1px solid black;

Make sure there should be only one amp-custom style tag for styling. And even AMP page can have a single embedded stylesheet.

Validate AMP Page:

AMP is providing a validator built in browser only. No need to validate your code from other online validators. Just open your document in any browser through local server: XAMP/WAMP.
Add #development=1 after the url in address bar.
e.g http://localhost:8000/first-amp-page.html#development=1
Open Dev tool console in chrome browser and check validation errors.

Congrats you have created first AMP Page and tested locally.

You can explore more about this.


Leave a comment -