Geek Answers Handbook

Horizontal rule: good or bad design decision

I have a custom control that I created that contains a list of items to select. I was worried that these elements would work together, as there could be many different types of actions on this list.

  • Create
  • Edit
  • View

Thus, I made it possible to divide them into groups using the 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 really have no opinion, other than the fact that they are easy to implement. HR implemented by me is beautifully designed and looks good.

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

+6
html design
source share
3 answers

Poor, and so a div is used just to add a horizontal div. Instead, consider making the line that looks like a horizontal rule the border for the element you want to split. This will be semantically correct, since you do not affect the structure of the created HTML document.

This article talks about how you can abuse a div using them only as presentation elements. Although sometimes they cannot be avoided, this is not one of those times.

+6
source share

I am inclined to agree with altCognito on this issue, because they are purely presentational (at least they appear in all cases in which I have seen them so far), they should be applied via css.

Perhaps there is an option :after {content: /* hr */;} , but honestly, when there is a border below that visually serves (or at least serves) the same purpose, why bother with <hr /> ?

They can, of course, be stylized if you decide to go with it, although W3 Schools suggest that all possible styling options are now out of date. If so, and it cannot be “officially” styled, it would be best to avoid that, I think. Even if only from the purist mentality, to preserve the validity of your style sheets.

0
source share

The only problem with HR is that it always exists. I assume that your colleague believes that you do not always want HR to be displayed, and using the DIV and css solution, allow someone to delete or modify it in one global css file. (although HR management could also be controlled using css)

The div + css solution is not bad, but for what you are describing, the HR solution is also not bad. I would just go with what is convenient in this case.

0
source share

More articles:


All Articles