HTML5 and Classes

Legacy Dynamo
1

I’ve been going back and forth on this for too long.

Assuming more or less equal browser support (whether native or with the help of a shiv or Modernzr) would you choose to add a class (or id) to the new HTML5 elements or would you instead use a div as a style hook, as recommended by so many?

For example:

<header class=“styleOne”>
    <h1></h1>
    <p></p>
    <nav class=“myMenu"></nav>
</header>

<section class=“styleTwo”>
    <h2></h2>
    <p></p>
    <ol></ol>
</section>

<aside id=“myID">
    <p></p>
</aside>

Or would you do what many articles suggest as the “correct” method and use an inert

as a styling and/or positioning hook, thus keeping the new tags blissfully unadorned:

<header>
    <div class=“styleOne”>
        <h1></h1>
        <p></p>
        <div class=“myMenu”>
            <nav></nav>
        </div>
    </div>
</header>

<section>
    <div class=“styleTwo”>
        <h2></h2>
        <ol></ol>
    </div>
</section>

<aside>
    <div id=“myID”>
        <p></p>
    </div>
</aside>

I understand why using these new elements purely for styling purposes is not recommended, eg, using a section element simply to add a border around some content. It’s bad, I get it. That’s not its purpose. But if I’m already correctly using an element for proper semantic structure and doc. outline where’s the harm in also using it as a style hook by adding a class?

Todd
http://xiiro.com

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

I agree - I don’t think there’s anything wrong with using what is available
for styling - if the element already exists for good semantic reasons, why
not take advantage of it’s presence for presentation?

Oddly, my own construction method is this div-container for content within
section elements… which just seems convenient to me, not because somebody
says so.

Style away!

–

–
Ernie Simpson

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I would hang your styling clue on the ID or class of the element, and not worry about the tag name unless it was significant (if there was more than one meaning to the class, and the tag helped disambiguate that). I don’t think there is anything ridiculously wrong with using these tags as styling hooks – for example, I have always put text-align: center in my footer, whether it is a div.footer or a footer.

Walter

On Jan 21, 2014, at 7:04 PM, Todd wrote:

I’ve been going back and forth on this for too long.

Assuming more or less equal browser support (whether native or with the help of a shiv or Modernzr) would you choose to add a class (or id) to the new HTML5 elements or would you instead use a div as a style hook, as recommended by so many?

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

This seems like gilding the lily. I wouldn’t add the additional layers of container there unless they were actually important to the design or were the only way out of a difficult styling corner. Less is more.

<header class=“styleOne”>
  <h1></h1>
  <p></p>
  <nav class=“myMenu”></nav>
</header>

Walter

On Jan 21, 2014, at 7:04 PM, Todd wrote:

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

I agree with you both, and more often than not that’s exactly what I’ve been doing - dressing up the new elements and not adding divs simply as hooks - for the past couple years. No problems for me.

That said, I’ve read a lot of posts about the evils of doing this very thing. But the more I think about it the more it seems the so-called problems people are referring to are centered around an all-too-frequent arbitrary use of these new tags for presentation and not for their intended purpose. In other words there’s a tendency to use them as divs which of course, they are not. Not at all.

Anyway, I thought perhaps I was missing something but I don’t think I was. Not this time.

Todd

I would hang your styling clue on the ID or class of the element, and not worry about the tag name unless it was significant (if there was more than one meaning to the class, and the tag helped disambiguate that). I don’t think there is anything ridiculously wrong with using these tags as styling hooks – for example, I have always put text-align: center in my footer, whether it is a div.footer or a footer.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options