HTML5 Guidelines

HTML5 is an internet markup language used for structuring and presenting content on the Web. In 2014, the World Wide Web Consortium (W3C) formally sanctioned revision 5 of the HyperText Markup Language (HTML) standard, its core aim to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). Ads created in HTML5 offer the benefit of working across devices and platforms.

Benefits of using HTML5 Include:

• Based on a well-established programming language that many authoring tools and developers can produce
• Allows for rapid testing infrastructure that all browsers and devices should be able to process
• Can be served into standard iFrame or Safeframe
• Preserves HTML standard methods of layering content such as positioning, layering, and opacity
• Responsive ad design (when required, specific sizes can be defined in the ad code using standard methods)
• Yahoo is committed to ensuring the seamless delivery of advertisers' campaigns and currently supports the use of HTML5 in several prominent ad units, as well as Standard and Interactive Display Advertising, served to the page via approved third-party technology partners
• Contact your Sales POC for additional details

The content of this document is subject to change without notice (last updated: January 29, 2016).

Yahoo’s HTML Specs vary depending on the ad type and delivery mechanism. Yahoo supports standard HTML5 display units and interactive/rich HTML5 display units. Both ad types can be site served or 3rd party served.

Standard HTML5 display units can include either an image or HTML5. These units are limited to only click tag and impression tracking and reporting. While animation is allowed, these units do not typically include interactions and no interaction tracking will be collected.

Interactive/Rich HTML5 display units can include images, video, or HTML5. Tracking is collected for click tags, impressions, video quartiles & completes, and custom interactions. Interactivity within the unit is allowed as is ad expansions and other effects that work with page content.

Below we will outline the specs we require generally for HTML5 as well as the specs for standard HTML5 display and interactive/rich HTML5 display units.

Must be an HTML Document that follows W3C standards:

• Web browsers should render the ad like a web page
• Content must be preceded by the HTML tag and contain at least and tags

Relative references to assets are preferred, however, if a remote reference to a file is required, please ensure that it is included using the HTTPS protocol. Please see the restrictions section for additional information on remote references.

• Must be SSL compliant
• Must be compatible with SafeFrame
• Animation length cannot exceed 15 seconds
• Define Ad Dimensions:

<meta> tags can be used to identify the size of the ad creative

For example: <meta name='ad.size' content='width=300, height=250'>

Restrictions

• Loading files from cross domains is not permitted for security reasons (except for Whitelisted Public Libraries (see Tools and Libraries below for more information
• JSON: Files with the .json extension are not allowed for cross-domain security reasons.
• All creative is subject to approval by Yahoo
• Local and Session Storage Policy

As per the standard, content in an iframe is forced into a unique origin and is prevented from accessing content from the top-level origin if they are different. This prevents access to cookies and localStorage.

Tools and Libraries

When using common, public JavaScript libraries, please do not customize the framework as customizations may not transfer when the ads are ported.

Mobile

• Rollover code may cause user experience issues when included in mobile/tablet creative
• For highest quality images it is best to provide retina size assets

Code and Asset Compression

• HTML5 does not automatically provide optimizations for code and assets. Several methods exist for compressing the code and assets within HTML5:

1. HTML text should be used whenever possible to reduce file weight, improve readability, scalability, and accessibility
2. Code minifiers should be used to remove extra spaces and unnecessary characters from the code.
3. Use PNG “crushers” that losslessly compress images to balance image quality with file size.
4. Use CSS Image Sprites

• Supported Image Types: JPG, PNG, and SVG
• Autoplay animation: Up to 15 seconds

Tracking

• Video metrics and custom-defined interactions WILL NOT be tracked.
• Clicks and impressions WILL be tracked

Supported Image Types: JPG, PNG, and SVG

Supported Video

• Must support MP4/H.264 and WebM/VP8 playback. OGG/Theora support is optional
• If submitting both MP4 and WebM, the weight limit applies to each individual file and is not a combined measurement of the two files
• Video should only be loaded when required
• Preloading video is not permitted
• Site-Served: If MP4 or WebM files are not available or within spec, Yahoo will transcode available source files (MP4, MOV) into various playback formats to maximize browser and device compatibility

Autoplay Video

• Video playback can be leveraged to replace animation using the “Autoplay” attribute,
• Autoplay animation and/or video length cannot exceed 15 seconds

Audio

• Audio must be muted on autoplay
• Onload/Autoplay audio is not permitted
• Sounds played on click are allowed
• All sounds are subject to approval by Yahoo

Tracking

• Video metrics, custom-defined interactions, clicks, and impressions WILL be tracked

Backup Image

For Yahoo-served executions, backup image(s) should be included in the .zip package (it will not be counted against total file weight) when submitted.

Minification

For Yahoo-served executions, please provide original unminified source files (including product files like .an) as well as minified production code. Ideally, this should come in two separate folders: One labeled “original” and one labeled “publish.”

Packaging

• All creative assets (images, code, etc.) should be submitted in a single .zip file. There should be only one (1) .html file at the root of the package that starts the ad. The total file weight will be determined by the weight of all zipped assets
• For executions with multiple units (e.g., expandable banner), each unit should be delivered, and function, as its own independent folder with it's own index.html file

For example, a 300x250 banner that expands to 700x500 should include two (2) folders:

One (1) folder containing the 300x250 unit with all js, html & asset files

One (1) folder containing the 700x500 unit with all js, html & asset files

File Size: See individual ad format pages for additional information on file weight limits

File Weight: Measured after all code and assets are stored to a .zip file

• The .zip file must include ALL assets and reference code such as JavaScript libraries
• Once the .zip file is uncompressed, the ad (an .html file) must be viewable without a network connection (all code and assets used in the ad are contained in the .zip file)
• User-Initiated files will not be considered as part of the initial load ad size
• Host-Initiated Subload replaces the term “polite load” for Interactive Banners and is defined by the IAB as “the additional file limit allowed for rich media that is auto-initiated one second after the domContentLoadedEventEnd occurs (web page content has been loaded) on the host computer or device". Only Interactive ads allow for the additional Host-Initiated Subload

clickTags

• All required clickTags and interaction calls must be included without minification or obfuscation
• All clicks and interaction buttons must be instrumented before delivery of the completed ad
• Use the clickTag variable (not case sensitive) for the click event (i.e. this can be clickTag, clickTAG, clicktag)

To implement a clickTAG, please use the below:

<a href="javascript:window.open(window.clickTag, '_blank')">Click Here!</a>

Multiple Clickthrough URLs

You must enumerate multiple click tags as follows: clickTAG0, clickTAG1, clickTAG2, etc.

NOTE: Multiple clickthrough URLs are NOT supported for standard ad files being uploaded directly to our DSP at this time

• HTML5 is supported in all modern browsers (Chrome 40 and above; Firefox 35 and above; Internet Explorer 10 and above (including Edge); Opera 20 and above; Safari 7.0 and above)
• Internet Explorer 9 and earlier does NOT support styling of unknown elements so a backup image will be served
• Browser Support Matrix: http://html5test.com/results/desktop.html
• If the browser is unable to render the ad, a backup image should be served. Yahoo served ads will serve a backup image to the following browser versions (exceptions may apply):

1. Chrome 13 and below
2. Opera 11 and below
3. Safari 5 and below
4. Firefox 5 and below
5. Internet Explorer 9 and below

• “Graceful Fail” is recommended if a feature is not available. For example, if the geographic location is not available, the ad can fall back to providing text box for the user to enter the Postal Code

General

• Define the video within the HTML5 code using the following tags: <video></video>

• Defining the video includes providing the source filename and setting the width and height. You can also indicate default video player controls, style your own in the CSS file, or leave them out altogether. Attributes can be included to customize the video experience for your particular use case
• To ensure proper functionality across both HTML5-supported and non-supported browsers, use code to detect browser and device details. When HTML5 is not supported as needed to play the video, design the ad to “degrade gracefully”

Video In Mobile Devices

• Many mobile devices only support full-screen video playback, and in cases where video is rendered in the native video player at full screen, custom controls do not apply

Transparency

Alpha transparency is not supported in any codec or wrapper format using the HTML5 video element - there are ways to achieve this effect using JS canvas and video alpha channels

Tracking

• Video tracking WILL NOT be collected if a video is included in a site-served Standard HTML5 display unit
• Video tracking WILL be provided for site-served Interactive/Rich HTML5 Display units
• Third-party tags will require video tracking to be enabled within the third party ad building tool

• Canvas area max size: 485,000px
• Auto-Initiated creative assets max size: 1MB
• User-Initiated creative assets max size: 2MB
• Canvas are to be iframed

• Avoid CPU-intensive animation effects and consider proper use of JavaScript time controls (e.g., setInterval, setTimeout, requestAnimationFrame), animation loops, or DOM element manipulation, then optimize accordingly
• CSS or JavaScript may be used for animation

1. Wrap JavaScript and CSS in closures or namespaces to reduce potential conflicts
2. Contain JavaScript or CSS in a unique namespace or wrap in a closure to make ad code portable and prevent issues with the page code
3. CSS3 animation uses GPU which minimizes impact to CPU for rendering animations

• JavaScript animation can be used to move and manipulate DOM elements or by using the Canvas element

1. Creative should contain code that checks browser support for Canvas element
2. When Canvas is not supported as needed to play the animation, design the ad to “degrade gracefully”
3. In general, follow industry-established and widely accepted JavaScript best practices

You may use web fonts, such as Adobe Web Fonts (https://edgewebfonts.adobe.com/) or Google fonts (https://www.google.com/fonts) with the following caveats:

• To maximize browser compatibility we suggest WOFF 1.0 - http://caniuse.com/#feat=woff
• .woff file will be served off the Yahoo CDN and count towards file weight of the ad
• Web fonts may render differently across browsers
• Designs using web fonts should be flexible enough to handle slight differences
• Must specify backup HTML font(s) in code

• Optimize loops and timers
• Minimize DOM access
• Use Feature detection versus Browser detection for efficiency
• Do not use ‘eval ()' functions due to security risks
• Avoid global variables as they may result in naming conflicts and cause code to break
• Account for syntax differences and requirements between browsers (particularly IE)
• Request animation frame (use whenever possible as an alternative to set interval)

• creative should contain code that checks browser support for request animation frame feature
• setInterval (use as a fallback for older browsers (IE9 and earlier))
• setInterval is code and computer resource intensive and should be avoided
• Do not use styles/CSS to change any properties of the native html elements including but not limited to: < html >, < body >, < p >, etc.

• Please test your ad on the following browsers to ensure that it works as expected across each:

1. Firefox Mac/PC, most recent version
2. Chrome Mac/PC, most recent version
3. Internet Explorer, 10+
4. Safari, most recent version

• Ad code should be error-free when testing
• There should be no errors in the browser’s web development console or web inspector
• Ad code should be ready to serve live
• Remove any code that sets clickTAG to another url

Any code for demonstration purposes should be removed, for example:

1. CSS modifying standard page tags like < body > , < p > , etc
2. Code that centers ad
3. Code that colors the page

• Ad unit(s) should be set to top/left with a zero pixel margin
• Any console.log calls should be removed or commented out
• Ad code should be JS Lint compliant
• Always use JS to set element style to avoid the initial null or zero style value detection or check
• Initial and sub loads should be within Yahoo specs