Thursday, 15 August 2013

Elements of the HTML5 Blog Post DOM

VERTICALLY, THE PAGE IS DIVIDED INTO HEADER, BODY, AND FOOTER

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. A 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>
at