General: HTML5 - Githubissues

How about to prepare HTML5 structure skeleton for our development stack?

I have noticed a few things, which IMHO may be changed to be more up to HTML5 specification:

We include header inside .main. Main should represent the content directly related to the purpose of the page. Header and footer are general components, thus should be moved outside the main container
Using <div> for main content container. We may use <main> which serves specifically this purpose - highlighting the main content of the page. Support for HTML5 semantic tags is pretty decent
Add footer to the templates. I can hardly recall a website without a footer

In general, for our default.nunj to look similar to this:

<body>
    <header id="header">
        {# This will be moved to a separate "header.nunj" template #}
    </header>
    <main role="main"> {# No need to declare ID, there can only be one <main> on the page #}
        {% block content %}{% endblock %}
    </main>
    <footer id="footer">
        {# This will be moved to a separate "footer.nunj" template #}
    </footer>
</body>

The following also includes to maintain proper HTML5 tag choice throughout the process of creating a layout. It may be useful to hold a lecture regarding how to use this specification effectively.

There are HTML linters out there, but I have not studied them thoroughly enough. Tricky part about it, is to make a right choice when picking an element. This is unlikely to be validated by a machine.

Restrictions

Following the rules may be troublesome sometimes. Lets say we need to include an email subscription section. Should it be inside <main>? No. Should it be inside <footer>? No again. It does not contribute to the main content of the page, and is a semantically separate block. This is where hooks may come in handy:

{% block pre-footer %}{% endblock %}
<footer id="footer>
{# ... #}

This may allow to insert any content to a predefined places (typically one after header and one before footer).

This topic is, of course, open to discussion. Thank you.

actum / gulp-dev-stack

General: HTML5 #69

Restrictions