diff --git a/src/layout/demo.html b/src/layout/demo.html
index f28f1d78..088c5627 100644
--- a/src/layout/demo.html
+++ b/src/layout/demo.html
@@ -18,7 +18,7 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
-      <div class="wsk-layout__header">
+      <header class="wsk-layout__header">
         <!-- Icon -->
         <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
@@ -33,7 +33,7 @@
           <a class="wsk-navigation__link" href="#">Are</a>
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
-      </div>
+      </header>
       <div class="wsk-layout__drawer">
         <span class="wsk-layout-title">Material Design Lite</span>
         <nav class="wsk-navigation">
@@ -44,9 +44,9 @@
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
       </div>
-      <div class="wsk-layout__content">
+      <main class="wsk-layout__content">
         <div class="demo-layout__content"></div>
-      </div>
+      </main>
     </div>
   </div>
 
@@ -56,7 +56,7 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
-      <div class="wsk-layout__header wsk-layout__header--scroll">
+      <header class="wsk-layout__header wsk-layout__header--scroll">
         <!-- Icon -->
         <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
@@ -71,7 +71,7 @@
           <a class="wsk-navigation__link" href="#">Are</a>
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
-      </div>
+      </header>
       <div class="wsk-layout__drawer">
         <span class="wsk-layout-title">Material Design Lite</span>
         <nav class="wsk-navigation">
@@ -82,9 +82,9 @@
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
       </div>
-      <div class="wsk-layout__content">
+      <main class="wsk-layout__content">
         <div class="demo-layout__content"></div>
-      </div>
+      </main>
     </div>
   </div>
 
@@ -95,7 +95,7 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--overlay-drawer-button">
-      <div class="wsk-layout__header">
+      <header class="wsk-layout__header">
         <span class="wsk-layout-title">Fixed drawer layout demo</span>
         <div class="wsk-layout-spacer"></div>
         <div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right">
@@ -106,7 +106,7 @@
             <input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean" />
           </div>
         </div>
-      </div>
+      </header>
       <div class="wsk-layout__drawer">
         <span class="wsk-layout-title">Material Design Lite</span>
         <nav class="wsk-navigation">
@@ -117,9 +117,9 @@
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
       </div>
-      <div class="wsk-layout__content">
+      <main class="wsk-layout__content">
         <div class="demo-layout__content"></div>
-      </div>
+      </main>
     </div>
   </div>
 
@@ -139,9 +139,9 @@
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
       </div>
-      <div class="wsk-layout__content">
+      <main class="wsk-layout__content">
         <div class="demo-layout__content"></div>
-      </div>
+      </main>
     </div>
   </div>
 
@@ -151,7 +151,7 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
-      <div class="wsk-layout__header">
+      <header class="wsk-layout__header">
         <!-- Icon -->
         <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
@@ -166,7 +166,7 @@
           <a class="wsk-navigation__link" href="#">Are</a>
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
-      </div>
+      </header>
       <div class="wsk-layout__drawer">
         <span class="wsk-layout-title">Material Design Lite</span>
         <nav class="wsk-navigation">
@@ -177,9 +177,9 @@
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
       </div>
-      <div class="wsk-layout__content">
+      <main class="wsk-layout__content">
         <div class="demo-layout__content"></div>
-      </div>
+      </main>
     </div>
   </div>
 
@@ -190,7 +190,7 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout wsk-layout--fixed-drawer wsk-layout--fixed-header">
-      <div class="wsk-layout__header">
+      <header class="wsk-layout__header">
         <span class="wsk-layout-title">Fixed drawer and header</span>
         <div class="wsk-layout-spacer"></div>
         <div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right">
@@ -201,7 +201,7 @@
             <input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean2" />
           </div>
         </div>
-      </div>
+      </header>
       <div class="wsk-layout__drawer">
         <span class="wsk-layout-title">Material Design Lite</span>
         <nav class="wsk-navigation">
@@ -212,9 +212,9 @@
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
       </div>
-      <div class="wsk-layout__content">
+      <main class="wsk-layout__content">
         <div class="demo-layout__content"></div>
-      </div>
+      </main>
     </div>
   </div>
 
@@ -225,7 +225,7 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
-      <div class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--waterfall wsk-layout__header--tall">
+      <header class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--waterfall wsk-layout__header--tall">
         <!-- Top row -->
         <div class="wsk-layout__header-row">
           <!-- Icon -->
@@ -260,7 +260,7 @@
             <a class="wsk-navigation__link" href="#">You?</a>
           </nav>
         </div>
-      </div>
+      </header>
       <div class="wsk-layout__drawer">
         <span class="wsk-layout-title">Material Design Lite</span>
         <nav class="wsk-navigation">
@@ -271,9 +271,9 @@
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
       </div>
-      <div class="wsk-layout__content">
+      <main class="wsk-layout__content">
         <div class="demo-layout__content"></div>
-      </div>
+      </main>
     </div>
   </div>
 
@@ -283,7 +283,7 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout" id="transparent_demo">
-      <div class="wsk-layout__header wsk-layout__header--transparent">
+      <header class="wsk-layout__header wsk-layout__header--transparent">
         <!-- Icon -->
         <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
@@ -298,7 +298,7 @@
           <a class="wsk-navigation__link" href="#">Are</a>
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
-      </div>
+      </header>
       <div class="wsk-layout__drawer">
         <span class="wsk-layout-title">Material Design Lite</span>
         <nav class="wsk-navigation">
@@ -309,8 +309,8 @@
           <a class="wsk-navigation__link" href="#">You?</a>
         </nav>
       </div>
-      <div class="wsk-layout__content">
-      </div>
+      <main class="wsk-layout__content">
+      </main>
     </div>
   </div>
 
@@ -319,12 +319,12 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
-      <div class="wsk-layout__header">
+      <header class="wsk-layout__header">
         <!-- Icon -->
         <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
         <span class="wsk-layout-title">Material Design Lite</span>
-      </div>
+      </header>
       <div class="wsk-layout__tab-bar wsk-js-ripple-effect">
         <a href="#blue-panel-scroll" class="wsk-layout__tab is-active">Blue</a>
         <a href="#green-panel-scroll" class="wsk-layout__tab">Green</a>
@@ -345,17 +345,17 @@
         <a href="#green-panel-scroll" class="wsk-layout__tab">Green Six</a>
         <a href="#red-panel-scroll" class="wsk-layout__tab">Red Six</a>
       </div>
-      <div class="wsk-layout__content">
-        <div class="wsk-layout__tab-panel is-active" id="blue-panel-scroll">
+      <main class="wsk-layout__content">
+        <section class="wsk-layout__tab-panel is-active" id="blue-panel-scroll">
           <div class="demo-layout__content"></div>
-        </div>
-        <div class="wsk-layout__tab-panel" id="green-panel-scroll">
+        </section>
+        <section class="wsk-layout__tab-panel" id="green-panel-scroll">
           <div class="demo-layout__content-green"></div>
-        </div>
-        <div class="wsk-layout__tab-panel" id="red-panel-scroll">
+        </section>
+        <section class="wsk-layout__tab-panel" id="red-panel-scroll">
           <div class="demo-layout__content-red"></div>
-        </div>
-      </div>
+        </section>
+      </main>
     </div>
   </div>
 
@@ -364,28 +364,28 @@
 
   <div class="demo-layout">
     <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header wsk-layout--fixed-tabs">
-      <div class="wsk-layout__header">
+      <header class="wsk-layout__header">
         <!-- Icon -->
         <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
         <span class="wsk-layout-title">Material Design Lite</span>
-      </div>
+      </header>
       <div class="wsk-layout__tab-bar wsk-js-ripple-effect">
         <a href="#blue-panel-fixed" class="wsk-layout__tab is-active">Blue</a>
         <a href="#green-panel-fixed" class="wsk-layout__tab">Green</a>
         <a href="#red-panel-fixed" class="wsk-layout__tab">Red</a>
       </div>
-      <div class="wsk-layout__content">
-        <div class="wsk-layout__tab-panel is-active" id="blue-panel-fixed">
+      <main class="wsk-layout__content">
+        <section class="wsk-layout__tab-panel is-active" id="blue-panel-fixed">
           <div class="demo-layout__content"></div>
-        </div>
-        <div class="wsk-layout__tab-panel" id="green-panel-fixed">
+        </section>
+        <section class="wsk-layout__tab-panel" id="green-panel-fixed">
           <div class="demo-layout__content-green"></div>
-        </div>
-        <div class="wsk-layout__tab-panel" id="red-panel-fixed">
+        </section>
+        <section class="wsk-layout__tab-panel" id="red-panel-fixed">
           <div class="demo-layout__content-red"></div>
-        </div>
-      </div>
+        </section>
+      </main>
     </div>
   </div>