Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|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 at 15:18
up vote 10 down vote accepted

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>
share|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 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 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 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 at 14:06

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.

share|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 at 14:22

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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