Documentation

IMPORTANT

This is the outdated SI-documentation which will be adapted soon. A huge part may be obsolete!

Amp Specification

AMP HTML is a subset of HTML for authoring content pages such as news articles in a way that guarantees certain baseline performance characteristics. Being a subset of HTML, it puts some restrictions on the full set of tags and funtionality available through HTML.

AMP HTML uses a set of contributed but centrally managed and hosted custom elements to implement advanced functionality such as image galleries that might be found in an AMP HTML document. While it does allow styling the document using custom CSS, it does not allow author written JavaScript beyond what is provided through the custom elements to reach its performance goals.

Please read EasyBlog AMP Configuration on how to setup AMP for your site

The AMP HTML format

Sample document

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
    <link rel="canonical" href="/./regular-html-version.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
      h1 {color: red}
    </style>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
    <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>
    <h1>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

Required markup

AMP HTML documents MUST

start with the doctype <!doctype html>.
contain a top-level <html ⚡> tag (<html amp> is accepted as well).
contain <head> and <body> tags (They are optional in HTML).
contain a <link rel="canonical" href="/$SOME_URL"> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
contain a <meta charset="utf-8"> tag as the first child of their head tag.
contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It's also recommended to include initial-scale=1.
contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag inside their head tag.
contain the AMP boilerplate code (head > style[amp-boilerplate] and noscript > style[amp-boilerplate]) in their head tag.

HTML Tags

HTML tags can be used unchanged in AMP HTML. Certain tags have equivalent custom tags (such as <img> and <amp-img>) and other tags are outright prohibited:

Tag	Status in AMP HTML
script	Prohibited unless the type is `application/ld+json`. (Other non-executable values may be added as needed.) Exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components.
noscript	Allowed. Can be used anywhere in the document. If specified, the content inside the `<noscript>` element displays if JavaScript is disabled by the user.
base	Prohibited.
img	Replaced with `amp-img`. Please note: `<img>` is a Void Element according to HTML5, so it does not have an end tag. However, `<amp-img>` does have an end tag `</amp-img>`.
video	Replaced with `amp-video`.
audio	Replaced with `amp-audio`.
iframe	Replaced with `amp-iframe`.
frame	Prohibited.
frameset	Prohibited.
object	Prohibited.
param	Prohibited.
applet	Prohibited.
embed	Prohibited.
form	Allowed. Require including amp-form extension.
input elements	Mostly allowed with exception of some input types, namely, `<input[type=image]>`, `<input[type=button]>`, `<input[type=password]>`, `<input[type=file]>` are invalid. Related tags are also allowed: `<fieldset>`, `<label>`
button	Allowed.
`style`	Required style tag for amp-boilerplate. One additional style tag is allowed in head tag for the purpose of custom styling. This style tag must have the attribute `amp-custom`.
link	`rel` values registered on microformats.org are allowed. If a `rel` value is missing from our whitelist, please submit an issue. `stylesheet` and other values like `preconnect`, `prerender` and `prefetch` that have side effects in the browser are disallowed. There is a special case for fetching stylesheets from whitelisted font providers.
meta	The `http-equiv` attribute may be used for specific allowable values; see the AMP validator specification for details.
`a`	The `href` attribute value must not begin with `javascript:`. If set, the `target` attribute value must be `_blank`. Otherwise allowed.
svg	Most SVG elements are allowed.

HTML attributes

Attribute names starting with on (such as onclick or onmouseover) are disallowed in AMP HTML. The attribute with the literal name on (no suffix) is allowed.

The style attribute must not be used.

XML-related attributes, such as xmlns, xml:lang, xml:base, and xml:space are disallowed in AMP HTML.

Internal AMP attributes prefixed with i-amp- are disallowed in AMP HTML.

Links

The javascript: schema is disallowed.

Important

Usage of the !important qualifier is not allowed. This is a necessary requirement to enable AMP to enforce its element sizing invariants.

Properties

These CSS properties are permanently banned:

behavior
-moz-binding

The following properties are currently blacklisted due to performance concerns:

filter

AMP only allows transitions and animations of properties that can be GPU accelerated in common browsers. We currently whitelist: opacity, transform (also -vendorPrefix-transform).

Custom fonts

Authors may include stylesheets for custom fonts. The 2 supported methods are link tags pointing to whitelisted font providers and @font-face inclusion.

The following origins are currently allowed for font serving via link tags:

Fonts.com: https://fast.fonts.net
Google Fonts: https://fonts.googleapis.com
Font Awesome: https://maxcdn.bootstrapcdn.com

SVG

Currently, the following SVG elements are allowed:

basics: "g", "glyph", "glyphRef", "image", "marker", "metadata", "path", "solidcolor", "svg", "switch", "view"
shapes: "circle", "ellipse", "line", "polygon", "polyline", "rect"
text: "text", "textPath", "tref", "tspan"
rendering: "clipPath", "filter", "hkern", "linearGradient", "mask", "pattern", "radialGradient", "vkern"
special: "defs" (all children above are allowed here), "symbol", "use"
filter: "feColorMatrix", "feComposite", "feGaussianBlur", "feMerge", "feMergeNode", "feOffset", "foreignObject"
ARIA: "desc", "title"

As well as these attributes:

"xlink:href": only URIs starting with "#" are allowed
"style"

Learn more at https://ampproject.org