Skip to main content
OutSystems

How to customize containers to generate specific HTML tags

Question

I am concerned with accessibility for my applications. How can I apply heading styles in a way that provides good semantic markup?

When I apply a heading style, the HTML produced is something like this:

<span class="Heading2">Hello</span>

In the document "Web Content Accessibility 2.0", the section "Use HTML Heading Tags" states that heading styles are the only way to ensure semantic markup. So, I need the heading to be like this:

<h2>Hello</h2>

Answer

You can customize your containers to generate the final HTML tag you want if you add the OSTagName extended property, setting the tag you want to apply to the container.

unnamed.png

However, this solution:

  • Only works on containers and placeholders.
  • Is limited to the tags below.
fieldset section pre nav
h1 h2 h3 h4 h5 h6
ol ul li p
button footer header hr small strong

Check the forge component Bootstrap for examples on how to use this strategy to have semantic markup.