Horizontal Rule: Good or Bad design decision

Question

I have a custom control I built that contains a list of items to be selected. I was concerned that these items would run together seeing as how there can be many different types of actions in this list.

• Create
• Edit
• View

So I made the ability to separate these into groups by using a horizontal rule.

Someone I work with thinks that horizontal rules are a terrible design choice, and wants me to change it to a stylized DIV. I do not really have an opinion other than they are simple to implement. The HR I implemented is styled nicely and looks good.

Thoughts? Are horizontal rules a good or bad design choice?

Answer 1

Bad, and so is using a div simply for adding a horizontal div. Instead, consider putting the line which looks like horizontal rule as a border to the element you want to divide. This will be semantically correct as you are not affecting the structure of the HTML document you are creating.

This article goes in to depth about how div's can be abused by using them as presentation elements only. While sometimes there is no avoiding it, this is not one of those times.

Answer 2

I tend to agree with altCognito on this point, because they're purely presentational (at least they seem to be in every instance in which I've seen them used so far) they should be applied via the css.

There may well be a :after {content: /* hr */;} option, but, honestly, when there's border-bottom, which visually serves (or at least can serve) the same purpose, why bother with the <hr /> anymore?

They can, of course, be styled if you do decide to go with it, although W3 Schools suggest that all the potential styling options are now deprecated. If this is so, and it can't be 'officially' styled, it'd be best to avoid it, I think. Even if only from a purist mentality to maintain validity of your stylesheets.

Answer 3

The only problem with the HR is that it's always there. I'm assuming your co-worker believes that you might not always want the HR to be displayed, and using the DIV and a css solution let's someone remove or change it in one global css file. (although, the HR could be controlled by css also)

The div+css solution isn't a bad one, but for what you describe, the HR solution isn't bad either. I'd just go with whatever is convenient in this case.