Adding custom headers and footers

You add a custom header to include a publication title, company logo, or other common branding elements in HTML output. A custom footer can also be added with copyright information, legal boilerplate, or other fine print.

In HTML5 output, the contents of the header file will be wrapped in an HTML5 <header> element with the @role attribute set to banner. The footer file contents are wrapped in an HTML5 <footer> element with the @role attribute set to contentinfo.

For example, the DITA-OT documentation includes a simple header banner with the publication title and a horizontal rule to separate the header from the generated topic content:

<div class="header">
  <p>DITA Open Toolkit</p>
  <hr/>
</div>

Note: Header and footer files should be specified using absolute paths and must contain valid XML. A common practice is to place all content into a <div> element.

Set args.hdr to include an XML file as a running header that appears above the page content.
Set args.ftr to include an XML file as a running footer that appears below the page content.

Add custom CSS rules to style headers and/or footers.

For example, the DITA-OT documentation stylesheet includes the following header rules:

.header {
  margin-bottom: 1rem;
  padding: 0 12px;
}

.header p {
  color: var(--headings-color);
  font-size: 1.5rem;
  margin: 0 0 16px;
}

.header hr {
  border: 0;
  border-bottom: 1px solid var(--secondary-light);
  height: 0;
}

Tip: For an example of HTML output generated using this method, see the HTML5 version of the DITA-OT documentation included in the installation folder under doc/index.html.

DITA-OT mdBook Demo

Adding custom headers and footers