Web Development 101 - Div tag

Here's one of my personal favorites, the <div> tag.

The <div> tag defines a section or division on a webpage. 

They group elements: check!

They add life to our webpage: check!

They will make our webpage pleasing to the eyes: check!

<div> tag is so powerful in such a way that familiarity and expertise in playing with this will make you a web design expert. This is what we use to define how we want our webpage to be seen by others (That is how I personally define <div> for me)

Let us dig deeper with this tag. Brace yourselves, for this series is a bit detailed, though I really find these things interesting and worth it to learn.

This is how a coded <div> tag will look like:

<div style="color:yellow">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

[credits for hilite.me website for free code snippet formatting service]

And the output will look like this:

Let us start first with what we have just coded:

<div></div> - This is the opening and closing tag. All defined inside the opening and closing tag are part of that particular section

<h3></h3> - This is the opening and closing tag header tag. Well, this isn't particularly part of the <div> tag because this is a different tag, so as with the <p></p> tag.
style="color:yellow" - do you notice this attribute inside the <div> tag? This is the `style` attribute which can also be present in other html tags. For this instance, in particular, we have used the `style` attribute to format the elements inside our defined <div> tag. 
Try this one:


<div style="color:yellow">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

<div style="color:blue">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>




... save the html file and open it on your browser. You should get something like this.



Notice that on our second <div>, we have indicated this: style="color:blue". Which means, whatever element style applicable for this attribute to be applied, it must have the color of blue: in our case, the text color became blue.



We already have two <div>s here: the first one with the yellow text color and the second one with the blue text color.



Would you like to see how your div actually looks like? Let us make its borders visible: Tweak your code to this:



<div style="color:yellow; border: solid black;">
  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>

<div style="color:blue; border: solid black">


  <h3>A text in a div element</h3>
  <p>Another text in a div element.</p>
</div>





Assuming that you're still not closing the browser where you opened our html file, refresh the page. Did you get something like this?




That is how your <div> looks like on your webpage. See the border lines? It is the space that our <div>s occupy in our webpage.



I have mentioned that <div> tag is so powerful that it defines how our elements are arranged in our webpage, to make the term simpler, the layout: and I'm standing for it. But first, let us talk about <div> positioning.