I'm creating a WordPress theme in HTML 5 which is relatively new to me. I've read up on it and I read things that seem to contradict one another or differing opinions. One of the big things is where and when to use the <header>
tag. I've heard 3 different things:
- Anywhere that contains
<nav>
- Only once around your logo and main navigation
- At the top of
<article>
I've also heard different things about where and when to use <section>
but the general consensus seemed to be that it was option so I've left it out.
From my understanding is that <nav>
should only be used for Main Navigation items and not for footer links or pagination so I've only wrapped my <nav>
around my necessary links at the top for Utility Navigation and Main Navigation.
Headers are my biggest concern. From my understanding every <article>
should have a <h1>
tag to give that article a main descriptive title. But I also have 2 <h1>
tags outside my <main>
content area as a generic banner title and to describe the current Category. I'm just not sure what the best practice is when it comes to Headings and Blogs especially to how Search Engines will interpret a markup that has nothing but Heading 1 Tags...
Review Guidelines
I'd be very grateful if somebody could review my markup and let me know how I could improve it to better fit HTML 5 standards. At the same time though I would like to see some kind of documentation to back your review up because of the many differing opinions that I've run into while researching the HTML 5 standard.
Below I've listed my markup, here's a link to JSFiddle since it has a nice save feature.
<div id="utilityNav">
<nav id="utility">
<ul>
<li><a href="#">Nav Item</a></li>
<li><a href="#">Nav Item</a></li>
<li><a href="#">Nav Item</a></li>
</ul>
</nav> <!-- id="utility" -->
</div> <!-- id="utilityNav" -->
<div id="headerWrapper">
<header id="mainHeader">
<div id="logo">
<a href="#"><img src="logo.png" /></a>
</div> <!-- id="logo" -->
<nav id="mainNav">
<ul>
<li><a href="#">Nav Item</a></li>
<li><a href="#">Nav Item</a></li>
<li><a href="#">Nav Item</a></li>
</ul>
</nav> <!-- id="mainNav" -->
</header> <!-- id="mainHeader" -->
</div> <!-- id="headerWrapper" -->
<div id="bannerWrapper">
<div id="banner">
<h1>Top Level Page Title - Generic</h1>
</div> <!-- id="banner" -->
</div> <!-- id="bannerWrapper" -->
<div id="contentWrapper">
<aside id="sidebar">
<div class="widget">
Widget Stuff
</div>
<div class="widget">
<ul class="categories">
<li><a href="#">Sub Nav Item</a></li>
<li><a href="#">Sub Nav Item</a></li>
<li><a href="#">Sub Nav Item</a></li>
</ul>
</div>
</aside> <!-- id="sidebar" -->
<div id="content">
<h1>Category Title</h1>
<div id="breadcrumbs">
<a href="#">Home</a> > <span>Category</span>
</div> <!-- id="breacrumbs" -->
<div id="subCatWrapper">
<ul>
<li><a href="#">Sub Cat Item</a></li>
<li><a href="#">Sub Cat Item</a></li>
<li><a href="#">Sub Cat Item</a></li>
</ul>
</div> <!-- id="subCatWrapper" -->
<main id="postWrapper">
<article>
<h1><a href="#">Post Name</a></h1>
<p>Post Excerpt Here...</p>
<a href="#">Read More ></a>
</article>
<article>
<h1><a href="#">Post Name</a></h1>
<p>Post Excerpt Here...</p>
<a href="#">Read More ></a>
</article>
<article>
<h1><a href="#">Post Name</a></h1>
<p>Post Excerpt Here...</p>
<a href="#">Read More ></a>
</article>
</main> <!-- id="postWrapper" -->
<div id="pagination">
<span class="page-numbers">1</span>
<a href="#">2</a>
<a href="#">3</a>
</div> <!-- id="pagination" -->
</div> <!-- id="content" -->
</div> <!-- id="contentWrapper" -->
<div id="footerWrapper">
<div id=footerLinks">
<div class="col">
<ul>
<li><a href="#">Footer Nav Item</a></li>
<li><a href="#">Footer Nav Item</a></li>
<li><a href="#">Footer Nav Item</a></li>
</ul>
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div> <!-- id="footerLinks" -->
<footer id="mainFooter">
<p id="copyright">©</p>
<div id="social">
<ul>
<li><a href="#">Facebooks</a></li>
<li><a href="#">Tweeters</a></li>
<li><a href="#">Dem Googles</a></li>
</ul>
</div> <!-- id="social" -->
</footer> <!-- id="mainFooter" -->
</div> <!-- id="footerWrapper" -->
This is really just an outline of how I see the layout going.