Bug 1143502: Use structural HTML5 elements instead of <div>

r=dkl a=sgreen

3 files changed, 29 insertions, 9 deletions

diff --git a/skins/standard/global.css b/skins/standard/global.css
index 3941808be..3b96b6138 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -16,6 +16,14 @@
         font-family: Verdana, sans-serif;
         font-size: small;
     }
+
+    /* header and footer are required for IE8. IE9+ support them natively.
+     * main is required for all IE versions and KHTML-based browsers.
+     * Other browsers support them natively already. */
+    header, main, footer {
+        display: block;
+    }
+
     /* monospace is much smaller than Verdana by default, so we make it a bit bigger. */
     pre, code, kbd {
         font-size: medium;
diff --git a/template/en/default/global/footer.html.tmpl b/template/en/default/global/footer.html.tmpl
index 7cc5e1b44..7390a6d99 100644
--- a/template/en/default/global/footer.html.tmpl
+++ b/template/en/default/global/footer.html.tmpl
@@ -12,15 +12,17 @@
   #%]
 
       [% Hook.process('main-end') %]
-    </div>
+    </main>
 
-    <div id="footer">
+    <footer id="footer">
       <div class="intro">[% Hook.process('intro') %]</div>
 
-      [% PROCESS "global/useful-links.html.tmpl" %]
+      <nav>
+        [% PROCESS "global/useful-links.html.tmpl" %]
+      </nav>
 
       <div class="outro">[% Hook.process('outro') %]</div>
-    </div>
+    </footer>
 
     [% Hook.process("end") %]
   </body>
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index f63b175ec..d59ecef8b 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -228,6 +228,16 @@
       [% PROCESS format_js_link %]
     [% END %]
 
+    [%# IE8 doesn't understand these HTML5 elements. So we have to declare them here. %]
+    <!--[if lt IE 9]>
+      <script>
+        document.createElement('header');
+        document.createElement('nav');
+        document.createElement('main');
+        document.createElement('footer');
+      </script>
+    <![endif]-->
+
     [%# this puts the live bookmark up on firefox for the Atom feed %]
     [% IF atomlink %]
        <link rel="alternate" 
@@ -248,7 +258,7 @@
                  [%+ class FILTER css_class_quote %]
                [% END %] yui-skin-sam">
 
-  <div id="header">
+  <header id="header">
     [% INCLUDE global/banner.html.tmpl %]
 
     <div id="titles">
@@ -263,9 +273,9 @@
       [% END %]
     </div>
 
-    <div id="common_links">
+    <nav id="common_links">
       [% PROCESS "global/common-links.html.tmpl" qs_suffix = "_top" %]
-    </div>
+    </nav>
 
     [% IF Bugzilla.languages.size > 1 %]
       <div id="lang_links_container" class="bz_default_hidden">
@@ -284,9 +294,9 @@
         </ul>
       </div>
     [% END %]
-  </div>
+  </header>
 
-  <div id="bugzilla-body">
+  <main role="main" id="bugzilla-body">
     [% IF Param('announcehtml') %]
       [% Param('announcehtml') FILTER none %]
     [% END %]