This is one topic which I promised I would be explaining in detail. As the name suggests, it has go to do with dividing a space into different sections. We do this in order to effectively organize content in a web page. This is a slightly large topic and today I would be giving you an overall picture on what it is all about.

Let’s start with an example which would Illustrate how Divisions are applied on a web page.


So, what you see above is a basic layout of a web page. It contains the header, a body and a footer. As you can clearly see the whole page has been divided into 3 sections. This is done by using the concept of divisions. It is actually a kind of tool which a web designer could use while designing a web page.

Before applying the divisions concept, we should be clear on how we are going to divide the page. So, once we have decided that, the next thing to think about would be the order of sections. In this case I decided that I need to have 3 sections- Header, Body and Footer. And then I wanted the Header to be on top, followed by the body and then the footer.

In order to implement an order, we would need to use HTML. It is a markup language which would help you to design the content of a web page. Whenever we are using divisions in coding, it is abbreviated as  div. So, don’t be surprised  if you see this word  somewhere.

We can apply divisions in two ways- By Using a Class or an Id. I will explain what each means a little later.  This is what I wrote in HTML, to design the page. Have a look.


Let me explain what this means. As you can see there are 3 divisions abbreviated as div. Each one represents a section. The first one is the header followed by the Border and finally the footer. Please Note that the order is very important. Let’s see an example where I inter change the order.


See the difference? I just made a minor change to the HTML. And the whole structure has been re-ordered!

See what I wrote-


As you would notice, I pushed the Header Division down and brought up the Body Division.  And as a result has made a significant change to the web page just by changing 1 line of code!

Compare the two results-

The one I wrote earlier


The one I wrote now



Let me formally explain the syntax of division


<div id/class> Content</div>



I will explain id and class in my next blog




The content in the curly braces is basically the action being applied on the Section. You can apply colors, set the height and width and many more things.

Will see you tomorrow!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s