Hello World

Edit on Github
Open in Playground View Demo

Introduction

An introduction into how to create AMP Ads. AMP Ads are ads implemented using AMPHTML. The AMP Ad runtime is based on the AMP runtime and provides the same performance benefits. However, there are a few things that make them different from normal AMPHTML files.

Good to know: the AMPHTML Validator features a special validation mode for AMP Ads.

Markup

Doctype declaration is required.

<!doctype html>

This tells everyone that this is an AMP for Ads file.

<html4ads>

The charset definition must be the first child of the <head> tag.

<meta charset="utf-8">

AMP Ads require a custom version of the AMP runtime.

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

The AMP Ad boilerplate which is shorter than the regular AMP boilerplate.

<style amp4ads-boilerplate>body{visibility:hidden}</style>

CSS must be embedded inline as well.

<style amp-custom>
  h1 {
    color: red;
  }
</style>

Body

Inside the body, AMP ads are only allowed to use a restricted set of HTML and AMPHTML elements as described in the spec.

Example

Hello World

<h1>Hello World</h1>

Check out the other AMP Ad samples to learn how to create more sophisticated AMP Ads.