Is it better to use a div or style content elements when dividing a section on the page?

Question

We were in a code review and were looking at the following mark up that essentially had a border to split up some content above with the title below:

<div class="divider"></div> <h3>Title</h3>

We were told that this is super bad practice and that instead you should style the h3 element with a border top to avoid divitis. Is this true? I understand not wanting to fill your markup with tons and tons of divs, however, in this instance I don't see much of a problem. Also, in this instance, to get the same design there was more lines of css needed on the h3 than the original divider class. So although you save markup, you are not saving styles. Another option is to wrap the h3 in the div so there is no empty markup. In the end I feel as though it is just preference?

Thoughts?

I see no reason to use a div (which has no semantic value) over a proper divider like an <`hr/>` which does. If it's a matter of **styling** the using elements solely for styling is just plain bad IMO. There are better options. — Paulie_D, Aug 02 '19 at 15:12
**Unfotunately**, this question is either too broad, opinion based or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. — Paulie_D, Aug 02 '19 at 15:17

Siamak Vakili · Answer 1 · 2019-08-04T09:56:06.450

Depending on your page layout. In general, an blank element does not cause divitis:

<div class="divider"></div>
<h3>Title</h3>

so that in many front-end frameworks these types of elements are embedded by system by default. finally, It depends on the structure of your page and the purpose of the pages and software. This can be seen from different angles: If your design is such that you use dividers in addition to the titles elsewhere, it is best to use the following structure, as this will keep your hand open:

<hr class="divider">
<h3>Title</h3>

But if these dividers are limited to titles only and not used elsewhere, you can use a structure like this:

<h3 class="border-top"></h3>
<h5 class="border-bottom"></h5>

and

.border-top {
    border-top: 1px solid black;
}
.border-bottom {
    border-bottom: 1px solid black;
}

imLolman · Accepted Answer · 2019-08-02T15:19:16.257

1

Using something like this is a Bad Practice and I strongly believe in that.

HTML already has a built-in horizontal divider called <hr/> (short for "horizontal rule"). Bootstrap styles it like this:

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

You Can customize it and use it wherever you want according to your needs.

edited Aug 02 '19 at 15:19

answered Aug 02 '19 at 15:13

imLolman

540
1
5
15

You didn't offer any justification for _why_ it's a Bad Practice. The fact that HTML already has a `
` should be an argument in favour of using the extra div instead of a style on the header: semantically, the divider is a separate element (eg, `
`) and so the separate div makes more sense. – cbreezier Mar 07 '22 at 05:32

Nathan Fries · Answer 3 · 2019-08-02T15:24:27.807

This really depends on if you are using a CSS framework / library and if you will be working with a team. You need to write understandable and predictable code that the rest of the team will be able to pick up and work on. If <div class="divider"></div> is the standard way per the framework then I would continue to use that.

I also would not consider this "divitis" as that usually refers to a large number of nested <div> elements. Such as

<div class="foo">
    <div class="bar">
        <div class="baz">
            etc...

EDIT: As others have mentioned, which I should have included, is that in cases other than where a framework and / or team are involved, it is generally considered bad practice to not use the spec element. In this case <hr />

Is it better to use a div or style content elements when dividing a section on the page?

3 Answers3