How problematic is it to wrap H1 tag within divs

Marketing
1

<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,
David

2

Disagree.

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.

3

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.

4

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:

5

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 –> (:

6

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
    </h1>
  </div><!-- END #flowerProducts ??? -->


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

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