SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 103

Thread: <p> vs <span>

  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <p> vs <span>

    It seems that I stand alone in the notion that non-sentences should be marked up with <span>. Why should I use the <p> element to mark up something that is not a paragraph?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,840
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You shouldn't use a <p> tag to mark up something that is not a paragraph. If a tag that properly identifies what the content is doesn't exist then mark it up with <div class=""> specifying a class that identifies what it is.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Span - Inline Element
    P - Block Element

    You should avoid block level elements sitting adjacent to inline elements.

    A paragraph consists of one or more sentences, which you probably already know.

    A short sentence can consist of only three to four words.

    *Note - If your content is lacking html's vocabulary and is sitting adjacent to a block element then a division with a semantic class design pattern should be used for the job.

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Felgall, I'm gald you at least somewhat agree with me. I think you really know what you're talking about. However, I don't know if I completely understood your comment.

    For example, one thing that I cannot stand is:
    Code:
    <p id="copyright">&copy;2009</p>
    Clearly, that is not a paragraph, but in nearly every resource I encounter these types of text are marked up as paragraphs.

    You made me think about span and div being somewhat different in that they are used for block and inline elements. I always felt like span should be used for a span of text and div should be used like the html 5 element section. But, I think I may be wrong on this one.

    In these fairly rare circumstances I'm referring to, I felt like span should always be used. Do you think you should use div to display block level non-sentences?

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    The rule of thumb I follow is fragments and sentences are generally marked up with a paragraph tag. However, a few words or perhaps a number that needs to be isolated would be marked up using a span. Spans are a necessary evil for isolating inline content. A simple example would be to isolate the copyright symbol to change its color. Something that wouldn't be possible without using a span.

    HTML Code:
    <p id="copyright"><span class="symbol">&copy;</span>2009</p>
    Although a strong, abbr or emphasis tag "could" be used it would seem like a abuse to do so in this instance.

    Another example is listing the number of items for each item in a nav or menu.

    HTML Code:
    <ul>
         <li>Donuts <span class="total">20</span></li>
         <li>Cakes <span class="total">90</span></li>
         <li>Pies <span class="total">19</span></li>
    </ul>
    Something to that effect. Although a definition list could actually be used here a span seems like the most straight forward and easy to read way to isolate the number for possible styling separate from the item.

    In regards to your question though I would not use a div for a sentence or set of words. Unless it was being used to host user content such as a blog listing or something. In that case semantics are almost uncontrollable.

    HTML Code:
    <div class="blog-entry-snippet">
    <?php echo $snippet; ?>
    </div>
    It wouldn't be right to place that type of user generated content into a paragraph tag because the entry/snippet could contain one or several paragraphs or breaks. So using a div to host that type of dynamic content seems most appropriate over anything else.

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The rule of thumb I follow is fragments and sentences are generally marked up with a paragraph tag.
    I have a huge problem with that. A fragment is not a sentence and is, therefore, not a paragraph. How can you justify this rule of thumb?

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    A paragraph can be defined by a distinct section of a piece of writing.

    Therefore, even though a fragment such as a copyright line may not make a sentence it is a distinct section of a piece of writing.

    However, if HTML supplied a fragment element I would gladly use that instead. Gotta work with what you have.

  8. #8
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oddz has the nut of it. The paragraph, as taught in middle school English, is a grammatical construct, usually made up of sentences. The thing is, html is a structural markup language, not grammatical. As a structural element, it is "a brief composition complete in one typographical section." So, <p> 2009</p> is indeed a paragraph, as is "a section or subdivision of a writing or chapter which relates to a particular point, whether consisting of one or many sentences." [cite]Webster[/cite]

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    '&#169; 2009' is definitely something I would consider as a paragraph, albeit with a strong flavour of ellipsis. It's really just a severely pruned version of this,

    'The copyright of this document belongs to the entity which is elsewhere, implicitly or explicitly, associated with the document or web site, from the year 2009 and onwards.'

    And that's a paragraph, so the abbreviated form is also a paragraph.

    But there are often sentence fragments on a web page which cannot be considered paragraphs. Those should probably be marked up with a <div>. An inline <span> cannot be an alternative to a block-level <p>. That's like wondering whether you should use a T-shirt or a wardrobe.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    '&#169; 2009' is definitely something I would consider as a paragraph, albeit with a strong flavour of ellipsis. It's really just a severely pruned version of this,

    'The copyright of this document belongs to the entity which is elsewhere, implicitly or explicitly, associated with the document or web site, from the year 2009 and onwards.'
    I feel like that is somewhat irrational. There is virtually no fragment that has no meaning and cannot be turned into a sentence in some form. "'&#169; 2009" is not a sentence. It doesn't matter if you equate it to one.

    An inline <span> cannot be an alternative to a block-level <p>. That's like wondering whether you should use a T-shirt or a wardrobe.
    Furthermore, I completely understand this. I brought this thread up because, from w3schools' definition of the span element, I felt like this was the second use for span other than the obvious use that oddz brought to attention.

    However, if HTML supplied a fragment element I would gladly use that instead. Gotta work with what you have.
    I agree with you 100&#37;. From w3schools' definition of span, I came to the decision that it's second usage was to mark up fragments. Apparently, that is not the case. However, I have a huge problem marking up a fragment as a paragraph. I'm going to have to side with Felgall that, for lack of a better element, a div with a class should be used.

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by yahn View Post
    "'&#169; 2009" is not a sentence.
    That seems to be a matter of opinion. I think it is. Dictionary definitions differ. Random House Dictionary says it's 'a grammatical unit of one or more words' whereas The American Heritage Dictionary says it must contain 'a predicate that contains at least one finite verb'.

    Quote Originally Posted by yahn View Post
    From w3schools' definition of span, I came to the decision that it's second usage was to mark up fragments.
    W3Schools is a very unreliable source of information, often inaccurate and out of date (despite the name's allusion to W3C, with which they have no association whatsoever).

    A span can mark up an inline sentence fragment if you need to do so, e.g., to apply CSS style rules to it or manipulate it with JavaScript. But since it's an inline element it's semantically wrong/questionable/odd (depening on whom you ask) to use it at the same structural level as block-level elements such as paragraphs. For that, you can use the neutral block-level element type, div instead.
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Sometimes you can satisfy both if you control the content... for copyright, there are usually other fragments, together in a footer.

    You can mark up the group of fragments in a p, and separate them inside with spans (again, only makes sense if you can control the content):
    <footer>
    <p>
    <span>&#169; 2009 Foo Corp</span>
    <span>address, foostreet 5, foocity</span>
    <span>contact: tel, fax, webmaster</span>
    </p>
    </footer>

    Each span could be styled however, display: block or so. Like oddz, for lack of a better tool, I've usually been using <p>'s for fragments, but if I have a group of fragments I've so far been able to get away with grouping them.

    Here's another I did recently:
    Code:
    <p class="postmeta"><span>13-jan-09: 14.30</span> <span><a href="#">12 foto's</a></span> <span>0 reacties</span></p>
    Three fragments who didn't make sense to be three p's.

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    <p>
    <span>&#169; 2009 Foo Corp</span>
    <span>address, foostreet 5, foocity</span>
    <span>contact: tel, fax, webmaster</span>
    </p>
    I wouldn't consider this to be a paragraph. It looks like contact information, for which there is a specific dedicated element type: <address>.
    (You could still use <span> to mark up the internal fragments, though.)
    Birnam wood is come to Dunsinane

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I used to use <address> for real addresses but everyone everywhere told me NOT to use it for that but to use P's with br's because <address> was meant for the url/email of the webmaster or something... even though to me it did look like a use that went out of fashion in the early 1990's.

    So except on my old pages, I no longer use <address> for <postaladdress> even though I'd like to.

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <address> element is meant for contact information, for the person(s) or organisation that is responsible for the page or site. That contact information can be a postal address, an email address, a telephone number, instant messaging details or whatever. Or a combination of any number of these things.

    It's not correct to use <address> for any old postal address, but for a postal address that is (part of) the aforementioned type of contact information, it's not only acceptable but even appropriate.
    Birnam wood is come to Dunsinane

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It's not correct to use <address> for any old postal address, but for a postal address that is (part of) the aforementioned type of contact information, it's not only acceptable but even appropriate.
    I think you're the first person (besides maybe I think Ed Seedhouse) to say that. I'd sure love to use <address> again... I believe that if it's a company's website, then they pretty much are the "author" and so their postal address could count as <address>...

    ++

  17. #17
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's how I see it, too. And it's what we do on our office web site: the footer on every page is an <address> element containing the postal address, switchboard phone number and main email address.
    Birnam wood is come to Dunsinane

  18. #18
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, I agree that using <p> on non-paragraph seems wrong. However, for me I really don't care because I don't use <p>. For me everything is around <div> tag. The way I look at is that <p> is just like <div> w/ default style settings. I don't want to give any style in my HTML page therefore, I give complete control of style/looks in my CSS. Of course, I can override p in my CSS but what's the point in that? I know you guys will call me crazy but I don't use <p><br> or whatever styling tag. I do understand in SEO world that using appropriate tag is important but I never had to write any SEO sensitive web application.

  19. #19
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sg707 View Post
    Yes, I agree that using <p> on non-paragraph seems wrong. However, for me I really don't care because I don't use <p>. For me everything is around <div> tag. The way I look at is that <p> is just like <div> w/ default style settings. I don't want to give any style in my HTML page therefore, I give complete control of style/looks in my CSS. Of course, I can override p in my CSS but what's the point in that? I know you guys will call me crazy but I don't use <p><br> or whatever styling tag. I do understand in SEO world that using appropriate tag is important but I never had to write any SEO sensitive web application.
    Everything could theoretically be a div. A heading could be a div. A list element could be a div. Tables could be divs. But that is terrible practice. Markup has meaning and it's there for a reason.

    Obviously, the P tag in html doesn't strictly associate with what we understand as paragraphs in normal writing (as we can see from this thread), but it at least has a real, semantic meaning which should be used.

    Hell, we *could* make web pages entirely out of jpegs (and I've seen some...), but that would be crappy too!

  20. #20
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I already know many people disagree with me. It just comes down to how you belive HTML should be. If you say "it's there for a reason" then why not embed all javascript, all css, inside the HTML? it's all do-able in HTML so why have seperate javascript, seperate css? As we all know HTML/JavaScript/CSS have a gray area that simulates each other. Now the question is which one will you choose to accomplish your task. From this, I have decided HTML should only contain "content", JavaScript should only contain "event" related, and "CSS" should 100&#37; control the looks and feel. Again~ I'm not surprise many people disagree w/ this approach~ so far I'm loving it but I'm not overconfident to say "this is the best approach!".

  21. #21
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's not about SEO, it's about completely abusing what HTML is for in the first place, as well as being completely inaccessible and therefore probably breaking the law in a few countries where this applies. The whole point of HTML is to mark up a document as distinct elements and sections, not just to provide styling hooks for your css. A <p> is definitely NOT the same as <div> without default styles, <p> has semantic meaning as a paragraph, <div> has no semantic meaning.

  22. #22
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sg707 View Post
    However, for me I really don't care because I don't use <p>. For me everything is around <div> tag. The way I look at is that <p> is just like <div> w/ default style settings.
    Then you are quite wrong, I'm afraid. I suggest reading the HTML 4.01 specification to learn what the various element types mean and how they should be used.

    Stormrider refuted this preposterous statement so well that I'll leave it at that.

    Quote Originally Posted by sg707 View Post
    Of course, I can override p in my CSS but what's the point in that?
    The point in that is to separate content/semantics from presentation.

    Quote Originally Posted by sg707 View Post
    I know you guys will call me crazy but I don't use <p><br> or whatever styling tag.
    I won't call you crazy, but I'll say that you seem to be badly misinformed.

    Quote Originally Posted by PatrickSamphire View Post
    Obviously, the P tag in html doesn't strictly associate with what we understand as paragraphs in normal writing
    In my eyes it does – depending on how you define 'normal writing', of course.
    Birnam wood is come to Dunsinane

  23. #23
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by yahn View Post
    Felgall, I'm gald you at least somewhat agree with me. I think you really know what you're talking about. However, I don't know if I completely understood your comment.

    For example, one thing that I cannot stand is:
    Code:
    <p id="copyright">&copy;2009</p>
    Clearly, that is not a paragraph...
    Actually, I've wondered about that myself and am not sure that that is not a paragraph, especially since most copyright notices are longer than that. Paragraphs can be only one line long.

    And, yes, you should definitely not use a P tag to just create blank space. Don't even use a DIV tag or a BR tag just to create blank space.

  24. #24
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sg707 View Post
    Yes, I agree that using <p> on non-paragraph seems wrong. However, for me I really don't care because I don't use <p>. For me everything is around <div> tag. The way I look at is that <p> is just like <div> w/ default style settings. I don't want to give any style in my HTML page therefore, I give complete control of style/looks in my CSS.
    Wow, that's completely messed up. You think you are being a CSS purist but you are getting everything completely wrong. Yours is what I would call a variant case of DIVitis. Using a P element (assuming you do so properly by wrapping a paragraph of text with it) in your HTML is most assuredly NOT the same as giving it style. It IS, however, giving it structure. Learn the difference.

  25. #25
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, call me a purist or DIVitis~ I will not change because I believe in my philosophy! hahaha. Still, I do understand your point and I would be w/ you if it was 2 yrs ago. But, one day I would not be surprise if HTML 7/8/9/100 will take out all styling tags. Yes, please continue to trash my philosophy but I'm quite proud of my work I do. It could be that my way of doing thins are WRONG but I'm not the kind of person who is afraid of doing things in different approach to find better way of accomplishing a task~ Yes, bash me~~ I will continue to find better ways~~ If I'm wrong, I'll learn my mistake in my own ways. Certainly, I won't just follow the book like 10th commendment.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •