Header

When a reader first opens your Instant Article, they are presented with a header for the article which serves as a visual header for its body content. This header consists of the article's title and can be enhanced with rich media and other information such as subtitles and kickers to provide additional context.

Header must fit 4:3 aspect ratio. Any image or video is automatically cropped to that size.

The header of your Instant Article is specified using a set of HTML5 elements located in the <header> section of the <body> of your article's markup.

Options

Name Description Definition

Title [required]

The title of the article.

Use the <h1> in the <header> element inside the <body> of this article.

Subtitle

A subtitle for the article.

Use the <h2> in the <header> element inside the <article> block of this article.

Authors

One or more Author elements, defining the contributors to this article.

Use one or more <address /> elements in the <header> or the <footer> of your article.

Kicker

A tertiary blurb in the headline of the article.

Define the content of the kicker as text content within an <h3> element with the op-kicker class.

Media

The media to be displayed at the top of your article.

Add an Image or Video element to define the header for this article. If you are using an Image element as your header, you can specify the Citation to always be visible by explicitly specifying one of the Vertical Alignment attributes on the <cite> element. Otherwise, your citation will not be shown on the image until it is expanded. Captions are only supported on expanded images.

Examples

Image-based header

Using an image in the header of your Instant Article is a great way to provide immediate visual context to the reader when they open the article.

Add a <figure> element in the <header> section of the <article> that wraps an <img> element specifying the image to be used in the header.

<body>
  <article>
    <header>
      <!-- The header image shown inside your article --> 
      <figure>
        <img src="http://mydomain.com/path/to/img.jpg" />
        <figcaption>This image is amazing</figcaption>
      </figure>
      
      <!-- The title shown in your article -->
      <h1> Title </h1>

      <!-- The author of your article -->
      <address>
        <a>Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>
    </header>
  </article>
</body>

Video-based header

A video can be added to the header of your Instant Article which will autoplay when the reader opens your article.

Add a <figure> element in the <header> section of the <article> that wraps a <video> element specifying the video to be used in the header.

<body>
  <article>
    <header>
      <!-- The header video shown inside your article --> 
      <figure>
        <video>
          <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
        </video>
      </figure>
      
      <!-- The title shown in your article -->
      <h1> Title </h1>

      <!-- The author of your article -->
      <address>
        <a>Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>
    </header>
  </article>
</body>

header without media

If you don't have any media items to be included in the header of your article, you may omit this information from the article as it's not required.

<body>
  <article>
    <header>
      <!-- The title shown in your article -->
      <h1> Title </h1>

      <!-- The author of your article -->
      <address>
        <a>Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>
    </header>
  </article>
</body>

Header with author

The authors of your article are defined in the <header> block inside of the article's <body>.

Use an <address> element for each author of the article. See the Author reference for additional options.

<body>
  <article>
    <header>
      <address>
        <a>Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>
    </header>
  </article>
</body>

Header with subtitle

Subtitles can be added to the header of your article to provide additional context to the reader on the subject matter of the article.

Add an <h2> element in the <header> section of the <article> to specify a subtitle for your article.

<body>
  <article>
    <header>
      <!-- The header image shown inside your article --> 
      <figure>
        <img src="http://mydomain.com/path/to/img.jpg" />
        <figcaption>This image is amazing</figcaption>
      </figure>
      
      <!-- The title shown in your article -->
      <h1> Title </h1>

      <!-- The subtitle shown in your article -->
      <h2> Subtitle </h2>

      <!-- The author of your article -->
      <address>
        <a>Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>
    </header>
  </article>
</body>

Header with kicker

A kicker can be added to your Instant Article to enhance the title of the article.

Add an <h3> element with the op-kicker class in the <header> section of the <article> to specify a kicker for your article.

<body>
  <article>
    <header>
      <!-- The header image shown inside your article --> 
      <figure>
        <img src="http://mydomain.com/path/to/img.jpg" />
        <figcaption>This image is amazing</figcaption>
      </figure>
      
      <!-- The title shown in your article -->
      <h1> Title </h1>

      <!-- A kicker for your article -->
      <h3 class="op-kicker">
        This is a kicker
      </h3>

      <!-- The author of your article -->
      <address>
        <a>Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>

      <!-- The published and last modified time stamps -->
      <time class="op-published" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
      <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
    </header>
  </article>
</body>