edwinwright/html5-design-patterns-main-page.md

## html5-design-patterns-main-page.md

      
    Raw
  

              html5-design-patterns-main-page.md
            
          
    HTML5 Design Patterns - Main Page

Basic pattern

<body>
  <header role="banner">
    [...]
  </header>
  <main role="main">
    <article>
      <header>
        [...]
      </header>
      [...]
      <footer>
        [...]
      </footer>
    </article>
  </main>
  <footer role="contentinfo">
    [...]
  </footer>
</body>
...with inner wrappers

Sometimes you need extra divs to achieve your visual design. An inner div on the body could be used to set a centred, fixed width column for the page.
<body>
  <div class="inner">
    <header role="banner">
      [...]
    </header>
    <main role="main">
      <article>
        <header>
          [...]
        </header>
        [...]
        <footer>
          [...]
        </footer>
      </article>
    </main>
    <footer role="contentinfo">
      [...]
    </footer>
  </div>
</body>
Adding inner divs to the parent sectioning elements allows you to style and centre each one individually.
<body>
  <header role="banner">
    <div class="inner">
      [...]
    </div>
  </header>
  <main role="main">
    <div class="inner">
      <article>
        <header>
          [...]
        </header>
        [...]
        <footer>
          [...]
        </footer>
      </article>
    </div>
  </main>
  <footer role="contentinfo">
    <div class="inner">
      [...]
    </div>
  </footer>
</body>
Source: http://www.creativebloq.com/html5/5-html5-and-aria-design-patterns-7133753