Is it bad practice to use empty div tags?

I have a div here that catches the the 2 inputs with the button.

Is there a different way I could have done that?
https://jsfiddle.net/yhb9m76s/87/

 <div>
      <button id="button">Play / Pause</button>

      <div class="info">
        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
        <input id="sent" type="submit" value="Set" />
      </div>

    </div>

Is it bad practice to use empty div tags?

An empty element is an element with no content (seems fairly obvious), such as <div></div>.

I see no empty divs in your code. Perhaps you code clarify the question or change the title of the topic.

Off Topic:
There are elements which are always empty:

Those are the empty div tags I was referring to.

Unless you wouldn’t consider them as empty div tags?

// empty  <div> //

      <button id="button">Play / Pause</button>

      <div class="info">
        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
        <input id="sent" type="submit" value="Set" />
      </div>

 // empty   </div> //

That is a single div, and is in no way empty.

<div> <!-- opening div tag -->

      <button id="button">Play / Pause</button>

      <div class="info">
        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
        <input id="sent" type="submit" value="Set" />
      </div>

</div> <!-- closing div tag -->/
1 Like

Thank you for the clarification, and understanding.

1 Like

Opening and closing HTML tags are the most basic elements of any Web page. If you do not have a thorough grasp of how these elements fit together, you will never make progress.

1 Like

What does that outer div do?

What styles are applied to it?

What happens if you remove it.?

You can see that it does nothing at all and has no styles applied to it so can be removed and you will save a div.

Does that mean you don’t need it?

It all depends!

If it helps you to organise your code and separate components into neat blocks then that’s fine and will not really harm anything. However if you did this for everything then you would have hundreds of extra divs all over the place.

Divs do what they say on the tin; they basically DIVide the page into manageable components.

Normally though you would not have a div that didn’t have an identifier surrounding a block of code because that would not let you target inner elements if required.

I would actually remove the inner div and change your code to this:

  <div class="panel-top">
      <button id="button">Play / Pause</button>
        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" >
        <input id="sent" type="submit" value="Set" >
    </div>

Then add this css.

.panel-top{display:flex;}
#input{margin:0 2px 0 auto;}

(Note html5 does not need the trailing slash />)

1 Like

What happens if you remove it.?

Removing that div causes this to happen.

https://jsfiddle.net/yhb9m76s/92/

I’m curious as to why the inner <div></div> tag set isn’t a set of <form></form> tags instead - that would seem more useful from a semantics PoV.

That’s how it looked in IE11 anyway :slight_smile:

You were just lucky in other browsers and relying on an undefined behaviour. You floated .info to the right in an element that’s width was defined by its content. Modern browsers are ok but IE11 chokes on it.

It could have been fixed with an old table hack but should only be used for very specific situations.

.tcell {
  display: table-cell;
  vertical-align: middle;
  width:1px;/* fit content only*/
}

The flex version I gave you above works in IE11.

You were also lucky with the float right because floats need to come first in the html before the elements they float against unless they are inline elements on the same line. You were also lucky in that the play button was the same height as the inputs otherwise the parent div would not have encompassed both although again it probably made no difference in this case but may have caused problems later on.

As you see that ‘empty’ div was actually aiding to the structure but you could have done the same without it if you had addressed the other elements instead. I was wrong when I said it did nothing. It was just setting a block element around inline elements.

4 Likes

For form control elements to be deemed ‘successful form controls’ they must be inside a form tag. Form controls are however allowed oustside a form tag but controls outside a form cannot be successful controls. (html5 expands on this and changes terms slightly.)

Generally when building an interface reliant on JS only then you would not use a form tag as you are not posting anything to the server

Of course most people would ensure that their pages work even when js is disabled and having the data submitted via the form tag if js is not enabled allows the action required to take place anyway (albeit at a slower pace).:slight_smile:

4 Likes

I added a container to this one:
https://jsfiddle.net/7dj6crmL/20/


.container {
  width: 520px;
}

.container-left {
  float: left;
  margin: 0;
}

.container-right {
  float: left;
  margin: 0 0 0 145px;
}


    <div class="container ">
      <div class="container-left">
        <button id="button">Play / Pause</button>
      </div>

      <div class="container-right">
        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" /><input id="sent" type="submit" value="Set" /></div>

These are big differences.

whitespace Removed:
https://jsfiddle.net/7dj6crmL/20/

      <div class="container-right">
        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" /><input id="sent" type="submit" value="Set" /></div>

whitespace Left in:
https://jsfiddle.net/7dj6crmL/23/

      <div class="container-right">
        <input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;" />
        <input id="sent" type="submit" value="Set" /></div>

Magic number alert !!

There is always white space in the html between inline elements (or inline-block elements). Otherwise you would not be able to write words withoutthemlookinglikethis.

You need to use methods that suit the purpose and your continual ‘fiddling’ once you have been given an optimal answer just confuse you as you go around in circles back to the place where you started and receive the same information yet again.

The flex answer I gave you removes the white-space automatically, needs no magic numbers and uses less html. What more could you ask for:)

Inline elements always have whitespace nodes around them by default. If you change their display to block or flex or table then the white-space collapses. You can also collapse white-space by pushing the tags together in the html but that is not a solid way to build as a code formatter will break it straight away.

1 Like

Is it better to remove the white-space from the html, or use a negative number?

margin-left: -4px;
https://jsfiddle.net/w7cmthgv/200/

svg {
  margin-left: -4px;
}

white-space Removed:
placeholder="Search"><svg id="sent"
https://jsfiddle.net/w7cmthgv/215/

Not another magic number !!!

Who said 4px will cure it for everyone? The white space will dependent on a number of factors such as font-size and browser interpretations. Do not go down that route.

Use a method that doesn’t rely on magic.

Just in case I forgot to mention it " Don’t use magic numbers" :slight_smile:

2 Likes

Then, removing the white-space from the html is a good way to do it then.

NO!

Removing the white-space in the html itself is a fragile method that will break as soon as you format the code in an editor or you edit the code and forget why everything was stuck together.

that will break as soon as you format the code in an editor

It didn’t break in the code editor for me.
https://www.freeformatter.com/html-formatter.html

I gave you sound advice so use it as you feel fit.

I explained why it was not the best method to rely on how the html looks to decide how your page looks.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.