Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Correct usage of HTML5 <hr> tag

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)

like image 837
Gui Prá Avatar asked Aug 18 '10 15:08

Gui Prá


People also ask

What is the use of tag hr in HTML?

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Which is the correct representation of HR tag?

HTML - <hr> Tag The HTML <hr> tag is used for creating a horizontal line. This is also called Horizontal Rule in HTML.

Can we use HR tag in HTML5?

The attributes of the <hr> tag are not supported in HTML5, instead, we use CSS styles.

Should you use hr tag?

It's proper to use it when you have, say, several paragraphs with two distinct themes. If you'd like to otherwise separate themes among images and content, I believe this is also appropriate. The new use of hr seems to just be for distinguishing topics within HTML.


1 Answers

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…

like image 196
Ben Avatar answered Sep 30 '22 17:09

Ben