To div or not to div, that’s the question…or is it? I mean it is a question, just not the question for most. It’s somehow been four weeks now since I started HackerYou’s full-time front-end development bootcamp, where does the time go!? Like so many, my introduction into front-end web development came through random experimenting with WordPress templates. I finally took the leap into the HackerYou world and started with a part-time development course that led me to where I am now.
I digress though. Back to the question at hand. The div at its core is a simple concept. It is a container for elements or, a place to put your code. Without going into too much talk of specific elements, it’s a way to divide or organize the things you want to see on the page when making a website.
I’d be lying if I said I understood it right from the get go. But if there’s one thing I’ve learned in development is that there is no such thing as a stupid question. Some things you might wonder are, when do I use a div? Do I put everything in a div? Or what does the div look like on my page?
First let’s take a look at what the syntax of a div looks like in code:
Pretty weird right? Notice the difference between the two ‘bracketed’ items? Always know that one can’t live without the other. On the left is the opening div tag and on the right the closing. Inside goes your stuff. Not just any stuff though, stuff of the HTML5 kind.
<div>Cool stuff that makes up website!</div>
Now you might be wondering, what is HTML? Well, I could give you some technical jargon, but I’m not gonna go there. Instead I will impart some knowledge I learned when I first started at HackerYou. HTML is the building blocks of your page, like the foundation of a house. And like the foundation of a house, HTML needs to be clean in its organization to form a sturdy base.
So, back to the div, the container of elements. While getting started writing actual code can be a difficult step to take, remember that it is something to have fun with, not to be scared of. The div itself can be overlooked once you start to learn how many elements actually make up HTML, easy to forget and remember what it is for, maybe even take it for granted. But it is always there. Never taking up any space on the page, but often the key to troubleshooting.
To this point in my early career as a front-end developer I have already encountered this a number of times. Working on a section that is giving me a hard time, only to find that adding an extra div was the answer, for example.
The other day I was working on a project with a fellow cohort, Erika Donovan, on our site www.whichjayareyou.com and we ran into this problem on the answer portion of our quiz. When the user finishes the quiz and it is revealed what Toronto Blue Jay player they are, the players’ number became broken, too big and no longer a circle. The answer, add a div around both elements! So simple, but so easy to forget.
And like many truths I’ve learned so far in this new journey, the simplest answer is quite often not only the best, but also the most effective.
In div we trust.