W3C Validator errors

[vtheod]

Hi all,

I was checking a demo site and w3c validator gives some errors. One error is about the Header Section Layout. If you choose the container-fluid section layout, astroid creates a div with class container-fluid, but this div remains unclosed (that div is created in the header section).

Another error is that the main element must not appear as a descendant of the section element. The <main class="astroid-component-area"> appears inside the <section class="astroid-section astroid-component-section">.

Can these errors be fixed?

If I find more errors, I'll post them here.

[Chacapamac]

Thank @vtheod I can confirm the error on my test website about the “main” —> http://joom4-astro.graf-test.ca/

——————— Template One & Zero ——————— • The main element must not appear as a descendant of the section element. From line 255, column 69; to line 255, column 105

Maybe? <section id="cs-1528971561366" class="astroid-section astroid-component-section"> Should be <main id="cs-1528971561366" class="astroid-section astroid-component-section">

and <main class="astroid-component-area"> Should be <section class="astroid-component-area">

Not sure if possible?

I see another error: • Element [dl] is missing a required child element.

From line 272, column 16; to line 272, column 102 <dd class="createdby" itemprop="author" itemscope itemtype="https://schema.org/Person"> Not sure about that one

[vtheod]

Thanks @Chacapamac Did you manage to reproduce the header section error too?

[Chacapamac]

No, I cannot see this error when the Header Section Layout settings is “Container Fluid”

No unclosed div in both Template one and zero?

See http://joom4-astro.graf-test.ca/ — Template One —> Header Section Layout settings “Container Fluid”

[vtheod]

I checked it on another installation, you're right. Probably there's something on my end...

[Chacapamac]

@vtheod & @sonvnn what do you think of my solution for the W3C Validation error,

• The main element must not appear as a descendant of the section element.

in my previous post —> https://github.com/templaza/astroid-framework/issues/311#issuecomment-1499051889

It make sens to me, whenever you have an article showing in a page, it’s content become the “main” content. I think this the original intent of Joomla?

[vtheod]

I think that if we just switch the elements with each other, the error will be fixed.

The safest is to change the section element to main and the main element to just a div

[sonvnn]

@Chacapamac It's so confuse because Main tag display for Component block only. It's use to Accessibility Check in Joomla Let check this commit or cassiopeia template https://github.com/templaza/astroid-framework/commit/989dd4ad7de8bc9878b25799e806ca8202bc738c or https://github.com/joomla/joomla-cms/blob/4.3-dev/templates/cassiopeia/index.php#L202:L204

The solution is replace all <section> tag to <div>.

I will think about it. Any ideas are welcome.

Best Regards, Sonny

[Chacapamac]

@sonvnn

I think that replacing all “section” tag by ”div” is not the right approach.

The only rule of HTML5 semantic wrong here is that the “main” element cannot be contain by another semantic type element (section, header, nav, whatever...) — Any “main” element container need to be a non-semantic element, like “div”. Error —> The “main” element must not appear as a descendant of the “section” element.

For Joomla, the “main” element is always the Joomla article(s) contain in the “component” area e.g. Cassiopea

<div class="grid-child container-component">
            <jdoc:include type="modules" name="breadcrumbs" style="none" />
            <jdoc:include type="modules" name="main-top" style="card" />
            <jdoc:include type="message" />
            <main>
            <jdoc:include type="component" />
            </main>
            <jdoc:include type="modules" name="main-bottom" style="card" />
        </div>

• Actually for Astroid Template Zero & one it is

I simplified the HTML to make it clearer.

<section class="astroid-section astroid-component-section">
    <div class="container">
        (ASTROID COLUMN, MESSAGE AND STUFF)

    <div class="astroid-component">

<main class="astroid-component-area">
        (…ALL THE ARTICLE HTML)
</main>

    (..,ALL THE OTHER SUTFF)

</section>

The “main” container —> <section class="astroid-section astroid-component-section"> & </section>

Need to be rename to

—> <div class="astroid-section astroid-component-section"> & </div>

That’s it. All the other “section” around can remain because they are actually semantically showing that some other content are grouped in each of them and surround the “main” component.

Like that the “main” (Joomla article(s) can stay the focus of the page and the surrounding content (Joomla modules) are also pointed to be different group of information.

Hope it make sens? Removing the other “section” will degrade the semantic because they will appear merely as structural elements.