Putting content code above navigation code? Does it still matter?

I remember a good few years ago when the word on the street was that you should have your content above you navigation in your HTML (regardless of how it lays out on screen). I don’t hear that said anymore. Is it something that now doesn’t matter?

It depends… of course!

The most important factor IMHO is accessibility and how people using assistive devices navigate around the site.

The vast majority of sites have primary navigation above the content so people using screen readers are used to that - they can skip past it to find page headings and navigate the content from there. If you wanted navigation at the bottom of the HTML then providing “skiplinks” would be useful!

I’m curious: How does this tie into internet marketing? :slight_smile:

It used to be advocated as a technique for SEO, on the basis that the higher up the page your actual content appeared, the better it was likely to rank in search engines. I believe that back in the dark ages, search engines only read so many lines/characters per page.

So is this not a thing anymore? Like I said I’ve not heard it mentioned in a while.

Not as far as I know - certainly not with the major search engines. (If you want to try a quick test, do a Google search for the text of the last post of page 1 in this thread. It’s a very lengthy page, but the post at the bottom had been indexed.)

I am leading a SEO agency here and i assure you that such a technique is not used anymore. Make sure your website is clean, clear and easy to navigate and don’t worry about those useless hacks.

Cool. It sounded like a pain in the backside to implement anyway!

this type of tactic falls under the minutia category. I certainly wouldn’t rewrite the website’s code just so the content appears in a certain place in the markup

The latest redesign of my site just happened to end up with the content first, the sidebar second and the navigation last. Just the way it ended up - I didn’t plan to set it out that way.

I used to allocate a blank header at the top of the page and after the “golden content” loaded use “position: absolute” to fill in the blank header. from memory there were slight problems with mobile responsive design so dropped the idea.



<!DOCTYPE html>
<html>
<head>
<title>Page</title> 
<style type='text/css'>
 .header_por {height: 4.2em; width: 100%; position: relative}
 .header_abs {position: absolute; top: 0px; left: 0px}
 .content        {height: 22em; background-color: #aff; color: #333; padding: 0.42em;}
 .bdr  {border: solid 1px #ddd;}
 .fs2   {font-size: 2em;}
 .fwb  {font-weight: 700;}
 .mga {margin: 2em auto;} 
 .tac   {text-align: center;}
 .w88 {width: 88%;}
</style>

</head>

<body>

    <div class='header_por'>
    </div>

    <div class='content w88 mga bdr'>
      lots of SEO blurb goes here and displayed before the header
    </div>

    <div class='footer bdr'>
       footer blurb
    </div>

    <div class='header_abs tac fwb fs2'>
      Logo, Google search, links, latest new, etc
      <br />
      <?=date('D, d M Y H:i:s');?>
    </div>

    <pre>
     <?php highlight_file(__FILE__);?>    
    </pre> 
</body>
</html>