AMP is a technology known for developing super fast web pages on mobile clients. AMP is a set of HTML tags backed by JavaScript that easily enables functionality with an added focus on performance and security. There are AMP components for everything from carousels, to responsive form elements, to retrieving fresh content from remote endpoints.

The AMPHTML Email format provides a subset of AMP components that you can use in email messages. Recipients of AMP emails can view and interact with the AMP components directly in the email.

The AMPHTML Email Format

Required markup

The following code represents the minimum amount of markup that makes up a valid AMP email message:

<!doctype html>
<html 4email>
<head>
  <meta charset="utf-8">
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
Hello, world.
</body>
</html>

An AMP email message must:

| Rule | Description | | | | Start with the <!doctype html> doctype. | Standard for HTML. | | Contain a top-level <html ⚡4email> tag.
(<html amp4email> is accepted as well) | Identifies the document as AMPHTML Email. | | Contain <head> and <body> tags. | Optional in HTML but not in AMPHTML Email. | | Contain a <meta charset="utf-8"> tag as the first child of their <head> tag. | Identifies the encoding for the page. | | Contain the amp4email boilerplate in the <head> :
<style amp4email-boilerplate>body{visibility:hidden}</style><script async src="https://cdn.ampproject.org/v0.js"></script> | CSS boilerplate to initially hide the content until AMP JS is loaded. |

AMP Components

The following is a proposed list of AMP components that are supported in AMP email messages. The components are grouped into the following categories:

Dynamic Content

| Element | Description | | | | <amp-img> | An AMP component that replaces <img>.

Note: Binding to [src] is not allowed. | | <amp-anim> | Embeds GIF files.

Note: Binding to [src] is not allowed. |

CSS requirements

Specifying CSS in an AMP document

All CSS in any AMP document must be included in a <style amp-custom> tag within the header or as inline style attributes.

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
  amp-img.grey-placeholder {
    background-color: grey;
  }
</style>
...
</head>

CSS Restrictions

The AMP4EMAIL validator spec does not contain CSS restrictions beyond the standard AMP CSS restrictions. However, email clients may have their own CSS restrictions.

For example, in Gmail, the allowed list of CSS properties and values can be found at Gmail Supported CSS Properties & Media Queries.

Document dimensions

  • Optimal width: 800px or less (any wider and content may be unexpectedly truncated on some clients).

  • Height: variable, the client allows the user to scroll through the content.

Validation tools

To ensure your email messages meet the strict criteria for the AMPHTML Email format, validate your content with one of the following tools:

Web-based validator

A web-based validator is available at https://validator.ampproject.org/

Simply paste in the AMP HTML to ensure the document meets all the AMPHTML Email restrictions. This tool shows you the validation errors directly inline.

Command-line validator

A command-line validation tool is also available for validating your AMPHTML Email document.

Installation

Follow the instructions to install the AMP Validator CLI tool.

Usage

Once you have the command-line tool installed, run the following command by replacing <amphtml file> with your file containing the HTML content.

amphtml-validator --html_format AMP4Email \
<amphtml file>

For example:

amphtml-validator --html_format AMP4Email \
amp_email.html

Privacy and Security

Tracking email opens and interaction

AMPHTML allows tracking email opens with pixel tracking techniques, same as regular emails. Any user-initiated requests for data from external services will also indicate the user is interacting with the message. Email clients may offer their users the ability to disable loading remote images, and other external requests.

AMP-specific analytics

The following AMP-specific analytic techniques are not supported:

Replying/forwarding semantics

The email client strips out the text/x-amp-html part of the MIME tree when a user replies to or forwards an AMP email message. This is why it is important that an email provide alternative content in the HTML part.

Requests for images in the <amp-carousel> can indicate to the sender that the user is interacting with the message.

Examples

This section provides some AMPHTML Email code examples.

Basic usage of <amp-list>

The following is a fictional email that includes an updated list of featured products retrieved from an endpoint. This example shows the basic usage of <amp-list>.

<!doctype html>
<html 4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  Check out these latest deals from our store!
  <amp-list src="https://ampbyexample.com/json/cart.json" layout="fixed-height" height="80">
    <template type="amp-mustache">
      <div id="cart">
        <!-- These items (and their prices) can be updated dynamically. -->
        {{#cart_items}}
        <div class="cart-item">
            <span>{{name}}</span>
            <span>{{price}}</span>
          </div>
        {{/cart_items}}
        {{^cart_items}}
          There are no featured products available. Please check back again later.
        {{/cart_items}}
      </div>
    </template>
  </amp-list>
</body>
</html>

Basic usage of <amp-bind>

The following is a fictional email that shows interactivity features by using <amp-bind>.

<!doctype html>
<html 4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>
    .red { background-color: red; }
    .blue { background-color: blue; }
    .yellow { background-color: yellow; }
  </style>
</head>
<body>
  <p [class]="state.color" class="yellow" [text]="'The current color is ' + state.color + '.'">
    The current color is yellow
  </p>
  <button on="tap:AMP.setState({state: {color: 'red'}})">
    Set color to red
  </button>
  <button on="tap:AMP.setState({state: {color: 'blue'}})">
    Set color to blue
  </button>
</body>
</html>

Adding AMP to existing emails

Email is structured as a MIME tree. This MIME tree contains the message body and any attachments to the email.

Embedding AMP within an email is simple, add a new MIME part with a content type of text/x-amp-html as a descendant of multipart/alternative. It should live alongside the existing text/html or text/plain parts. This ensures that the email message works on all clients.

Important things to note:

  • The text/x-amp-html part must be nested under a multipart/alternative node, it will not be recognized by the email client otherwise.
  • Some email clients will only render the last MIME part, so we recommend placing the text/x-amp-html MIME part before the text/html MIME part.

See the following example:

From:  Person A <persona@gmail.com>
To: Person B <personb@gmail.com>
Subject: An AMP email!
Content-Type: multipart/alternative; boundary="001a114634ac3555ae05525685ae"

--001a114634ac3555ae05525685ae
Content-Type: text/plain; charset="UTF-8"; format=flowed; delsp=yes

Hello World in plain text!

--001a114634ac3555ae05525685ae
Content-Type: text/x-amp-html; charset="UTF-8"

<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
Hello World in AMP!
</body>
</html>
--001a114634ac3555ae05525685ae--
Content-Type: text/html; charset="UTF-8"

<span>Hello World in HTML!</span>
--001a114634ac3555ae05525685ae

Feedback & Support

For support and feedback on AMPHTML Email, please use the following channel: ongoing-participation