How problematic is it to wrap H1 tag within divs

<div id=“flowerContent”>
<div id=“flashFlower”><img src=“/images/growingFlowers.jpg” alt=“Growing flowers” /></div>
<div id=“flowerRight”>
<h1>Special Offers</h1>
</div><!-- END #flowerProducts –>

Hi from nearly dark UL leeds.

Looking at the above code a see a problem from an SEO perspective. The problem i see is that if “Special offers” was the key pharse wrapping it within Div tags makes it pretty much invisible to spiders.

Agree or Disagree?

Thanks in advance,


Spiders will strip out the Divs & simply read the text (and give it weighting as it’s H1.

As a very general rule - if a screen reader can read it (and it can), then Search Engine Spiders can read it.

I doubt search engines would care too much to be honest. It’s just a bit of markup and I seriously doubt that Google would have a problem with your header being inside a div.

One might wonder why you have all those divs, but that’s entirely a HTML/CSS question, and has got nothing to do with search engines :slight_smile:

Nested <div>s don’t make content invisible to search spiders at all. As far as a spider is concerned, you’ve got an <h1> that says “Special Offers” - it doesn’t care if that <h1> is sitting in the document root or is nested in a complicated structure of <div>s.

What I would say about the “end” comment is first, leave out the #, there’s no need for it there and you’re just inviting trouble if the server tries to parse it as an instruction rather than a comment. Second, if you’re opening <div id=“flowerRight”>, I’d make sure the closing tag is matched up with <!-- end flowerRight –> (:

As far as SEO I do not think it will make any difference apart from script bloating.

Why not apply the IDs to the H1 and the IMG elements?

<div id='flowerProducts'>
  <div id="flowerContent">
   <img src="/images/growingFlowers.jpg" alt="Growing flowers"  id="flashFlower" alt='#' />
     <h1 id="flowerRight">
       Special Offers
  </div><!-- END #flowerProducts ??? -->

<!-- Or even better to add IMG and H1 to your stylesheet -->
<script type='text/css'>
  #flowerContent       {/* ... */}
  #flowerContent img  {/* ... */}
  #flowerContent h1   {/* ... */}

  <div id="flowerContent">
    <img src="/images/growingFlowers.jpg" alt="Growing flowers" />
     <h1>Special Offers</h1>