Is it good practice to wrap a single element in a container?

Question

I am new to UI development and am currently reading how to style a form in a responsive way. By googling I found this tutorial https://www.w3schools.com/howto/howto_css_responsive_form.asp (I know the reputation of w3schools isn't good but that was the only search result actually addressing my question).

Code from the tutorial is below:

 <div class="container">
  <form action="action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Country</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subject</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>

In this tutorial, labels and input elements are individually wrapped in divs. The question is whether there is a good reason to do something like this. Since you could just give the labels and input elements a class themselves I do not really see why you would wrap them in a container. But since I am new to web development I might be overlooking something.

Note that "is it good practice" is not the same as asking "am I currently making use of it?". The question body here seems to assume that these are equivalent. More commonly "is it good practice" equates to "in the future, will I regret not having done so today?" — Flater, Nov 12 '23 at 22:10

score 6 · Accepted Answer · answered Jan 23 '22 at 14:52

Correct, these particular divs are not strictly necessary. I created a JSFiddle example that deletes these divs from the example, and the layout still works (after setting the correct box model): https://jsfiddle.net/wvL3tn52/

Some people like adding extra divs, so that each HTML element only performs a single task for the layout: one div for arranging content vertically, another div for dividing the space horizontally, and then the label or input elements for providing content. It is perfectly fine to do things that way, but also perfectly fine to skip them. I wouldn't add those extra divs when writing the CSS and HTML myself.

Perhaps the author of that example was emulating Bootstrap CSS conventions, where such extra divs are pretty common.

Note that articles on W3Schools have very … varying … quality. Don't take anything on that site too seriously. If you're interested in reference-level material, go to MDN instead. If you want tutorials on specific techniques, CSS-Tricks is a great site. But W3Schools has grown into a very comprehensive collection of guides to common web development tasks, so it's a great starting point.

It might also be worth noting that the presented technique to create responsive layouts – percentage widths and float: left – have fallen out of fashion since CSS 3. Nowadays, I would create such layouts with Flexbox or CSS grids.

how can you avoid percentage widths with flexbox/grids? If I have labels and input elements, and want the input elements aligned I have to determine where they start (which is probably some form of "the second half" of the space). I looked a bit into grids but they seem to require fractions (fr) too which seems equivalent to percentages. And flexboxes are one dimensional so I am not sure how applicable they are — Felix B., Jan 23 '22 at 15:19
@FelixB. The problem isn't percentages, but the use of float. Using floats is great for displaying an image at the side of a paragraph of text, but flexbox is better (and more flexible!) for general layout tasks like creating a horizontal stack of elements. For example, you don't have to assign a width for every element. And you can set minimum sizes for an element instead of using media-queries that only take into account viewport width. The Solved by Flexbox website has a couple of nice examples. — amon, Jan 23 '22 at 15:50

score 1 · Answer 2 · answered Nov 11 '23 at 12:45

Over-reliance of the DIV tag hearkens back to a pre-HTML5 era.

Before the HTML5 standard there where a great many semantically meaningless tags in HTML. When we moved towards a semantically rich markup language we moved away from these meaningless tags.

The Bootstrap way of putting content in a container, row, and column div is maybe still an acceptable reason to use the meaningless div tag.

For the most part we can use the semantic rich tags in the place of div or span tags. Using the footer, section, or nav will make your html documents much easier read to the machines that would typically consume HTML documents.

score 0 · Answer 3 · answered Nov 12 '23 at 13:24

In general: Will your single element always be a single element, or could that change? For example you display a competition winner. That’s a single element. But you might want to change that to display the winner and two runners up. At that point it would be useful to have a container. If that’s likely to happen then you might put your single element into the container right now.

Is it good practice to wrap a single element in a container?

3 Answers3

Over-reliance of the DIV tag hearkens back to a pre-HTML5 era.