Semantic HTML5 uses specific tags to indicate clearly what role is played by the content those tags contain. That explicit information helps robots/crawlers like Google and Bing to better understand which content is important, which is subsidiary, which is for navigation, and so on. By adding semantic HTML tags to our pages, we provide additional information that helps screenreaders, including robots/crawlers, to understand the roles and relative importance of the different parts of your page.
Using the above information, the general structure of an HTML document should include
Header
Main
Footer
Unfortunately, when I use that structure for my documents, the App Structure panel does not show the contents of Main as is the case for Header and Footer.
Hi Teodor,
I would also be grateful if this issue were addressed.
It seems that quite a few elements are not recognised. If you open pages created in DW, typically a lot of elements are ignored. I appreciate that non-standard elements won’t be recognised, but it would be good if a few omissions were addressed.
Eg I imagine the Bootswatch templates are pretty standard (and the CSS for these templates is incorporated into Wappler of course). However if you open one of these templates in Wappler (having tweaked the Bootstrap file references etc.), quite a few elements are not recognised. Here’s one of the templates: https://bootswatch.com/cerulean/
Hi Tom,
By not recognized what do you mean? Not displayed in the App Structure or not visible on the page or not visble in DOM tree or no properties appear?
Please provide the exact elements you have issues with and explain what/where is ‘not recognized’.
The issue Ben reports is that when you wrap your content with a HTML element, the components are not properly displayed in app structure. Is that the case for you as well?
I was mainly referring to the App Structure - in some cases selected elements are not recognised at all; in some cases the properties panel responds, but not the structure panel. The DOM panel always seems to show the properties of the selected item, but not necessarily show it in the DOM tree.
If a third-party template is loaded into Wappler, only some of the elements will show in the App Structure panel. If any template is loaded into Pinegrow for example, every single element will be recognised. Obviously Wappler works in a different way, and I imagine it recognises only a set of pre-determined elements. However, it would be good if it recognised a few more elements in what are probably standard templates (ie using standard Bootstrap code).
I loaded this file into Wappler. It’s one of the Bootswatch templates (which Wappler uses for it’s CSS options):
I’ve highlighed an extract from the page. Elements in yellow selections are not recognised by Wappler at all; purple selections indicate elements where the Property panel responds but not the App Structure panel.
