I'm writing a new webpage for a company and I have (a sane subset of) HTML5/W3C recommendations in mind.
After reading the semantic meaning of <hr />, I was wondering if this was a good place to use it:
<section name="historyItem">
<h2>2002</h2>
<p>Dolorem ipsum dolor sit amet in 2002, consectetur [...]</p>
<hr />
<ul>
<li><a href="#">Link A</a></li>
<li><a href="#">Link B</a></li>
</ul>
</section>
My line of reasoning is that, yes, that <hr /> represents a thematic change from section description to section links, but I'm unsure about that.
Maybe "thematic change" means to have a new paragraph later on another subject, and thus my example wouldn't be "correct". What do you think?
(ps.: Yes, that <ul> is CSS-styled to fit a single line and look cool)
I see what you mean. But personally I just wouldn't bother. Ask yourself why you're using the tag in the first place. If you want to delineate a change between the paragraph and the links, then in terms of pure mark-up I don't reckon it's required. If it's about the look and feel of your page (i.e. you want a rule demarcating the two areas), then again I'd question its usefulness, given that you can apply a border to either the paragraph or unordered list tags.
Of course, given that this is html5, you could go the whole hog and use the <section> tag…
Thematically speaking, <hr> means the end of one "section" and the start of "another". Essentially these should be appearing after your <section> tags, not within. Although semantically speaking, it doesn't really matter where you want to use them.
If your list of link items are relevant to the items ABOVE the <hr> tag (meaning relevant to your other elements within the <section> tag, then I do not recommend using <hr> there. Instead, use CSS to differentiate border and underlines.
If you'd like additional reference, I've located this for you:
http://html5doctor.com/small-hr-element/
Cheers,
D
