Nameless Div

In the <style> section is where you name your CSS classes, so for example if I want a div to have a solid red border that is one pixel in width I would code it like this:

<style>

.red-div {border: 1px solid red;}

</style>

And then this in my HTML:

<div class=”red-div”>Jason Learns Code</div>

While looking at code I’ve come across scenarios where the code writer did not declare anything about the div’s class in style section. So the HTML might just look like this:

<div class=”container”>Jason Learns Code</div>

Again, in the style section “container” is not defined. I figured at first this would be a no-no, but then I thought ‘why not?’ For example, I can code the following with no problems:

<div>Jason Learns More About Code.</div>

There is no rule that says I have to have a class added to the div. So if that is not a problem, why should adding an undefined class be a problem? There are no properties, its not as though it is conflicting with anything.

I’m only guessing, but from what I know right now I believe that in this scenario the name is acting like an adjective, it is “describing” what the div does. In this case the div is acting as a ‘container’ for the text “Jason Learns More About Code.” The reasoning for placing your text in a container may be for spacing and/or layout purposes.

I don’t know if it is best practice in coding to have a various divs with class names assigned to them, none of which are defined with any properties in the style section. Maybe it is OK, maybe not – maybe in time as I learn more I’ll be able answer that question. This is just something I noticed, so if you’re just learning like me hopefully this observation will be helpful.