Boxes – the building blocks of websites

3 Comments

All websites are built out of boxes (square and rectangle shapes to be precise.) Some of them are easy to see while some of them are not. But once you get used to the concept, you’ll be able to quickly spot them. In this post, I’d like to introduce you to this box model using a website that clearly shows you these boxes.

The website is called Trent Cruising. But before reading too deep into this post, I encourage you to first try to spot as many different boxed areas as you can. Here’s the image: (click to enlarge)

Could you find all of the boxes? If not, don’t worry. I’ll now show you exactly where they are…

Here’s everything

The image below shows you just how many of these invisible (and sometimes visible) boxes there are. Each box can have its own code or “instructions” that tell the browser how it is to appear. (click to enlarge)

Next, let’s break down each of the boxes to learn a little bit more about each one…

The BIG box

I would hazard a guess that about 97% of all websites have this first box. It encompasses everything you see even though the box itself cannot be seen… (click to enlarge)

Main section boxes

In order to keep, well… order, the large box that holds the entire page is divided up into smaller boxes. There is the logo at the top, below that is the main navigation, then there is the header followed by the content. Bringing up the rear is the page footer. (click to enlarge)

Even more boxes

The web page can be further divided into even smaller boxes that hold the smaller, individual sections of the page. The reason for this may be hard to understand, but it actually makes it much easier to control the appearance. Each smaller box can have its own unique style, color, spacing, and others.

Last but not least

There is actually one more box that needs to be mentioned. That box is the browser window itself! If you look at the BIG box image again, you’ll notice that there is image and color outside of the red box (did you think I forgot that box?)

Your homework

Now that you know about the basic building blocks of all websites, take a little time out while surfing to think about the boxes of the websites you visit. If you’re really ambitious, print out web pages and draw boxes where you think they are located.