Are the div tags set up correctly in code 1, or code 2?

HTML & CSS
1

Which one is set up correctly? Is the div tag supposed to wrap around the button, or not?

My best guess is, div tags don’t always have to wrap around content.

Code 1.)

<div style="margin:0 0 -24px;width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );border: 3px solid #0059dd;"></div>

<button id="playButton" style="display:block; border:none;cursor: pointer;background-color:transparent;color:blue;width:266px;height:24px; " onmouseover=" 
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    player.play();
  } else {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    player.pause();
  }">
 </button>

Code 2.)

<div style="width: 260px;height:18px;border-radius:50px;background-image: linear-gradient(  to right,  #0ff 83px,#0059dd 83px, #0059dd 86px,  #fff 86px,  #fff 174px, #0059dd 174px, #0059dd 177px,  #f0f 177px  );border: 3px solid #0059dd;">

<button id="playButton" style="border:none;cursor: pointer;background-color:transparent;color:blue;width:266px;height:24px; " onmouseover=" 
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    player.play();
  } else {
    playButton.style.cursor = 'pointer';
    playButton.style.backgroundColor = 'transparent';
    player.pause();
  }">
 </button>
</div>
2

It could be either, both approaches are perfectly valid as HTML structures. It really depends on what it is you’re trying to achieve.

3

What’s the difference whether it’s wrapped around or not? Why would someone want to wrap it around, and why would someone not want to?

4

I noticed a difference, with the div tag wrapped around, the the margin of the button which is placed on the style gets all out of sync.

The red is the button which I made red, otherwise it would be transparent…

Wrapped vs.

not Wrapped:

5

A <div> element is just a block level container, with no semantic meaning of its own. You can have a button inside one, you can have a button outside one. It really depends on why you think you are using the <div> in the first place. At the moment, without understanding why you think you are using it, it’s difficult to suggest how it might be used better.

In general <div> tags are used as containing blocks for specific parts of a web page. They could be used as a main content section, a header, a sidebar, parts of a menu, a footer, a modal container, and probably a million other uses. With HTML5 though, there are usually more semantic tags (section, article, aside, header, footer, nav, figure, figcaption, time, mark & main) you could use, that have more meaning for accessibility and WAI-ARIA purposes. <div> though means whatever you decide it means, and that is largely based on what you decide to put inside it.

1 Like
6

That’s why if it’s wrapped, then I wouldn’t need to include display:block. Without it wrapped I need to.

7

I’ve not tested it specifically, but that sounds about right. You’d be putting an inline element inside a block element. Again though, it depends on what you are trying to achieve.

8

You never need display:block on a div because that’s what a div IS.

9

As you’ve been told many times already.

10

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