Themes - Guidance: Adding HTML to a Page
Editors have the ability to add HTML at the Article level within Composer using the Inline Content Element For HTML or the Custom Embeds / Power-Ups. They can also add HTML at the Page or Template level within PageBuilder using the HTML Box. Collectively, we'll refer to these inputs as HTML Blocks in the document below.
This ability is valuable when an Editor needs to render a feature in a way that the standard Arc Theme Blocks cannot. For example, the Editor needs to display a weather widget or stylized sports scores.
There are a few rules that limit the use of HTML within Arc. Accordingly, there are consequences when Editors rely on custom HTML, which may be detrimental to the page render. Below are several examples of HTML that can be disastrous for page performance and user experience. Keep these in mind when training your Editors on the various Arc tools.
Scripts
The HTML can contain scripts. It is up to the Editorial team to determine:
Is the script "safe" from a security standpoint?
Can the script compromise page performance? Many integration scripts inject assets from different sources. This can increase the page's Total Blocking Time, and slow the rendering process.
In general, Arc has no way to audit the code within the HTML Block for quality control. Therefore, Arc cannot control how those assets are loaded or optimize the performance and security of the imported scripts.
Iframes
Iframes are not necessarily responsive, often because the content within them requires different dimensions and/or aspect ratios for differently-sized screens. Arc cannot anticipate these presentation requirements. An HTML Block may look presentable on Desktop but bleeds off the edge of the viewport on Mobile.
Furthermore, the behavior of Iframe scrolling may also affect page usability for certain screen sizes.
Finally, Iframes may include scripts that have security and performance issues, as described above.
Note
Keep these issues in mind when creating Iframes for your Custom Embeds / Power-Ups.
Unresized images
The HTML Block may include images without resizing them as other native Arc Blocks do. This can negatively affect page performance, especially when very large images are used.
Stylings
Your organization and Arc spend much time and effort creating a unified look and feel for the site that supports your brand. However, the HTML Blocks will not automatically inherit these Arc styles, which can lead to an inconsistent user experience that does not support your organization's brand.
Furthermore, if the HTML Blocks include styling, that can affect the rest of the page. For example, the HTML may include selectors that adversely affect how another block on the page renders and behaves. For this reason, we advise against including any styling in HTML Blocks.