AMP HTML source code, samples, and documentation. See below for more info.
JavaScript HTML Other
Pull request Compare This branch is 2484 commits behind ampproject:master.
Latest commit 1f21b76 Mar 2, 2016 @dvoytenko dvoytenko Merge pull request #2359 from burtcorp/request-count-doc-fix
Request count starts at one, not zero
Permalink
Failed to load latest commit information.
3p Implement Teads on Google AMP Ads network Feb 29, 2016
ads Merge pull request #2338 from adform/master Mar 1, 2016
build-system Turn on unique origins for dev channel by default. Feb 29, 2016
builtins Implement Teads on Google AMP Ads network Feb 29, 2016
css Disallow height customization for root/body Feb 22, 2016
docs Update include_features.md Feb 23, 2016
examples Merge pull request #2322 from loic-seguin/master Feb 29, 2016
extensions Request count starts at one, not zero Mar 1, 2016
screenshots/test/manual Updated screenshots Jan 27, 2016
spec Update amp-html-format.md Feb 24, 2016
src Merge pull request #2318 from dvoytenko/fixes55 Feb 29, 2016
test Merge pull request #2318 from dvoytenko/fixes55 Feb 29, 2016
testing Update screenshot-tests.md Feb 23, 2016
third_party Experimental: Switch production code gen to use closure compiler. Jan 17, 2016
tools Turn on unique origins for dev channel by default. Feb 29, 2016
validator Add validator-generated.js for ValidationError.Code. Feb 20, 2016
.babelrc Inline env variables Feb 18, 2016
.eslintrc Enforce Dangling Commas Feb 26, 2016
.gitignore Add amp-facebook element for Facebook posts and videos. Jan 20, 2016
.travis.yml Experimental unique 3p iframe origin. Feb 26, 2016
AUTHORS Initial commit Sep 2, 2015
CODE_OF_CONDUCT.md Establish a code of conduct for the AMP open source project. Oct 15, 2015
CONTRIBUTING.md Adding governance model, contributing docs enhancements Oct 30, 2015
CONTRIBUTORS add amp-vine element Dec 1, 2015
DEVELOPING.md Document --fortesting Feb 29, 2016
GOVERNANCE.md Adding governance model, contributing docs enhancements Oct 30, 2015
LICENSE fix(license): fix incorrect search and replace done on LICENSE file Sep 10, 2015
README.md Mention announcements mailing list. Feb 29, 2016
TICKEVENTS.md Tick the window.onload event. Jan 23, 2016
gulpfile.js Fix crucial typo. Feb 26, 2016
karma.conf.js Set Karma Log Level to WARN Feb 10, 2016
package.json Create 2 new endpoints on the dev server for serving prod docs with l… Feb 22, 2016

README.md

Build Status Issue Stats Issue Stats

AMP HTML ⚡

AMP HTML is a way to build web pages for static content that render with reliable, fast performance. It is our attempt at fixing what many perceive as painfully slow page load times – especially when reading content on the mobile web.

AMP HTML is entirely built on existing web technologies. It achieves reliable performance by restricting some parts of HTML, CSS and JavaScript. These restrictions are enforced with a validator that ships with AMP HTML. To make up for those limitations AMP HTML defines a set of custom elements for rich content beyond basic HTML. Learn more about how AMP speeds up performance.

How does AMP HTML work?

AMP HTML works by including the AMP JS library and adding a bit of boilerplate to a web page, so that it meets the AMP HTML Specification. The simplest AMP HTML file looks like this:

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-world.html" >
    <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><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>Hello World!</body>
</html>

This allows the AMP library to include:

  • The AMP JS library, that manages the loading of external resources to ensure a fast rendering of the page.
  • An AMP validator that provides a way for web developers to easily validate that their code meets the AMP HTML specification.
  • Some custom elements, called AMP HTML components, which make common patterns easy to implement in a performant way.

Get started creating your first AMP page.

The AMP JS library

The AMP JS library provides builtin AMP Components, manages the loading of external resources, and ensures a reliably fast time-to-paint.

The AMP Validator

The AMP Validator allows a web developer to easily identify if the web page doesn't meet the AMP HTML specification.

Adding "#development=1" to the URL of the page instructs the AMP Runtime to run a series of assertions confirming the page's markup meets the AMP HTML Specification. Validation errors are logged to the browser's console when the page is rendered, allowing web developers to easily see how complex changes in web code might impact performance and user experience.

It also allows apps that integrate web content to validate the web page against the specification. This allows an app to make sure the page is fast and mobile-friendly, as pages adhering to the AMP HTML specification are reliably fast.

Learn more about validating your AMP pages.

AMP HTML Components

AMP HTML Components are a series of extended custom elements that supplement or replace functionality of core HTML5 elements to allow the runtime to ensure it is solely responsible for loading external assets and to provide for shared best practices in implementation.

These components can:

  • Replace HTML5 elements that are not directly permitted in the specification such as amp-img and amp-video.
  • Implement embedded third-party content, such as amp-ad, amp-pinterest, amp-twitter, and amp-youtube.
  • Provide for common patterns in web pages, such as amp-lightbox and amp-carousel.
  • Make advanced performance techniques easy, such as amp-anim, which allows web developers to dynamically serve animated images as either image files (GIF) or video files (WebM or MP4) based on browser compatibility.

AMP Dev Channel

AMP Dev Channel is a way to opt a browser into using a newer version of the AMP JS libraries.

This release may be less stable and it may contain features not available to all users. Opt into this option if you'd like to help test new versions of AMP, report bugs or build documents that require a new feature that is not yet available to everyone.

Opting into Dev Channel is great to:

  • test and play with new features not yet available to all users.
  • use in Q&A to ensure that your site is compatible with the next version of AMP.

If you find an issue that appears to only occur in the Dev Channel version of AMP, please file an issue with a description of the problem. Please always include a URL to a page that reproduces the issue.

To opt your browser into the AMP Dev Channel, go to the AMP experiments page and activate the "AMP Dev Channel" experiment. Please subscribe to our low-volume announcements mailing list to get notified about important/breaking changes about AMP.

Further Reading

If you are creating AMP pages, check out the docs on ampproject.org.

These docs are public and open-source: https://github.com/ampproject/docs/. See something that's missing from the docs, or that could be worded better? Create an issue and we will do our best to respond quickly.

Resources:

Reference:

Technical Specifications:

Who makes AMP HTML?

AMP HTML is made by the AMP Project, and is licensed under the Apache License, Version 2.0.

Contributing

Please see the CONTRIBUTING file for information on contributing to the AMP Project, and the DEVELOPING file for documentation on the AMP library internals and hints how to get started.

Security disclosures

The AMP Project accepts responsible security disclosures through the Google Application Security program.

Code of conduct