[html5] Template questions...

Sun May 15 23:16:08 PDT 2011

15.5.2011 22:30, Micky Hulse wrote:

> https://gist.github.com/973444
>
> Do you see anything out of the ordinary?

It lacks a !DOCTYPE and the <title> element. (It is apparently meant to 
be a template, so it should surely be a complete template.)

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.

> I am trying to build an index
> page for blog entries.

It should have a main heading, apparently inside <header>. Almost all 
pages should have a main heading, just as almost every book should have 
a name.

> 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 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.

So in practice, the main heading of an article is best written as <h2>. 
The subheadings could be written as <h3> and <h4> when they are all 
wrapped inside <hgroup>, by the current HTML5, but the <hgroup> is under 
suspicision, so to say, and no particular browser support can be 
expected at present, if ever.

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

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 poems and postal address to lines is) as well as the meaning of 
<small> (does it mean "side content" relative to the enclosing element 
or absolutely). But this markup should work reasonably with "outlining" 
algorithms (which are a great idea though still of little practical 
value at present) and should render reasonably even without CSS, and 
could be styled with CSS easily, without unnecessarily complicated 
selectors.

> 2. Can I use<hgroup>  within an<a>  tag?

Yes, but should you

> 3. Thoughts on wrapping time with an H3?

In practice, it makes the time notation a 3rd-rank heading on current 
browsers, implying default rendering that might even be misleading and 
that would require extra measures to fix. If you could rely on <hgroup> 
really working, then it would be OK to use <h3>, since the time would be 
part of the heading of the article, just indicated as being lower in the 
hierarchy 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.

> The only reason I am using H3
> is so I can style the<time>  tag using CSS2.1 and have that styling
> work in older browsers (does that make sense?)

No, that does not make sense. Even <div> would be better. Generally, for 
the sole purpose of styling something you would like to appear as a 
block, <div> is best, as it has been for a long time. Since <div> has no 
default rendering beyond display: block, it is ideal for the purpose. 
HTML5 discourages such use, recommending that other elements be used in 
favor of the semantically empty <div>. While that's OK in the long run, 
well, the run _is_ going to be long...

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 <p>, to remove the default top and bottom margin, or setting 
some desired values for those margins.

On the other hand, if you use

<script>
document.createElement("time");
</script>

before any CSS code or references to CSS code, then even old versions of 
IE will recognize the <time> markup to the extent that you can style 
your <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.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/