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:

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.

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

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

3. 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.