Dev Tip: Placing specific HTML tags

The OutSystems platform is great as it generates HTML code for us. As you probably know, the platform’s container Widget is simply a “div” HTML element.

But what if I am concerned with the accessibility of my Application, and I want to apply heading styles or just use a specific HTML element?

For example, when I apply a heading style in Service Studio, the following HTML is generated:


<span class=”Heading1″>Hello</span>

But I need to ensure that the semantic markup and use HTML heading tags instead, like:


In Mobile Apps and Reactive Web Apps, we can use the out-of-the-box widget, the HTML element widget.

It works similar to a container widget and allows us to configure the HTML tag in Service Studio and define the HTML attribute in the attributes section.

This is a really helpful tip!

Jake Magro, OutSystems Developer, walks you through this process in this 2-minute video.

Sign up for our newsletter and stay tuned for more Dev Tips.

Team PhoenixDX