“hr” tag over “border” property

[rr]

Recently when doing a header, where I have the top content, a divisor then the actual content, I’ve wondered what’s the best approach to follow on making that divisor element. [Made this snippet to exemplify the case](http://codepen.io/rafaelrinaldi/pen/dFnGC).
We have the `

---

` tag for stuff like that but I often see people using the CSS `border` property to achieve the same result.
What’s the best approach on this case? Which one has a better semantic? In theory, the tag will be one more element to be rendered so I’m assuming the best way to do this is by using the CSS property.

Anyway, want to hear your opinions on that. Thanks!

[TheDoc]

I’ll go with the CSS border every time. Though I’d do it a little differently than you and put the border on the `

` instead of the `

`: http://codepen.io/ggilmore/pen/52e2978ebcfe2c1ad8f00d42c7dd6343

That way you can have no subheader and the border no longer appears.

[rr]

Yeah, you’re right! I just wanted to exemplify what I was saying. The border going on top of the subtitle makes more sense. I’ve updated [the snippet](http://codepen.io/rafaelrinaldi/pen/dFnGC)!

Thanks.

[Kitty Giraudel]

> In theory, the tag will be one more element to be rendered so I’m assuming the best way to do this is by using the CSS property.

Do it with a border if you can do so, definitely.
If you need something more fancy than a border, use a pseudo-element falling back to a border.
If you need something more fancy than a pseudo-element, use a data-url encoded image.

Edit: “fancier”?

[rr]

Thanks for the input Hugo!

[Author]

Posts