Navigation Markup After Content

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

I am not an SEO expert. I said not long ago that I believe it’s mostly just a matter of common sense. However, I do find the subject interesting. Being the #1 result for a search term is a big deal. It can mean big bucks. For those of us with clients, they desire this and look to us to help. So if there are reasonable steps we can take to help with this, I think we should.

One of the SEO principals that really seems to make sense to me, is having the most important content on the page as close to the top of the HTML markup as possible.

Take a look at the web layout below. Common sense would have us order our markup logically as such:

What this screenshot doesn’t show, is that the menu is actually dropdown navigation. It is a series of nested unordered lists. The navigation code is actually 142 lines of code! That is an awful lot of “content” before a search bot would see the important stuff we want it to see.

What would be ideal, is to get our source code in the order of importance of the content. Like so:

That’s easier said than done. We’ll have to resort to some CSS trickery to make it happen. Namely, absolute and relative positioning.

It all starts with the header. We’ll put the h1 serving as the page title in a wrapping div with relative positioning. Then we’ll absolutely position the h1 tag inside it, with bottom and left values. That means that if it grows, it will grow upward not downward.

We’ll also give the header excessive bottom padding. This bottom padding will be equal in height to the expected height of our navigation bar. This ensures that there will be space after the page title and before the rest of the content.

Then we give the page-wrap itself relative positioning, and move the navigation code all the way down to just before closing </div> tag. Then we can absolutely position the nav with top and left values to get it to show up in that gap we created in between.

Ta da! We now have source code that begins like this:


   <div id="page-wrap">
      <div id="header">
         <h1 id="mainPageTitle">Content is King</h1>
      <div id="main-content">

      <h2>This Paragraph Appears Above Nav in HTML</h2>
      <p>Pellentesque habitant morbi tristique senectu.....

The important stuff is right up top. For accessibility, we should include a link like this right in the header:

<a class="hide" href="#nav">Jump to Navigation</a>

The “hide” class does exactly that, but doesn’t use display: none, which is actually inaccessible.

.hide   { 
   position: absolute; 
   left: -9999px; 
   top: -9999px; 

Now the first thing read in a screen reader is a “jump to nav” link, which may be useful.

Does this actually help?

I don’t know. It seems like it could to me, but I don’t have any hard evidence. I also don’t think there is much risk on penalization for doing it. After all, this is what CSS is built to do.


View Demo   Download Files