HTML5 Creative Specifications

HTML5 creatives are a type of display creative with their own recommendations, sourced from the IAB Display Advertising Guidelines. HTML5 creatives are displayed as a full HTML page in an iFrame.

What You Need to Know

You may not use dynamic or expandable creatives as HTML5 creatives.
Different browsers support different subsets of HTML5 features. Your creative might fail on a browser if it uses a feature that browser doesn't support — make sure your creative "gracefully degrades" for unsupported browsers.

It's recommended to add the dimensions of your creative to your primary HTML document in a meta tag inside the <head> section. Here's an example, where you'd replace the width and height values with your creative's actual dimensions:

If an ad.size meta tag isn't provided in the primary HTML document, you'll be prompted to enter dimensions when the creative is submitted.

A static backup image is required for hosted HTML5 — it displays if a user has JavaScript disabled.
Commonly used JavaScript and CSS libraries (such as jQuery) do not need to be included with the creative.
Including image sprites instead of multiple images decreases the number of file requests your creative makes and improves performance.
Avoid the use of video tags in HTML5.
Audio tags should play only if a user intentionally starts the audio.

For more detail on this creative type, see HTML5 For Digital Advertising: Guidance for Ad Designers and Creative Technologists.

File Sizes

Requirement	Maximum Specification
Initial load	300 KB (200 KB recommended)
Subload	600 KB
Initial file load count	10 files
Subload file count	100 files
File size	5 MB
User-initiated load	2.2 MB (recommended)

File Packaging

You can use one of the following packaging options:

A single HTML file. All information for serving the creative (with the exception of commonly used JavaScript and CSS libraries) should be included in the HTML file. The maximum HTML file size is 200 KB.
A single root/main HTML file with supporting images.
A single root/main HTML file with supporting images and additional supporting JS and CSS files.

Here's what you need to know about using compressed (ZIP) files:

All files for displaying the creative (with the exception of commonly used JavaScript and CSS libraries) should be included in the ZIP file.
The primary HTML file should be located in the root of the ZIP file.
ZIP files must contain no more than 100 files, including at least one HTML file for use as the initiating file for display. Keep the file count low to minimize browser performance impact.
You can include only HTML, JS, CSS, MP4, JPG, JPEG, GIF, PNG, and SVG files in a ZIP file.
When packaging HTML5 creatives, include the asset files themselves — not the folder containing them — in the ZIP file:

Maximum file size requirements for compressed files:

Requirement	Maximum Size
Automatically-started video	Less than 1.1 MB
Any individual file	2.2 MB
Primary HTML file	100 KB
ZIP file compressed	Less than 10 MB
ZIP file uncompressed	Less than 12 MB

Click Tag Parameters

A click tag is a parameter used in HTML5 banner ads. It's a variable that defines the destination URL and is provided in the primary HTML file as a URL parameter.

You can customize the name of the URL parameter when uploading or editing the creative.
Click tag names are case-sensitive. Use uniform capitalization throughout the creative and any supporting files — clickTag and clickTAG are not interchangeable. The platform defaults to clickTAG.
When the user clicks the ad, the creative must direct them to the correct click tag page in a new window.
If you also want to use that click-through URL in your HTML5 creative, you can configure the creative to use the backup click-through URL as the default. To call the click-through page through the backup ad image correctly, you must supply a click-through parameter.
You can use multiple click-through URLs and define different landing pages for different actions. If you append a URL-escaped landing page to the click tag URL, the platform tracks the click and redirects to that landing page.

var clickTAG = getParameterByName("clickTAG") + encodeURIComponent("http://www.example.com");

Tip: Use JavaScript to read the parameter from the document location URL and use it to set up the landing page for your clicks. You can use either all single quotes (') or all double quotes (") in your code, but never mix them.

Example: Click Tag Parameter

The following code shows one way to retrieve and implement a creative with a click-through URL. A single image is wrapped in an anchor tag which, when clicked, opens a new window using the address stored in the clickTAG URL parameter of the creative.

<html>
  <head>
    <script type="text/javascript" charset="utf-8">
      function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" :
          decodeURIComponent(results[1].replace(/\+/g, " "));
      }
      var clickTAG = getParameterByName("clickTAG");
    </script>
  </head>
  <body>
    <a href="javascript:window.open(window.clickTAG);void(0);">
      <img src="clickme.jpg"/>
    </a>
  </body>
</html>

The script function retrieves the clickTAG parameter, and the window.clickTAG variable stores the click-through URL location.