These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:24 pm Advanced search

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

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!

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

Postby McShaman » Thu Jun 23, 2011 1:40 am

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.
McShaman
<h6>
 
Posts: 2
Joined: Thu Jun 23, 2011 12:40 am

Re: What do you do when you cant follow HTML5 best practices

Postby Xdega » Thu Jun 23, 2011 6:07 am

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.
Xdega
<h2>
 
Posts: 124
Joined: Tue Mar 01, 2011 6:30 pm
Location: USA

Re: What do you do when you cant follow HTML5 best practices

Postby McShaman » Thu Jun 23, 2011 6:17 am

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.
McShaman
<h6>
 
Posts: 2
Joined: Thu Jun 23, 2011 12:40 am


Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 0 guests