Skip to main content

20.0.0 HTML and CSS Tags and Attributes Supported By Out Tags

info

Along with text and images, the Out Tag can also display HTML. In doing so, the HTML tags are converted to their Microsoft Office equivalents. For example, if an HTML snippet has a bold tag <b> applied it will convert the text it surrounds to be bold when displayed in Microsoft Office report template output.

Here is a list of supported HTML Tags and attributes.

danger

Don't forget you must set the Out Tag property type to TEMPLATE for the HTML to be properly interpreted. This functionality is not supported in PowerPoint Templates, so HTML will not be rendered.

Changes in Version 20.0.0​

The HTML Tag had support added:

  • <br>

This CSS attribute was added for <ol> and <ul> tags:

  • list-style-type

Supported HTML and CSS Tags and Attributes​

TagHTML AttributesCSS AttributesNotes
<a>href; style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<b>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<body>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<br/>none</br> tag in DOCX output will use styling at beginning of previous paragraph for imported HTML in 20.0.
<div>bgcolor; style
  • background-color
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<em>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<font>color; face; size; style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<i>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<img/>alt; srcnone
<li>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<ol>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • list-style-type
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<p>align; bgcolor; class; style
  • background-color
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<span>bgcolor; style
  • background-color
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<strike>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<strong>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<sub>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<sup>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<table>bgcolor; border; style; width
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
  • width
<tr>bgcolor
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<td>bgcolor; style; width
  • background-color
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
  • width
<u>style
  • border-style
  • border-color
  • border-width
  • color
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<ul>style
  • border-style
  • border-color
  • border-width
  • font-family
  • font-size
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<h1>align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<h2>align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<h3>align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<h4>align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<h5>align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align
<h6>align
  • border-style
  • border-color
  • border-width
  • font-family
  • font-style (italics/oblique only)
  • font-variant (small-caps only)
  • font-weight
  • line-height
  • text-align
  • text-decoration (underline and line-through only)
  • vertical-align

Supported Formats for HTML​

HTML AttributeSupported Formats
altany text
alignleft; center; right; justify
bgcolor
  • hex values, e.g. #F03; #FF0033
  • black; silver; gray; white; maroon; red; purple; fuchsia; green; lime; olive; yellow; navy; blue; teal; aqua
borderpx values
classany text
color
  • hex values, e.g. #F03; #FF0033
  • black; silver; gray; white; maroon; red; purple; fuchsia; green; lime; olive; yellow; navy; blue; teal; aqua
faceany text
hrefany text
list-style-type
size
  • 1-7 (standard HTML sizes)
  • pt or px values
srcany text
styleCSS
width
  • px values
  • numbers (px)
  • percentage values

Supported Formats for CSS​

CSS AttributeSupported Formats
background-color
  • hex values, e.g. #F03; #FF0033
  • black; silver; gray; white; maroon; red; purple; fuchsia; green; lime; olive; yellow; navy; blue; teal; aqua
  • "rgb(R,G,B)" where R, G, B are integers
color
  • hex values, e.g. #F03; #FF0033
  • black; silver; gray; white; maroon; red; purple; fuchsia; green; lime; olive; yellow; navy; blue; teal; aqua
  • "rgb(R,G,B)" where R, G, B are integers
font-size
  • 1-7 (standard HTML sizes)
  • pt and px values
list-style-type"upper-alpha"; "upper-roman"; "decimal"; "decimal-leading-zero"
width
  • pt values
  • percentage values
  • numbers (px)

:::warn CSS elements must be identified individually in the current version. For instance you cannot specify a border with the “shorthand” property like:

border: 5px solid red;

The border must be defined like:

  • border-width: 5px;

  • border-style: solid;

  • border-color: red; :::