11

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.

|improve this question
  • 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. – Simon Hayter♦ Feb 10 '16 at 15:18
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>
|improve this answer
  • 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 '16 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. – Simon Hayter♦ Feb 10 '16 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 '16 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 '16 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.

|improve this answer
  • 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 '16 at 14:22
-1

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

|improve this answer
  • 2
    This answer is incorrect – John Conde♦ Jun 28 '16 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? – Stephen Ostermiller♦ Jun 28 '16 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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