Thursday 15 August 2013

Elements of the HTML5 Blog Post DOM

The above DOM structure allows for a lot of design flexibility. It is divided into 3 main vertical blocks:
  1. Header
  2. Body
  3. Footer
Ideally, those would each be HTML5 tags <header><article>, and <footer>, but at this level, there's too much we'd need to stuff into them. If at some point I find out that headers and footers are allowed to be nested, then I will change the top-level <section> tags to header and footer.
Each of those sections are 100% width (or auto width, with the root body 100% width). Then there are two <div> tags nested inside each top-level<section>:
  1. A descriptive sub-section
  2. frame (or wrapper)
The reasons for nesting two tags inside the root <section> tags are simple, if we have a structure like this:
<section class='body'>
  <div class='title'>
    <div class='frame'>
      <header></header>
    </div>
  </div>
  <div class='content'>
    <div class='frame'>
      <article></article>
    </div>
  </div>
</section>
... then <div class='title'> can be 100% width, with a custom background design that stretches across the screen, and <div class='content'>can do the same. Then, being wrapped in <section class='body'>, we know they are part of the same section, that they are the same piece of content. Then, the <header> and <article> tags can be width: 960px and margin: auto thanks to the frame.
What that ends up allowing is:
We can style a section of related content with some styles 100% width, and others bound within a frame. If you did something like the following, which is more what we think we could accomplish with HTML5, that kind of design would not be possible:
<article>
  <header></header>
  <div class='content'></div>
</article>