Strong within H1 Tags

HTML & CSS
1

Hi all,

I want to mix between light blue and light grey within each H1 tag of a site I am designing. At the moment I am using <strong> within the H1 tag to add the blue, a bit like the following:

<h1>Welcome. I’m a <strong>Highlighted Text</strong> & <strong>More Highlighted text</strong> serving customers in <strong>Location</strong></h1>

The effect looks fantastic and helps convey the friendliness of the site I am designing, but now I look at it again I am slightly concerned about any negative SEO impact, has anyone any experience of anything similar, or an idea of how to amend the code?

Justin

2

I’m no SEO expert so I can’t say how it will effect that, but purely semantically speaking <strong> is not the correct tag to use here.

Since <strong> is used to indicate strong emphasis on its contents and all you seem to want to do is to change the appearance of the words without changing their meaning. I would go with <span>, which has no meaning at all, but provides a nice hook for styling.

3

Thanks ScallioXTX, that makes perfect sense to me as well anyone have any idea about a negative SEO impact?

4

I agree just use a span. Strong is not for google it’s for peoples eyes and ears. I don’t think google would care one way or the other. In which case, span is a more appropriate tag. But it really doesn’t matter all that much.

5

STRONG in that context is just pointless overkill like the others have mentioned. Probably having it occurring several times in so close a proximity would likely cause negative results.

6

I agree that ‘strong’ is misused in this context, but if localization is not in play ‘i’ or ‘b’ are also viable options.
See: http://www.w3.org/International/questions/qa-b-and-i-tags

7

On the other hand think of the context of your sentence… your heading is the whole sentence… but within that heading there are key POINTS ( or words/phrases)… It actually makes sense to have:

<h1> I am Some Name, a <em>professional whatever</em> providing quality affordable<em> service of some sort</em> to the <em> city area</em></h1>

When you read your heading semantically you see it makes sense.You can choose em/ or strong, both can be styled the same way anyway… em makes more sense to me.

I understand your concern about SEO, but you have to know that semantics are relative…
you could take my example and break it down in to this :

<h1> I am Some Name</h1><!-- this is a page about Some Name–>
<h2>A professional whatever providing quality affordable<em> service of some sortto the city area</h2>

This might cause less worry about SEO penalties, but misses the message that you want to send… most likely you want to get found under “professional whatever” in “city area” than under “some name”…

you you concatenate the H1 and H2… It still makes sense as semantically your H1 describes the page AND now separates you from all the other "some names"s… but it still puts the phrase “some name” and “professional whatever” par with each other… so EM (or STRONG) seem to make sense . I f you had NO semantic emphasis … then SPAN( or even B or I) would be needed

8

I can see that STRONG is definitely wrong in the context; I was all set to go with Span until dresden phoenix mentioned em.

My one concern is that although the blue colour is emphasised I am not sure how the search engines will view me emphasising aspects of the H1 tag (which as its the H1 tag should be emphasised enough).

9

They are both the same ‘emphasis’ and make very little sense using them within a H1. EM (EM: indicates emphasis), (STRONG: indicates stronger emphasis).

H1 is already the most important of the headings. Hence it is in affect already considered - in a sense - emphasised since it is of the higher importance than the other two.

10

Thanks everyone, am proceeding with span…

11

…if for the sole reason of styling. If you wish to make a statement about some key words, if you like to draw attention on some key concepts, I’m sure you can use any of the <strong> or <em> you like. There is no problem there.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en"><head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Screaming headers</title>

  <style type="text/css">

    div.style {
        color:#666;
      }

    div.style em, div.style strong {
        text-transform:uppercase;
        color:black;
      }

    div.style em {
        color:red;
      }

    div.style strong {
        font-size:0.75em;
      }
  </style>

</head><body>

  <div>
    <h1>If I want to scream, <em>I scream!!!</em></h1>
    <h2>They will just have to sit <strong>quietly</strong> and <strong>listen</strong>.</h2>
  </div>

  <hr>

  <div class="style">
    <h1>If I want to scream, <em>I scream!!!</em></h1>
    <h2>They will just <strong>have</strong> to sit <strong>quietly</strong> and <strong>listen</strong>.</h2>
  </div>

</body></html>

This is to say also, you can use all <span>, <em> and <strong>, but you have to make the right choices: <span> as hook for style or container for different language text, <em> and <strong> as semantic elements, that can also act as containers for different language text and hooks for style, possibly having inside them other <span>s :slight_smile: