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...
Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.Sign up to join this community
If (and only if!) it is a paragraph of text, use
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.
<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
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
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>
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.