CODEWITHSUNDEEP
htmlcss
Kevin
Kevin

Reputation: 19

What is the point of adding extra divs?

What is the difference between these two? What difference does it make if we put another div inside the first div?

<div class="blah">
    <div class="blahInner>
        <img src="pony.jpg">
    </div>
</div>

<div class="blah">
    <img src="pony.jpg">
</div>

Upvotes: 1

Views: 784

Answers (3)

curious
curious

Reputation: 1498

As others have pointed out, extra div acts as a sub-category.

Extending to your example, lest's say there are 2 sub classes (blahInner1 & blahInner2) within the class blah. We can easily manipulate font of blahInner2 only.

<div class="blah">
    <div class="blahInner1">
        <img src="pony.jpg">
        This is 1st caption.
    </div>
    <br/>
    <div class="blahInner2">
        <img src="pony.jpg">
        This is 2nd caption.
    </div>
</div>

<style>.blahInner2{color: red;}</style>

Upvotes: 1

Tanaka
Tanaka

Reputation: 301

Multiple divs allow you to customise your HTML with different effects based on properties assigned to different CSS attributes. Additionally, the use of multiple divs allow you to add different kinds of CSS and, jS to elements of your HTML page. Rather than have all your CSS within one selector, you can then spread it across multiple divs which allows you or someone else working on your code to easily make sense of it.

You may also want to pair different sets of styling for different parts of the webpage, and having multiple divs will enable you to easily call the same divs and form combinations of the attributes from different selectors. Ultimately, you could just use them as follows,

<div class="art" id="dart">
Text
</div>

OR with multiple divs as shown below.

.dart {
  color: white;
}

#art {
  background-color: #ADFF2F;
  width: 115px;
  height: 20px;
}
<div id="art">
  <div class="dart">
    I am dummy text
  </div>
</div>

Upvotes: 2

NathanielSantley
NathanielSantley

Reputation: 293

Essentially, there is no difference and is therefore useless unless you use it in your linked CSS or JavaScript.

The difference is that there is another <div> element for other web languages like CSS or JavaScript to act upon.

It gives the other languages a chance to add special positioning, animations, and styles to the containing <div> element.

I hope this answer was informative.

Let me know if you have any complaints.

Upvotes: 1

Related Questions