[html5] Template questions...

Mon May 16 14:08:19 PDT 2011

DOH, I forgot to "reply to all".

================

Hi Jukka! Thank you for the help, I really appreciate it. :)

See my replies inline below.

On Sun, May 15, 2011 at 11:16 PM, Jukka K. Korpela
<jukka.k.korpela at kolumbus.fi> wrote:
> It lacks a !DOCTYPE and the <title> element. (It is apparently meant to be a
> template, so it should surely be a complete template.)

DOH! Sorry about that! :D

I guess I was trying to avoid any confusion by leaving out the
boilerplate stuff.

When I get home later tonight I will fork Ricardo's version and
include the missing bits. :)

Sorry about that.

> Many people recommend the use of start and end tags for <html>, <head>, and
> <body> elements. This is largely a matter of style. But I think there is
> almost always a reason to use the <html> tag, so that you can put a lang
> attribute there.

Definitely! I did not realize that much of that could be left out.
Hehe, I am not sure if I could even force myself to leave out <html>,
<head> and <body>!

>> 1. What do you think about the usage of the H1? In this case, is it a
>> problem to have multiple per page?
> Using <h1> inside <article> effectively lowers its rank with respect to the
> page as a whole. Though such usage is well-defined and allowed in HTML5, its
> main purpose is to allow inclusing of articles into a document without
> changing their heading markup. This is fine and useful in the long run, but

Ahh, that's why I was asking actually... It would make templating via
my CMS a little easier if I could re-use the same HTML markup from the
"permalink" page (which would be an H1 tag).

> it's just pointlessly risky at present. Current browsers, assistive software
> etc. will blindly treat <h1> as rank 1 heading, without paying attention to
> its appearing inside <article>. You might make them _appear_ as lower-rank
> headings, if you use carefully crafted CSS (and your stylesheet actually
> gets applied), but it's just an indirect way of partially achieving
> something that is best achieved directly.

Great points!

I think this is where one would say "I can't wait for HTML5 to be the norm".

For now, I think I would like to markup my pages with the future in
mind, but I definitely don't want to thumb my nose at the present.

> So it would be safer to write, say,
> <hgroup>
>  <h1>Article title<br>
>  <small>Subhead</small>
>  </h1>
>  <time>...</time>
> </hgroup>

Ooooh, I like that! Seems like a good spot to use <small>.

I am also happy to see that you included <time> in the <hgroup>. I was
under the assumption that <hgroup> could only contain H* tags. I am
glad to see that other tags can be put in there too.

Just out of curiosity, what are you thoughts about using <hgroup> when
there is only one <H*> tag?

For some reason the name "hgroup" makes me think "only headings and
nothing else".

> Some people probably question the use of <br> here (is it really a line
> break in the content itself - well, it's structural division if division of
> ...<snip>...
> present) and should render reasonably even without CSS, and could be styled
> with CSS easily, without unnecessarily complicated selectors.

I dig your example for sure.

I like you point about "render reasonably even without CSS".

When developing HTML/CSS, I usually like to turn off CSS to see how
things look... In the code example, from my first post, the
block-level <a> was looking pretty horrid when styles were disabled.

Before I contacted this list, I was experimenting with something like
this (code abbreviated for sake of example):

<h*>
<a><time>...</time>  /  <strong>TITLE</strong>  / 
<span>SUBHEAD</span></a>
</h*>

Like your example, the above renders nicely when CSS is disabled. Of
course, the <h*> would vary depending on the page (index page listing
articles and/or permalink page).

>> 2. Can I use<hgroup>  within an<a>  tag?
> Yes, but should you

Good question. Probably not. :D

>> 3. Thoughts on wrapping time with an H3?
> In practice, it makes the time notation a 3rd-rank heading on current
> ...<snip>...
> of the heading as a whole (heading group). But as a practical move... it
> means taking risks with little if anything that you could possibly win.

I like they way you think! Thanks for the feedback. :)

> ...<snip>..
> the semantically empty <div>. While that's OK in the long run, well, the run
> _is_ going to be long...

Ha! I personally can't wait!

The more I use HTML5, the more I love it.

HTML5 is definitely a change in thinking for me from HTML4... There's
lots more to think about, semantically, when sculpting a page; this is
like a double-edged sword for a perfectionist like me!

> However, you could use <p> instead of <div> here, as this seems to be the
> HTML5 way in matters like this. And it only costs setting margin: 0 for the
> ...<snip>...
> <time> elements directly. I don't think you need to be more cross-browser
> than that, in such issues, as modern browsers let you style <time> directly.

Awesome info!

I have actually been playing around with Modernizr, so, like you say,
I might just style the time directly.

Thanks so much for the help Jukka (and everyone), I really appreciate it!!!!