Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Why should we use tags like p, span, hx tags when we can use CSS instead? Is it important from an SEO point of view?

share|improve this question
2  
I see how you could you use CSS with span or p tags to pretend to be hx tags, but how would you use CSS to style text without even p or span tags anyway? –  joshuahedlund Nov 21 '11 at 14:14
    
A half-snarky, half-serious response is: try doing without them. Use <span> for everything and see whether you can accomplish what you want with CSS alone. You'll likely learn a lot from trying to target the right spans and make them behave like other elements. (Though the likeliest lesson is "don't do that.") –  Nathan Long Nov 21 '12 at 17:44

7 Answers 7

up vote 64 down vote accepted

The short version is that that the various tags and CSS have different purposes.

<h1>Whatever</h1>, for example, carries a certain amount of meaning along with its use: "This is a header, an important–first-level one" and so on. Some parsers also use the hx tags(and others) to create an outline of the document's structure which can be used for anything from data processing to accessibility(eg. screenreaders jumping to the next question on the webmasters homepage by skipping to the next h3).

You can't dismiss the semantic tags based on what you can do with CSS, and vice versa.
You can apply CSS to another tag to make it look the same as the h1, eg: <span style="font-weight:bold;font-size:2em">Whatever</span> but that still doesn't make that span tag an actual header in terms of function and semantics. In this case, that outline I linked to above would be pretty much impossible because those spans aren't headers, but just some text that you arbitrarily made big and bold.

share|improve this answer

Su answered the semantic portion. With regards to SEO, you'll find that the h1 element is given more weight by search engines than other tags. The h2/b/strong tags are given a little more weight than regular text.

Most other tags are pretty much equal, but you should always use the most appropriate tag for the job. Google has recently begun parsing tables when used for tabular data, and other appropriately-used HTML can give signals to which content is more important than others.

share|improve this answer
    
This is interesting. Do you have a source for this? –  user606723 Nov 21 '11 at 16:47
3  
@user606723 which part? The first paragraph is basic SEO knowledge, and mentioned in Google's own SEO guide (PDF). I don't know if the tables thing is documented anywhere, but I've seen it a few times in search results - they list 2-4 rows from a table on the target page. –  DisgruntledGoat Nov 21 '11 at 17:29
1  
Update: here's one post that mentions tables in SERPs: googlesystem.blogspot.com/2011/11/… –  DisgruntledGoat Nov 21 '11 at 17:33
    
I meant the first half. Thanks. =) –  user606723 Nov 21 '11 at 19:02

Please also think about people with some sort of impairment who (as an example) have to use a braille reader. In such cases the html tags are of far greater importance than the visual css stylings.

share|improve this answer

For HTML5, check out bold and italic in HTML5.

Summary:

Use <b> when you want the text to have a different style without contextual importance, but use <strong> when you want the text to have extra importance from a content or SEO perspective.

Use <i> to offset the mood of text, but use <em> to make text emphatic.

share|improve this answer
3  
No. <b> and <i> are deprecated. If you want your text to look bolt/italic, use CSS. If you want to convey the meaning of bold/italic text, use <strong> and <em>. –  Mircea Chirea Nov 21 '11 at 14:37
3  
@iconiK Deprecated by whom? My understanding was also that it was "de-deprecated" in the HTML5 standard. And for good reason - there are lots of traditional uses of italics other than emphasis [for example, book titles or foreign words] - having a tag for "italic" explicitly [rather than a semantic tag] is no different from directly putting in capitals and punctuation. If you want to use <span class="proper-name"> <span class="question-sentence">, though... –  Random832 Nov 21 '11 at 15:19
1  
it is deprecated because HTML should not define any presentation formatting at all. Thats the reason we write css into css files (and not inline) so we have distinct styles for human, printer, screenreader, mobile, ebook reader ect., safari reader etc. –  sod Nov 21 '11 at 15:46
3  
@sod I wasn't asking why it's deprecated, I was challenging the assertion that it's deprecated at all. And it's not clear why italic is any more so "presentation formatting" than capital letters and punctuation. It's part of the content. –  Random832 Nov 21 '11 at 16:33
2  
@iconiK, "practically deprecated" has no bearing on the statement of whether or not something is deprecated. Given that they are provided in the HTML5 spec and in no way listed as deprecated, I would <strong>ly state that they're not deprecated. –  zzzzBov Nov 21 '11 at 20:15

Markup and presentation are different

This is a bit like asking "why should we have walls when we have paint?" :)

HTML tags denote what your content is - this is a headline, this is a list, etc.

CSS denotes what your content should look like - headlines should be blue, lists should be indented this much, the menu should be on the left, etc.

Javsascript tells how your page should behave - animations, etc.

So, without HTML content, CSS and Javascript really have nothing to work on.

These categories are not 100% black and white - for example, CSS can specify "transitions" now, which are animations - but they're the basic idea.

Please see previous discussions on this topic on StackOverflow here and here.

Good markup saves a ton of effort and works better

If you want something to behave like a link, you can use <span class="mylink"> and use a bunch of CSS and JS to make it look and feel right. Or you can just use an <a> element and get all that for free, with no additional code to download, because browsers already know what to do and have the logic implemented in fast, native code. Plus it's a lot more likely to work correctly for screen readers, mobile browsers, search engines, aggregators, and other use cases you didn't think of.

This is also why you should use a <button> for clickable actions, a <label> to label an <input>, and a <main> for the main section of your page.

How good markup impacts SEO

Fundamentally, SEO is about convincing search engines that your content is the best match for a search term. Obviously, nobody at Google is personally reading every web page and ranking it.

Therefore, for search engines to know what your content is, a program has to parse it.

And hey, look! We have this whole language called HTML that's meant to label your content in a way that machines can understand! :)

So yes, clear markup will help search engines to index your pages better.

To use an extreme example, if your page's headline was actually a photograph that you took of a newspaper headline, it might look interesting, and people could read it just fine, but to a search engine, it would just be an image with no meaning. Whereas <h1>Turtle Groomer 5000</h1> clearly tells the search engines that you have a product that facilitates testitudinal hygiene.

share|improve this answer
2  
"Why should we have walls when we have paint?" ~ That's a wonderful question? Thanks! –  Evik James Nov 21 '11 at 17:05
    
I think the tag names are the confusing part of the markup - H1, H2 etc. can be used by screen readers as well as people who view it. Having said that, 99% of the world will see a page, and therefore as much as it upsets SEO lovers, the H tags are visual markers, just like <b> meant bold once. –  Chris S Nov 21 '11 at 22:54
    
@ChrisS - I don't think it's confusing. Tags are always meant to be read by machines; that includes browsers just as much as screen readers. And no, an <h1> isn't a visual marker, really. Most browsers will display it big and bold if they aren't told otherwise, but the page's styles, or the user's own preferences, could override that. <h1> is an indicator of meaning: 'this is my main headline.' If the site or the user wants main headlines to be small and orange, that's what they'll see. –  Nathan Long Nov 21 '11 at 23:14
1  
"just like <b> meant bold once" — did someone change the meaning of <b> without telling me? It still means bold doesn't it? Of course, I prefer semantic tags, <em> and <strong> –  ghoppe Nov 22 '11 at 0:38

Also: do not forget the importance of the semantics for users with a disability. Screenreader software depends on these semantics to present blind people the required context they're missing out on because of their disability.

share|improve this answer

Firstly, <hx> is is a rather important tag, as it defines headings, as others have mentioned. Headings are very useful not just for looks, but because they separate sections in a way that a look-alike cannot. Just take a look at Wikipedia for example. Some programs depend on these kinds of tags to "break" documents apart or even create an automatic table of contents. A search engine would presume that the text within a <h1> tag would be more important since it's a heading -- a title.

Nextly, while stylesheets are great, some devices will ignore stylesheets and focus only on the HTML, which is where a tag like <em> comes in handy. If stylesheets were disabled or there was a problem loading it (eg, internet connection problems), the text still appears formatted. <em> could also tell that there is supposed to be an emphasis on the word, whereas italics alone could be anything from a movie title to just making an image caption differ from the regular text. This can be used by those using disability tools, which otherwise fail to capture emphasis generally.

<span>, on the other hand, is largely an inline version of the <div> tag, and if anything, it can just save you from having to type an extra class in (with that being said, would you really want to use <span class="italic"> instead of <i> for every italic instance you have? It makes code harder to read, less standardized (under the broad assumption that the majority of people would use the latter over the former), and doesn't in any way enhance the document.

<p> also comes in handy for those with disabilities, since it ensures that text can be broken into manageable paragraphs in a way that <br /> cannot.

Sure, we can say that HTML was not meant to be for styling, but there is a delicate line between design and style; and frankly, I'd say consider that to be user preference. Whether you use <i> or <span class="italic">, it's up to you, and won't make a difference for SEO. After all, why limit us to just one way of doing things? (like how we could choose whether or not to use semicolons at the ends of lines in JavaScript -- I always use them, while others never use them, and it makes no difference for functionality at all.)

share|improve this answer

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.