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.
For more info on how AMP HTML works, and some insights into the design, please read our blog post "A new approach to web performance" (which may be the first AMP HTML file you ever see :). We also have a non-technical description of what we are doing on www.ampproject.org.
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,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</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.
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 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.
AMP HTML Components are a series of additional 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-youtube, amp-ad, and amp-twitter.
- 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.
Resources:
Tutorials:
Reference:
Technical Specifications:
Blog posts:
AMP HTML is made by the AMP Project, and is licensed under the Apache License, Version 2.0.
Please see the CONTRIBUTING file for information on contributing to the AMP Project, and the DEVELOPING file for documentation on the AMP library internals.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent