Invalid HTML semantic structure of pages in PRO: the <article> HTML element should not be used

Support
#1

Hey,

PRO generates all pages (Post Type: ‘page’) –even using the Blank stack– with a semantic structure that is incorrect. It uses the <article> HTML element while it should be using either the <main> HTML element or a non-semantic HTML element like a <div>. Whereas it is correct to use the <article> HTML element for posts (Post Type: ‘post’)it is not for pages.

In addition to the aforementioned, when using any of the PRO builder structural elements (Section, Row, Column, Grid, Cell or Div), if for the option HTML Tag we choose the <main> tag, then we get another issue as the <main> HTML element must not have the <article> element as its ancestor –its ancestors are limited to html, body, div and form (as per HTML Living Standard — Last Updated 5 November 2024)–.

Also, there is a closely related issue, the use of the attribute role="main" –in the parent div of the <article> element– as we should be using the <main> HTML element over using ARIA in a non semantic HTML element like a div.

If you reckon that fixing these issues would result in a breaking change, then please I would appreciate if you could provide me with instructions to customize the default HTML output by the theme. I guess, the best option is to use the child theme and customise the templates in pro-child/framework/views/custom/ .

I enclose 2 screenshots:

Captura de pantalla 2024-11-06 a las 18.20.10
Captura de pantalla 2024-11-06 a las 18.20.10812×819 127 KB

Captura de pantalla 2024-11-06 a las 18.47.08
Captura de pantalla 2024-11-06 a las 18.47.08517×900 185 KB

Thank you

1 Like
#2

Hi Diego,

Thank you for the detailed information on this. I will surely check with our development team and let you know.

Thanks

#4

Hi Tristup,

One clarification about the remark in my previous message:

Whereas it is correct to use the <article> HTML element for posts (Post Type: ‘post’) it is not for pages.

Even for posts (Post Type: ‘post’), the<article> HTML element should be nested in a <main>element to semantically indicate which is the dominant content of the document in contrast with other possible parts like, for example, the commonly used header and footer.

Thank you

#5

Hey Diego,

Our developers will look into this. Thank you for the feedback.

Cheers.

#6

Hey,

I was wondering if the developers have had a chance to look at this. Also, please, notice that in my first message –apart from pointing the main issue– I asked about what would be the best custom –perhaps temporary– solution, I quote myself:

…instructions to customize the default HTML output by the theme. I guess, the best option is to use the child theme and customise the templates in pro-child/framework/views/custom/

Thank you

#7

Hi Diego,

My colleague has already informed our development team on this, and they are looking into it.

Thanks