What do you do when you cant follow HTML5 best practices?

[McShaman]

I want to be a good boy and follow HTML5 semantics… However in some circumstances it is just not possible to recreate a design while following the best practices. For example if I have the following:

Code: Select all

<div class="blue-strap">
    <nav>
        <ul>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
        </ul>
    </nav>
    <section>
        <h1>Main Section</h1>
    <section>
</div>
<div class="white-background">
    <section>
        <p>Text for Main Section</p>
    <section>
</div>


So <h1> is displays in a blue coloured <div> along with the <nav>, however the content is display in a <div> with a white background.

The desired structure is one <section> tag:

1. Untitled NAV
2. Main Section

But because of the aesthetics it must be split across two <div>s. This obviously validates with a <section> titled Main Section and an untitled <section>.

1. Untitled NAV
2. Main Section
3. Untitled SECTION

Is there a solution for this sort of problem in HTML5 as I have two new websites that I am developing at the same time and both of them are often running into this issue.

I thought a possible solution would be to move the <h1> within the <section> in the <div> with the white background and then using JavaScript move the <h1> tag into the blue coloured <div>. But is a valid solution to make it render correctly without JavaScript but render incorrectly with JavaScript? Is this a desirable practice?

An ideal solution would be able to link or two or more tags together so that the validate as the same tag even if they are split apart.

Some advice would be greatly appreciated.

[Xdega]

How about removing the <div> elements all together and simply styling the <nav>, <section> and <h1> elements respectively ? Basically color the <nav> and <h1> color "a", and then the <section> color "b"
Would this not create the desirable look? Maybe a image of what look you are trying to achieve would help?

also...
I wouldn't rely on JS to render your page correctly, your page should degrade gracefully with the absence of JS. In very few circumstances should JS be required. That said, I am a huge JS/client side code hater, so a bit of a biased opinion.

[McShaman]

Thanks for the reply.

The example was really a simplified version of one possible problem. The are many situations where elements fall into areas that disrupt the structure because of the desired aesthetic outcome.

In this particular scenario the blue coloured <div> is actually a diagonal gradient. So there is no real way of splitting that in half an making it look seamless.

I can't be the only one running into this issue. It seems to me to be a major flaw with HTML5 where the well formed HTML is going to be disregarded as it constrains flexibility in design.