In HTML5 headers can be nested in sections. Would this change the rules regarding h1-h6

[Alex Kessinger]

In HTML5 you can nest headers in sections. This helps to create a
document outline of your website. In such a case it would probably be
okay to style headers differently that are inside sections. Do you
think it would make sense to allow for different styles given that a
header is inside a section element.

An example of nested headers would be something like the following

<h1>Document Title</h1>
<section>
<h1>Section title</h1>
</section>

Which if you parsed as an outline would be

1. Document Title
1. Section Title

Also I am not sure why it would be problematic to port content around
if you ended up with a consistent effect based on nesting in section
elements.

If you have document level h1 and you set it at 20px

h1 { font-size:20px; }

and you want all h1's nested in section elements to be smaller.

section h1 { font-size:18px; }

if you moved an h1 from one outside a section, to inside a section.
You would expect the H1 to be smaller.

Is there more to the portability issue that I am missing?

[Josh]

I agree with Alex. The rules look very, very wrong for the way
headings are supposed to work within html5 section-like elements. A
single rule for each of h1...h6 is completely inadequate to correctly
style headings and subheadings of section-like elements, even when
using relative sizes. In fact, it takes about 70 qualified heading
selectors to correctly specify the appearance of an h1 in the sixth
level of nested section-elements (see
https://github.com/cboone/hypsometric-css/blob/master/html5/html5-defaults.css).
For those of us who are quite correctly using the section model with
headings and subheadings, CSS Lint is producing a huge volume of
senseless warnings -- 790 for just the heading selectors in the html5-
defaults stylesheet, and 70 for one that just styled h1 elements in
nested section elements.

[Nicholas Zakas]

The reasoning is really more for Nicole to answer than me, however I
can say that you can choose to turn off the rule if you don't agree
with it, thus eliminating what you're considering to be extra
warnings.

Regards,
Nicholas

On Aug 30, 1:58 pm, Josh <joshl...@gmail.com> wrote:
> I agree with Alex. The rules look very, very wrong for the way
> headings are supposed to work within html5 section-like elements. A
> single rule for each of h1...h6 is completely inadequate to correctly
> style headings and subheadings of section-like elements, even when
> using relative sizes. In fact, it takes about 70 qualified heading
> selectors to correctly specify the appearance of an h1 in the sixth

> level of nested section-elements (seehttps://github.com/cboone/hypsometric-css/blob/master/html5/html5-def...).

[Nicole Sullivan]

Alex,

Even if you are using sections, I wouldn't style headings based on how
many sections deep they happen to be. On most sites, this will end up
being arbitrary as different visual components may be found in
different parts of the site. In addition, those styles won't be
portable, so you'll end up repeating yourself.

Look at how many different heading styles you have (font-sizes give
the best clue) -- and then try not to duplicate them. This means that
when you have a style that will make your text 16px, you never (ok,
rarely) want to duplicate that style. (this follows the DRY principle)

Let's look at an example:

h1 {font-size: 36px}
section h1 {font-size: 24px}
section section h1 {font-size: 22px}
section section section h1 {font-size: 18px}
section section section section section h1 {font-size: 16px}
section section section section section section h1 {font-size: 15px}
section section section section section section section h1 {font-size:
14px}
section section section section section section section section h1
{font-size: 13px}
section section section section section section section section
section h1 {font-size: 12px}
section section section section section section section section
section section h1 {font-size: 11px}

What happens when you want a 14px heading, but it's in a part of the
site that is only nested two sections deep? Are you going to add
unnecessary section tags to get it to look right? Will you create a
duplicate selector?

What if, semantically speaking, you need to add an additional section
to a bit of html? That will unintentionally change the way your
headings look.

I recommend abstracting site wide headings into classes because then
they are portable, predictable, and dry. You can call them anything
you like. Jeremy Keith recommends something like:

.Alpha
.Beta {}
.Gamma{}
.Delta{}
.Epsilon{}
.Zeta{}

or

.tera {}
.giga {}
.mega{}
.kilo{}
.hecto{}
.deca{}
.deci {}
.centi{}
.milli{}
.micro{}
.nano{}
.pico{}

I keep it simple with:
.h1{}
.h2{}
.h3{}
.h4{}
.h5{}
.h6{}

It doesn't really matter what system you choose as long as it is
something easy for your team to remember.

Then, no matter how many section levels deep your heading is nested,
you can make it look just how you want:

<section>
<section>
<section>
<h1 class="kilo">My heading </h1>
</section>
</section>
</section>

And you can move that piece of code around, and it will still look the
way it was designed to.

Whether you are using html5 for sections or not, you don't want to
repeat code or have it be really unpredictable, so I think the rule is
still right, even if you are using sectioning elements.

If you don't mind duplication or unpredictability (say maybe for a
brochureware site that won't change much), then you can easily turn
that rule off.

Does that help?

Nicole

[Nicole Sullivan]

I wrote an article about headings and sections:

http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/

Nicole

--

Nicole Sullivan

Object Oriented CSS  http://wiki.github.com/stubbornella/oocss

Smush it  http://smush.it

Website  http://stubbornella.org

Tweet!  http://twitter.com/stubbornella

Book  Even Faster Websites with O'Reilly

[Arunan Skanthan]

But what if you had a reset which reset the h1-h6 elements and then you set the font-size again... this gives the same error... or is having reset not recommended in OOCSS? Maybe there can be a rule for this

P.S: I can't seem to join the OOCSS google-group (Off-topic)

--
@askalot
Website: http://arunanskanthan.com
---
"Ariels in the sky. When you free small mind, you free your life..."

[Nicole Sullivan]

I'm thinking of moving oocss to something more like the normalize.css model. We won't use a heading reset anymore for font sizes.

I've been away on vacation, I'll approve you joining the google group as soon as I can find the email.

Thanks

Nicole

[alex kessinger]

Thanks for taking the time to address this. I can think of a couple
hypothetical reasons to use something like section h1, like academic
papers or books(ePub), but they're hypothetical. I will keep my eyes
peeled for a solid use case in the wild.

[Nicole Sullivan]

On Tue, Sep 6, 2011 at 9:26 AM, alex kessinger <void...@gmail.com> wrote:

Thanks for taking the time to address this. I can think of a couple
hypothetical reasons to use something like section h1, like academic
papers or books(ePub), but they're hypothetical. I will keep my eyes
peeled for a solid use case in the wild.

Agreed, when something more closely resembles a document, academic paper, or book the descendent selector method of styling is probably simpler. 

Nicholas and i have talked about having custom rulesets, so someone could publish the "document" ruleset, or the "mobile" ruleset. Or even the "alex's special sauce" ruleset. Our first priority has been to get a decent number of rules in place, so we'll have to see when we have time to add rulesets.