[Pro] default h1 font-sizes for html5 containers

Off Topic
1

While taking a recent look at default browser font sizes, I discovered something I hadn’t known… that browsers are now defining h1 elements at a different size depending on the html5 container they are in. If these containers are nested (I’ve been nesting them, and I think many are designed to be used that way) the h1 size-diminishing is multiplied.

I think this must be a way of addressing the way html5 allows multiple h1 headers in a page, which seems mostly logical. The compounded shrinking could be a problem for some, but is easily overridden with CSS resets or normalizers - which is probably why I haven’t seen it before.

http://cssway.thebigerns.com/workbench/heading-elements-in-html5/

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

2

Interesting -

I got honestly serious problems in understanding and proper use of the “HTML5 multiple H1” anyway.

It was so clear until now:

Only once, representing the page-title (which makes sense to me).

Now each section can contain the H1. But don’t overdo it???

What does it mean, overdo (3 times 10times 1000times?)

A quick found here:

Cheers

Thomas

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

3

Thomas - in a non-html5 page I would agree with you… one h1 heading per
page, with subheds to fill out the topical outline for the page.

Because html5 pages allow for meaningful ways to section or divide a page,
h1 headings for different sections can be appropriate - and this makes
sense to me. What it really tells me is that h1’s have a specific, topical
value within the context of the sectioning elements - which themselves have
semantic value in the page outline. What it emphasizes to me is that we no
longer have to robotically apply the same semantic logic to the page - we
can, and that won’t hurt, but if we need a less “orthodox” way to
structure our content, we now have extra tools and permission to deviate
from the previous gospel a bit.

The implications of this new (to me) CSS covering h1 children of these
html5 sectioning elements is this: that any dilution is only a visual one

  • which I think is somewhat wasteful to impose on browser defaults, but
    whatever. I do think this reinforces the semantic value of the h1,
    while challenging content designers to think about their content in less
    pedantic ways.

And this is good. Designers can be “traditional” about content development
(one h1, followed by descendent headings). They can also be flexible with
content that is less traditional or more complex (one h1, followed by
descendent headings - for each discrete page section). Where it will go
bad is in the hands of web designers who mistakenly think “if h1 is good,
more h1’s must be better”. Which is bad, but in a Darwinian way this bad
content design helps define good content design. Just as in nature, there
will be winners and losers.

So really, same approach as before - just extended within each theme that
your page supports. IF your page has more than one discrete theme - and not
sub-points of the same theme - then section elements let you create that
structure semantically. Then, within these elements we should follow the
same h1, h2, h3 structure we use for the page. The challenge will be for
many to be honest about the thematic structure of their pages. But for
anyone who isn’t thinking like that, then treating the whole page with that
traditional heading hierarchy is still best.

I know, clear as mud :slight_smile:

–
Ernie Simpson

On Fri, Jan 17, 2014 at 5:18 AM, Thomas Kimmich email@hidden wrote:

Interesting -

I got honestly serious problems in understanding and proper use of the
“HTML5 multiple H1” anyway.

It was so clear until now:

Only once, representing the page-title (which makes sense to me).

Now each section can contain the H1. But don’t overdo it???

What does it mean, overdo (3 times 10times 1000times?)

A quick found here:

http://www.youtube.com/watch?v=GIn5qJKU8VM

Cheers

Thomas

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

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

4

I remember seeing this effect a year or so ago when working on a page in a text editor. It makes sense in the context of HTML5’s new and richer page outline. Time was, you had one outline for the page, and if you were thinking about the page the way the original authors of HTML (long ago, at CERN) meant for you to do, made perfect sense:

h1
	description of that
h2
	sub-topic description
h2
	another equal sub-topic described here
	h3
		a sub-sub topic explained, directly related to the preceding h2

But now, each of the major page divisions (header, section, article, footer, etc.) get their own local context, and the page outline gets richer and more intelligently subdivided. Header and footer no longer mean what they did in a Joomla! template, where they literally were the top and bottom of the entire page. An article (one of many on the page) would naturally have a header and footer of its own, and this makes it easy and semantic to describe that local hierarchy.

Another neat benefit of this is as follows: Imagine you are working on a blog (as you do). When laying out an article, you need to worry about two different contexts – when the article is seen on the home page as the “latest thing”, and when it is seen in the archives, as a single page in its own right. Are these two different things? Are they the same thing with two different contexts? HTML5 says, let the presentation drive that. If there’s an outside of a the

inside that will look different than when the is inside the . It’s a neat trick. The browser defaults make this hierarchy clear, in my opinion.

Walter

On Jan 17, 2014, at 9:02 AM, Ernie Simpson wrote:

Because html5 pages allow for meaningful ways to section or divide a page,
h1 headings for different sections can be appropriate - and this makes
sense to me.

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

5

Because html5 pages allow for meaningful ways to section or divide a page,
h1 headings for different sections can be appropriate - and this makes
sense to me.

Got you. I probably always need an example to imagine what is meant.

Now I got it:

For example “One Page Design”. And you know what? I’m currently planning the new design of our company page which will be something like that (a bit like this draft -it’s my home-town btw http://kimmich-dm.de/templates/nze/index.html .

So an excellent possibility to keep that in mind and naturally give it a try.

I love modular thinking.

Cheers

Thomas

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

6

For example “One Page Design”. And you know what? I’m currently planning
the new design of our company page which will be something like that (a bit
like this draft -it’s my home-town btw
http://kimmich-dm.de/templates/nze/index.html .

Thomas, that is one sweet page :slight_smile: I love it!

–

–
Ernie Simpson

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

7

~>I’m currently planning the new design of our company page which will be something like that…

Really nice Thomas

I am assuming that this is a WIP as the navigation on iPhone doesn’t really work because it is fixed and obscures all the page content.

D

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