AMP is a technology commonly known for developing super fast web pages on mobile clients. AMP is in fact a set of HTML tags backed by JavaScript that allow all kinds of functionality with a 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 message.
Contents
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. |
The following is a proposed list of AMP components that are supported in AMP email messages. The components are grouped into the following categories:
| Element | Description |
|---|---|
<amp-form> |
Form element. The action-xhr attribute must be used in place of the regular action attribute. Can be used in conjunction with <template type="amp-mustache"> to render a response. |
<amp-selector> |
A multi-select widget for use within a form. |
<amp-bind> and <amp-state> |
Simple scripting language in AMP that allows the manipulation of a state machine for interactions between elements. Can also be used to add behavior on certain events.<amp-state> is used to remotely fetch the initial state machine values.Note: It is prohibited to bind to [href] or [src]. It is also prohibited to use the AMP.print, AMP.navigateTo and AMP.goBack actions. |
<amp-list> |
Remotely fetches JSON data that will be rendered by an <amp-mustache>.Note: Binding to the [src] attribute is not allowed. Including user credentials with credentials="include" is also prohibited. |
<template type="amp-mustache"> |
A Mustache template markup to render the results of an amp-list call. |
| Element | Description |
|---|---|
<amp-accordion> |
A UI element that facilitates showing/hiding different sections. |
<amp-carousel> |
A carousel UI component. |
<amp-sidebar> |
A sidebar for navigational purposes. |
<amp-image-lightbox> |
A lightbox for containing images. |
<amp-lightbox> |
A lightbox for containing content. |
<amp-fit-text> |
A helper component for fitting text within a certain area. |
<amp-timeago> |
Provides a convenient way of rendering timestamps. |
| 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. |
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>{% call callout('Note', type='note') %}
The entire <style> tag cannot exceed 50,000 bytes. The validator will check for this.
{% endcall %}
-
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.
To ensure your email messages meet the strict criteria for the AMPHTML Email format, validate your content with one of the following tools:
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.
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.htmlThis section provides some AMPHTML Email code examples.
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>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>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-htmlpart must be nested under amultipart/alternativenode, 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-htmlMIME part before thetext/htmlMIME part.
See the following example:
From: Person A <[email protected]>
To: Person B <[email protected]>
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
To start, 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.
"AMPHTML Email" is the name of this technology.
No. Valid AMP documents are not permitted to have their own JavaScript.
I heard that AMP is going to support JavaScript. Will this be incorporated into AMPHTML Email?
No. To maintain users’ expectations of security and privacy, we’ll only allow a conservative subset of AMP functionality.
No. AMPHTML Email supports a restricted subset of the AMP components in order to ensure user safety in web-based mail clients.
See the AMP Components section in the spec below.
No.
No.
No.
No, the spec still requires senders to include a static, HTML version of the email that users can view if they choose.
No. Currently, only amp-image will be supported.
AMPHTML Emails can track opens just like regular emails today using pixel tracking techniques. Any user-initiated requests for data from external services would also indicate to the sender that the user is interacting with the message. Email clients may offer their users the ability to disable loading of remote images, including any other external requests.
Request for images in the carousel can indicate to the sender that the user is interacting with the message.
The usual HTML content will be rendered. Email clients currently ignore MIME types they don’t understand. For example the text/watch-html MIME type gets ignored according to the rules specified in RFC 1341 7.2.3 which state:
“In general, user agents that compose multipart/alternative entities should place the body parts in increasing order of preference, that is, with the preferred format last. For fancy text, the sending user agent should put the plainest format first and the richest format last. Receiving user agents should pick and display the last format they are capable of displaying.”
Email clients may offer users the ability to disable AMPHTML documents in their email.
Currently, Gmail is the first adopter with their Gmail Developer Preview starting with the Web developer preview. We're looking forward to working with other mail providers and clients to have their web and mobile apps support this as well.
That will depend on the implementation strategy chosen by the email clients.
No. Valid AMP documents are not permitted to have their own Javascript.
How will AMPHTML Email deal with spam since attackers can evade spam detection in real time at mail-open time?
Email providers will need to proxy all XHRs and use the responses to render the content and perform phishing checks.
The AMP4EMAIL validator spec does not contain additional 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.
Once other email clients start implementing AMPHTML Email we'll provide more guidance on how email senders can easily write cross-client compatible emails.
No.
Will AMP Variable Substitution be supported?
No. They are mainly used in amp-analytics and amp-pixel, that are not supported in AMPHTML Email. In addition, page URLs used for variable substitution do not apply to emails.
No.
For support and feedback on AMPHTML Email, please use the following channel: ongoing-participation