PROBLEM Innovation theme's template generates HTML5 warnings

[Maribe]

For demo purposes I must create a site that uses the default "Innovation" theme and that will be 100% valid HTML-5.
Unfortunately, the specific use of the <article> and <section> tags in the theme's template.php generate HTML-5 warnings (I'm using "validator.nu engine" to run the checks):

1. <article> used without heading:

   Line 62, column 11: Article lacks heading.

2. <section> within <article> contains <h1>:

   Line 66, column 8: Consider using the h1 element as a top-level heading only.

I'm not sure how to solve this as:

1. All of the page's content, including the page's title (the <h1>), ends up between the <section></section> tags. So every page is an article (without header) with one section containing the entire content.
   
2. The theme's css file uses both article and section to define the theme's layout.
   
3. According to HTML-5 rules <div> should be used to split up a page based on layout, whereas <article> and <section> should be used to semantically split up a page based on (independent blocks of) content, each article/section with its own header (<h1> for article, <h2>-<h6> for section).
   

I've checked the GetSimple Support Forum and Github, but I haven't seen anyone mentioning this or working on this issue.
Thanks for any help and/or suggestions!

[eatons]

You may be able to gain some insight into your problem by reading a tutorial at my site:
http://eatons.net/tutorials/
it's based on the innovation theme and HTML 5. Also you should download my version of the innovation theme which is called innovation outline. It may just help you solve your problem.
Download InnovationOutline Theme v1.4 - Link is in the tutorial.
Hope this helps!

[Maribe]

Thanks for your reply.
I should perhaps be more clear about my intentions:
The intention is to first get to a GetSimpleCMS base product without bugs/errors, that is able to generate valid HTML5 after a default installation, just using the default theme (or themes, Innovation as well as Cardinal) without alterations or plugins.
This is why I want to fix the Innovation theme, using a fix that can be incorporated in GetSimpleCMS right away (with the author's approval), before I proceed to the next step: creating a demo site to show the (bare) potential of GetSimpleCMS.

My current work is not based on the current stable release but on an "upstream" clone.
If I encounter a bug/error and manage to solve it, I will contribute my solution to the developers via a GitHub "pull request" and then it's up to them to decide whether or not to incorporate it in their "upstream" branch.

You may be able to gain some insight into your problem by reading a tutorial at my site:
http://eatons.net/tutorials/
it's based on the innovation theme and HTML 5.

Thanks. This may help. I've taken a quick look at it and will further investigate it later on and compare it to the W3 standards and some w3schools examples.

Also you should download my version of the innovation theme which is called innovation outline. It may just help you solve your problem.
Download InnovationOutline Theme v1.4 - Link is in the tutorial.
Hope this helps!

As I've said, for now my goal is to just get to a basic bug-free product and to fix the default Innovation theme, but your version may certainly be useful for further development/improvement of the Innovation theme.
Have you contributed your version to the developers through GitHub (using a "pull request")?

I haven't downloaded your zip file yet, but I've run a validation (via http://validator.nu) on both your "tutorials" page and your "innovationoutline" page at http://eatons.net/tutorials
I'm sorry to say that there were 9 errors on both pages.
3 of those are the same as in the original Innovation theme. These three have been fixed by a bug fix suggested by me to the GetSimpleCMS developers on GitHub which has been accepted in the upstream "master" branch (see: fixes #851, June 30 2014).

[shawn_a]

validations != bug
validation is bullshit for the most part.

granted fixing it would be nice.

[shawn_a]

Also these are validation warnings, It still validates as html5, as these are not fatal.

[Maribe]

validations != bug

I agree that the validation doesn't show an error/bug but a warning, so nothing fatal, but it still indicates that some of the code doesn't comply with the W3C standards.

validation is bullshit for the most part.

I definitely don't agree that validation is "bullshit for the most part":
if validation is bullshit then what's the reference? Where/how to check standard's compliance?
Standards are what everybody can and must rely on and comply with in the world of "open standards" and validation engines are very valuable indicators of (non)compliance, even if some of them perform/check better than others.
If validator.nu engine is not the best one to use, could you suggest a better validator?

granted fixing it would be nice.

Thanks. I agree and I'm working on it.
Having read different comments on the <article> and <section> sectioning elements, the <main> grouping element and on sectioning/outlining in general, my general idea is that a solution might be to alter template.php by replacing:

Code:

<article>
                        <section>
                                
                                <!-- title and content -->
                                <h1><?php get_page_title(); ?></h1>
                                <?php get_page_content(); ?>
          
                        </section>
</article>

by:

Code:

<main>
                        <article>
                                
                                <!-- title and content -->
                                <h1><?php get_page_title(); ?></h1>
                                <?php get_page_content(); ?>

                        </article>
</main>

where <main> is used to group the content as well as to indicate that this is indeed the main content
and <article> is used for sectioning & outlining.
This looks like it would be a correct way to handle a page consisting of just a single block of page content with a single matching page title wrapped in a top-level <h1> heading.
I also think that it might be consistent with the original author's intententions...

I'll put this to the test and report back.

Handy links:
- Editor's Draft (W3C, 10 July 2014): http://www.w3.org/html/wg/drafts/html/CR/
headings and sections, outlining: http://www.w3.org/html/wg/drafts/html/CR/sections.html#headings-and-sections
<article> : http://www.w3.org/html/wg/drafts/html/CR/sections.html#the-article-element
<section> : http://www.w3.org/html/wg/drafts/html/CR/sections.html#the-section-element
<main> : http://www.w3.org/html/wg/drafts/html/CR/grouping-content.html#the-main-element

- Living standard (WHATWG, 8 July 2014): definitions and nice examples:
headings and sections, outlining: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections-2
<article> : http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element-2
<section>: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element-2
<main>: http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element-2

[shawn_a]

Why cant we just put the header outside of the seection tags?

[Maribe]

Why cant we just put the header outside of the seection tags?

Both <article> and <section> are sectioning elements and both require a proper heading!