12

For making a user friendly website, I have to use some of Font Awesome fonts in <h> elements like this:

<h2>
<i style="color: rgb(102, 149, 45); vertical-align: inherit;" class="fa fa-gear"></i>
 Performance
</h2>

In fact, this is a review article. Is it OK to put these fonts (or <i> elements) in the inner HTML of header elements like <h1>, <h2>, <h3>, etc.?

Please provide your source or some documentation, too, because it's really important for me; I don't want to make any mistakes about this topic.

1
  • 3
    Better to use <span> for FontAwesome, its silly using <i> Using <h2><span class="fa fa-gear"> </span></h2> will work just as well. Feb 10, 2016 at 15:18

3 Answers 3

11

I would say it wouldn't harm much, nor will it add anything. I prefer to keep my header tags clean and wouldn't add the i. The inline styling would be a bigger problem, which isn't really an big issue.

Instead of doing this, you can add the gear icon to the H2 directly:

h2.Geared:before{
    display: inline-block;
    color: rgb(102, 149, 45); 
    font-family: "FontAwesome";
    content: "\f013"; /*The actual character FontAwesome uses */
}

<h2 class="Geared">This text will have the gear</h2>
4
  • 3
    The user really should use CSS and not bloat their HTML. While styling a header tag will not cause any heart-burn, bloated HTML will.
    – closetnoc
    Feb 10, 2016 at 14:49
  • 1
    I disagree to some degree. Because you have both overlooked the fact your simply decreasing the HTML but then increasing the CSS, in fact your increasing more than decreasing. If your doing it to consume far less bytes then use SASS and use a singular line in the CSS like so: .h2.geared:before, .fa-gear:before,.fa-cog:before{content:"\f013"} Also, there would be nothing wrong with using <h2>Title <span class="fa fa-gear"> <span></h2> totally valid and won't harm SEO in the slightliest. Feb 10, 2016 at 15:25
  • Though the classname is choosen poorly, you can easily change the gear to another icon without changing all your css. You can change the appearance with css, which would place it in a stylesheet. Buit I agree with your suggestion, either aren't bad IMO.
    – Martijn
    Feb 10, 2016 at 15:59
  • Suggesting that html and css can be reduced by using sass is absurd. Sass expands to css, so it saves no bandwidth over it, just typing. That's valuable, sure, but not related to the discussion at hand.
    – The Nate
    Feb 15, 2016 at 14:06
6

Google pays almost no attention to which tags you use these days. Google cares about how the page looks to users. It cares about which text is big. It cares about which text is prominent. It cares about which text is hidden. Recent SEO tests have shown that there is no difference between using a <div> tag that is styled to look like a heading and using a <h1> tag as far as Google is concerned.

I frown on using tags for italics rather than using CSS. It mixes semantics and presentation. However, from an SEO standpoint, there should be no negative or positive consequences.

1
  • This is the answer. <i> is a standard HTML element and will NEVER affect your SEO. In addition, CSS styling will NEVER affect SEO except if it's used to hide content. The most significant key will ALWAYS be content, content, content.
    – Rob
    Feb 11, 2016 at 14:22
-1

Yes it's a bad idea. Use clear statement <h> tags, this is one of the rules of Google.

2
  • 2
    This answer is incorrect
    – John Conde
    Jun 28, 2016 at 8:07
  • 1
    I've never heard of an <h> tag, let alone run across rules from Google for their use. Can you link to some documentation? Jun 28, 2016 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.