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

I am making my web better for SEO and I came up with question:
in what element text should be placed?

<p></p>
<span></span>
<div></div>

I know that I should use each of them in different situations but I dont know in which situations...

EDIT:
Example of 2 situations/doubts I encountered

share|improve this question

2 Answers 2

up vote 5 down vote accepted

If (and only if!) it is a paragraph of text, use p.

div and span don't assume any meaning. You use them if there is no other appropriate element. The difference? div is used as a block element, span is used as an inline element. In general, a block level element can contain other block level elements and inline elements. An inline level element can only contain other inline level elements. But there are some exceptions. Validate your documents.

Example:

<div class="about">
 <p>Hi, my name is <span class="name">John Doe</span> and I like cats.</p>
</div>

If you are not sure which element to use (or if you are not sure if an element is really appropriate to use in a specific context), use div resp. span.

To understand the meaning of all the other elements, you should consult the HTML spec and examine carefully the definition of the particular element.


About your examples in the jsfiddle:

Example 1: Yes, the price shouldn't be enclosed in a p, because it's not a paragraph. If you should use div or span depens on the context of this snippet. If you'd use HTML5, I'd mark it up that way (but it's hard to tell, because it depends on the whole page content!):

<article>
 <a href="…"><img src="…" alt="…" /></a>
 <h1><a href="…">Table</a></h1>
 <span>RRP £4.00</span>
</article>

Example 2: I'd go for:

<article>
  <h1 id="text-title">Turtle Stool Blue</h1>
  <dl>
    <dt>Produce Code</dt>
    <dd>D060029BLU</dd>
    <dt>Price</dt>
    <dd id="text-price">RRP £4.00</dd>    
  </dl>
  <p id="text-desc">Cras sed leo. Cras vehicula aliquet libero. Integer in magna. Phasellus dolor elit, pellentesque a, facilisis non, bibendum sed, est. Nunc laoreet lectus quis massa. Mauris vestibulum, neque sed dictum eleifend, nunc risus varius orci, in consequat enim diam vel arcu. Curabitur ut odio vel est tempor bibendum. Donec felis orci, adipiscing non, luctus sit</p>
</article>
share|improve this answer
    
Well I know this basic but I got more complex (or I think it's more complex) situations. here's js fiddle with 2 of my situations. It would be nice if you can help me understand on the examples in which element I should use and why. jsfiddle.net/TwSs7 –  Ron Aug 17 '12 at 15:29
    
@Ron: I updated my answer to refer to your examples. I think you should update your question accordingly (link/quote the jsfiddle there, too). –  unor Aug 17 '12 at 15:46
    
I am not using HTML5 therefore the dl, dt, dd and article tags dont help me.. –  Ron Aug 17 '12 at 16:07
1  
@Ron: You can use dl in HTML 4.01 / XHTML, too (the semantic is slightly different, though; would be worth a discussion if it is still applicable). If you don't use HTML5, you'd only have to change the article to div (and change the heading level accordingly). If you don't want to use a dl, you enclose the produce code in one div and the price in another. –  unor Aug 17 '12 at 23:20
    
I see. thank you very much. –  Ron Aug 18 '12 at 15:19

As unor says, your document should be validated.

Otherwise, the document should display well to users, and be semantically correct in the code. Where there are overlaps in functionality like this, the real answer is it doesn't matter. Robots will read all those elements as text, probably not boosting any priorities based on which tag they are in.

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.