HTML: Nested Boxes

• HTML: Nested Boxes
  • Heirarchy
  • Creating HTML from a structure
  • Beginning Layout
  • Next Stop: Layout!

The most basic way to think about any webpage is as an arrangement of elements, which are themselves boxes (rectangles).

Each “box” that a website is made of can contain:

1. Text
2. Media (images, video, audio)
3. A canvas you can draw on with JavaScript
4. Other boxes.

Any simple web application or game you want to create can be seen as a group of nested elements (images, text, etc).

Heirarchy

The first step in building any website is to think about how to organize the elements of a page into sections. You might think about it like so:

App

Header

Body

Each of those sections might then contain still more sections, like so:

App

Header

Title

Button Button Button

Body

Creating HTML from a structure

In order to create a structure like that, you can use <div> elements modified with class="name" attributes to make up your own language for the structure of the document (you can also use existing structural elements such as <header>, <footer> and <main>, but if you don’t want to have to remember a bunch of tag names, just use <div> and then you can’t go wrong).

We begin with the outermost shell. You can use id="name" for any unique element in your app (there can be only one of each ID).

<div id="app">
  NEW CONTENT GOES HERE!
</div>

You can then add the next layer of boxes inside of your app:

  <div id="header">
    HEADER GOES HERE    
  </div>
  <div id="main">   
    MAIN GOES HERE 
  </div>
  <div id="footer">
    FOOTER GOES HERE
  </div>
</div>

Finally, you can fill in the rest of the details:

<div id="app">
  <div id="header">
    <div id="title">
      Title
    </div>
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
  </div>
  <div id="main">
    Main
  </div>
  <div id="footer">
    Footer
  </div>
</div>

The default layout for all HTML div elements, is simply to put them on top of each other, taking up as little space as possible (divs will grow to fit whatever text or other content goes in them).

Beginning Layout

There will be some more steps to laying out your content, but a simple starting place is knowing that you can make any div bigger by setting it’s width and height properties in CSS. Units for width and height can be specified either in pixels (px). I also recommend putting some borders on elements as you build them so you can see what’s happening. Here’s an example of some CSS I’d use to build out my basic header/body/footer layout:

#app { 
  border : 1px solid black;
}
#header {
  height: 48px;
  border: 1px solid blue;
}
#footer {
  height: 48px;
  border: 1px solid green;
}
#main {
  height: 400px;
  border: 1px solid purple;
}

Here’s what it looks like rendered:

Header

Main

Footer

Next Stop: Layout!

Next up, check out my layout how-to’s for a few basic layouts