SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Don't know what kind of tag this should be...

    So I'm trying not to use <p>'s when it's not a paragraph.

    In my header I have my logo then I have a slogan/tagline that's a sentence long.

    Obviously it shouldn't be a header tag, but not a <p> either. What would you guys do in this scenario

  2. #2
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know I could get away with using a <p>, but some people on here get pretty heated about using <p> when it's not for paragraphs of text. Just trying to be as correct as possible.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    I've never had a problem with using <p> as a generic container for passages of text, even if they aren't full-on paragraphs. If you want to be hypercorrect, you could use a <div> instead, but in that context, it makes very little difference.

  4. #4
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's no law that says that a paragraph can't consist of a single sentence. In fact, in normal English writing, it happens quite frequently.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I use "p"s for text content no matter how small the sentence unless there is another suitable element available such as a heading/list/address etc.

    Unlike a lot of people I also use "p" for images because an image speaks a thousand words and words belong in sentences which belong in paragraphs. If the image is in the foreground then it is content that is saying something so should be in a p element not a div. Not everyone agrees with this though

    In my mind divs are divisions of content and best avoided for raw content but rather as a means to section the page and group elements structurally.

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Well, I was gonna say something along the lines of Paul's comment, particularly about the incorrect use of divs in place of p's, but he said it a lot better than I would have, so ... what he said.

  7. #7
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    an image speaks a thousand words
    ....but aren't made of words.... and browsers need to be able to tell the difference. I'm surprised you use the <p> tag for images since images have their own tag, it seems semantically incorrect.

    I think it's ok to use a <p> tag for a singel sentence since a sentence is the smallest element of a paragraph and therefore IS a paragraph, like this sentence.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by JJMcClure View Post
    ....but aren't made of words.... and browsers need to be able to tell the difference. I'm surprised you use the <p> tag for images since images have their own tag, it seems semantically incorrect.
    Images are inline elements and cannot be a direct descendant of the body and must be enclosed in a block level tag. I just afford then the same courtesy when they are not direct descendants also.

    It's ok to wrap them in a div but I think that is less semantically correct than wrapping them in a p element. After all if the image is missing then the alt text will show and the alt text is usually the type of words that would go in a sentence.

    It is also semantically incorrect to do this.

    Code:
    <p>some content</p>
    <img src="img.png" width="50" height="50" alt="Image test" />
    <p>Some more content</p>
    Placing inline elements next to block elements is bad practice and indeed if these were direct descendants of the body would be invalid as mentioned before.

    The image needs to go in a block level container to avoid the browser constructing an anonymous block box for us. Whether you use a p or a div is debatable but I prefer a p element for the reasons I stated and because it's not a division.

    If you don't enclose inline elements then IE will quite often misplace the element and indeed gecko quite often doesn't know what to do with the white-space nodes that inline elements preserve.

    This is a pet hate of mine and I see it the equivalent of saying this.

    Code:
    <p>some content</p>
     anonymous text
    <p>Some more content</p>
    It's not invalid but it's just not nice
    Last edited by Paul O'B; May 16, 2011 at 07:11.

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It is invalid if you use a Strict Doctype. ;-)

  10. #10
    Non-Member ansaripk's Avatar
    Join Date
    May 2011
    Location
    US
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can divide everything in divs.

    #header {
    width:100%; height:200px;
    }
    #Logo {
    width:200px; height:200px;
    float:left;
    }
    #Logo .Image {
    width:200px; height:150px;
    float:left;
    }
    #Logo .slogan {
    clear:both;
    width:200px; height:50px;
    font-size:12px;
    }

    now you can use it for example:

    <div id="header">
    <div id="Logo">
    <div class="Image"> <img src="images/logo.jpg" alt="logo" width="150" height="150" /></div>
    <div class="slogan"> This is a slogan line</div>
    </div>
    </div>

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ansaripk View Post
    You can divide everything in divs.
    You can but its ugly and non semantic.

    Quote Originally Posted by Robert
    It is invalid if you use a Strict Doctype. ;-)
    Yes that's what I meant to say

  12. #12
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post

    This is a pet hate of min and I see it the equivalent of saying this.

    Code:
    <p>some content</p>
     anonymous text
    <p>Some more content</p>
    It's not invalid but it's just not nice
    I do this all the time.... (Given that you co-authored 'The Ultimate CSS Reference' I'm definitely not trying to prove you wrong here , simply trying to understand it better.)

    If <img> is an inline element but has width and height giving it block properties too I don't get why it has to be contained in anything. Since I never use images as direct descendants of the body, at the very least they're going to be in a 'mainContainer' type Div, I'm assuming that I'm failing to understand the importance of you 'affording them the same courtesy'? Why is it bad practice?

    If inline elements have to be contained within a block element, why hasn't one been invented for this problem with images?

    (OP, excuse the digression, I'm assuming that you're happy with the answers to your sentence/paragraph question)
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by JJMcClure View Post
    I do this all the time.... (Given that you co-authored 'The Ultimate CSS Reference' I'm definitely not trying to prove you wrong here , simply trying to understand it better.)
    lol - Robert and Tommy are the html experts. I'm just a CSS guy. I just do html the way I think it should be done which doesn't always mean I'm right.

    If <img> is an inline element but has width and height giving it block properties too I don't get why it has to be contained in anything.
    CSS cannot change the rules of html.

    It can change the appearance of things and it can set an element to have a "display" of "block" - which basically makes it display a block box. It still does not mean that the element is a "block element". They are different concepts and even though you change the display of an element it must obey the html rules for that element.

    Since I never use images as direct descendants of the body, at the very least they're going to be in a 'mainContainer' type Div, I'm assuming that I'm failing to understand the importance of you 'affording them the same courtesy'? Why is it bad practice?
    For the same reason and the same logic that you shouldn't do this.

    Code:
    <p>some content</p>  <span>anonymous text</span> <p>Some more content</p>
    It's valid and works (mostly) but it's not semantically correct.

    However, irrespective of the rights and wrongs it causes browser bugs and I see a few posts every month in the forum directly related to this problem. That in itself is enough to convince me to use other methods. As I said above a div will do fine if you don't like using a p element - but a "p" element seems right to me (and is less characters to type).


    If inline elements have to be contained within a block element, why hasn't one been invented for this problem with images?
    I suppose its the same as asking why there isn't a parent for a span. It depends on its use and it can go in paragraphs or divs or headings etc just like an image could.

    Actually I think it would have been more sense for images to be elements like del and insert which are both block elements and inline elements depending where used. Then it would be fine to have them stand shoulder to shoulder with block elements.

  14. #14
    Error 404: Life not found silver trophybronze trophy
    Join Date
    Dec 2007
    Location
    UK Nr Manchester
    Posts
    3,460
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post

    Actually I think it would have been more sense for images to be elements like del and insert which are both block elements and inline elements depending where used. Then it would be fine to have them stand shoulder to shoulder with block elements.
    Ok, I'll bear it in mind in the future, thanks.
    It's 530 people, but do you really get it?
    ImgWebDesign - Web design in Buxton, High Peak, Derbyshire UK.

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Actually I think it would have been more sense for images to be elements like del and insert which are both block elements and inline elements depending where used. Then it would be fine to have them stand shoulder to shoulder with block elements.
    I would support this, because a paragraph and an image are two very different kinds of content. Wrapping images in p's is something I *only* do to get around the idea of loose inlines mixing with p's, and I cringe every time I do it, because I know deep down inside that it's actually very wrong. An image content, but it is not a paragraph, nor a text fragment. It merely has a text fragment as a backup, and this fails on all sites where content is uploaded by those who are not the webmaster (they either don't have alt text even tho they are content, or cannot have correct alt text).

    The render problems people have with browsers when mixing the two vanishes when you set those inlines to blocks in CSS, which with images, you usually are anyway.

    I have no issue putting block text fragments in a p. P means "block text content" to me so this is not an issue. In the OP's case, I have and probably will continue to use a p for that kind of situation. Esp since a tagline included makes it pretty close to a sentence.

  16. #16
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    This is definitely a time where Tommy should weigh in. I miss the Mad Swede around these parts.

    It would be interesting to go back into the original HTML specs and see what Berners-Lee and the other creators intended the <p> tag to be used for in a strict semantic sense.

  17. #17
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Meh, you see how in the specs they use p as the tag to wrap label-input pairs in forms? Professional opinion about tag semantics isn't stable and obviously has changed since the specs were first written over a decade ago.


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
  •