It’s interesting that they are being used in this manner, as opposed to being removed totally… I’d like to see how this is treated by the design community. I think it’s pretty interesting.

Thank you for the clarification. Still, I remember reading somewhere on this site that the <section> element cannot be styled and, if styling is required, to use a <div> so it still remains that – for stylistic presentation a second element must be used to visually divide content. Sectioning Content elements thematically divide content “sections” for the outline but not for visual presentation.

How does Ian find the time?

Thanks again.

Sean

So I asked Hixie and found out that my ‘stricter’ reading of the <hr> element was incorrect (see changes above). The main difference between <hr> in HTML4 and HTML5 is that it is now media-independent, so it represents a section or thematic break regardless of presentation. While <hr> shouldn’t be used to separate <section>s of a site, this is because the sectioning and heading elements already have the semantics of indicating a thematic break (so <hr> is unnecessary), not my incorrect assumption that they weren’t paragraph-level content.

Hope that helps.

Yes, the Conformance Check may throw an error message someday. I prefer using <hr> between sections for ease-of-use because setting top/bottom borders (with padding + a background image + adding a class on the appropriate last paragraphs in the section) becomes troublesome for me; and, it’s a branding/aesthetic/design thing: An example.

Sean

@Steph — the new definition means there’s less need of them than there used to be, but you can see their use in the sample article by disabling CSS. The default browser rules aren’t pretty, but they do indicate there’s a change going on.

@Sean Fraser — the paragraph-level bit in “The hr element represents a paragraph-level thematic break” is defined as:

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography, but can also be used for more general thematic grouping. (WHATWG specification)

Apparently it doesn’t have to be between <p> paragraphs, but I read this as it’s supposed to be between paragraphs Of course nothing terrible will happen if you use it between sections, but it’s possible that the validator may flag this at some later date.

Out of curiosity why do you want to use <hr> between sections rather than, for example, a top or bottom border on <section>?

The contexts exceed the hr use in paragraphs only.

@Patrick — the justification is removing solely presentational elements, and making elements media-independent. Making up new elements would be nice, but repurposing has the advantage of support in current browsers (IE, cough). Also while e.g. <small> may not be as nice as <©>, that’s actually what many people use <small> for these days.

Regarding <div> the spec states The div element has no special meaning at all (#), so there’s no explicit separation role, although there would be with <section> or <article>. Finally <hr> is for a “thematic break,” which may be different to what you mean by “separation of blocks of content”.

@Aaron Witherow — try finding a WYSIWYM plugin instead (WYM Editor, WMD), or at least customising a WYSIWYG plugin to only show semantic options and produce the code you want. I’d also recommend producing a style guide with instructions on how to get the effects the client wants in the plugin. If you’re allowing direct HTML input… well… Finally while people will surely write crap markup in HTML5 too, that’s what they’ve always done and the web still works. I think we just have to do our best.

@dkdenz — thanks for pointing out that IE7 and lower are crap at doing image replacement on <hr> (surprise!). The old-skool technique is to apply the style to a wrapper <div> and hide the <hr>, but I’ve updated the article with a link to a workaround you can try. You could also just hide the <hr> in an IE7-and-lower stylesheet

@Joannie — Why are you bothered? It sounds like the realigned definition matches your use!