SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Enclosing <img> in <p>?

    Which code is the most semantically correct?

    This

    Code:
    <div>
    <img>MY IMAGE HERE</img>
    <p>MY PARAGRAPH HERE<p>
    </div>
    or this?

    Code:
    <div>
    <p><img>MY IMAGE HERE</img><p>
    <p>MY PARAGRAPH HERE<p>
    </div>
    Wordpress is surrounding my <img> tags automatically with <p> tags and therefore I would like to know whether this is something good or not? thanks

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Technically both as their contained within block level elements, though your IMG element is incorrect on the basis that images don't have closing tags or text inside

  3. #3
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hehe yeah oversight there with the closing img tag

    back to figuring out how to remove that p tag then

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by drtanz View Post
    back to figuring out how to remove that p tag then
    Why do you wan't to remove the paragraph tag?

  5. #5
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    because its enclosing my <img> and messing up some of my design

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by drtanz View Post
    back to figuring out how to remove that p tag then
    You can modify that sort of behavior by digging into the bowels of WordPress.

    Have a look at wp-includes > post-template.php line 944ff. I think that's where this rule is applied.

  7. #7
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, trying to find a suitable plugin if possible as i would prefer not to modify core code that might be updated later and nullify my changes

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Indeed, I was just about to edit the post and say that this sort of change plays havoc with updates, so I never make changes like this outside the theme folder.

    But really, I'd say the easiest solution--if you don't like the way the pages are rendering--is to tweak your CSS. You should be able to get your images to render any way you like via the stylesheet.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    An image by itself isn't really a paragraph but the alternate text that some people will see instead of the image probably is and so you could probably justify treating an image as a paragraph on that basis.

    I tend to wrap images in div tags when needed rather than paragraph tags.
    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="^$">

  10. #10
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I, on the third hand, tend to wrap images in p tags for the reason Stephen mentioned.

    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

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    <div>
    <img src="" />
    <p>MY PARAGRAPH HERE<p>
    </div>
    This is a pet hate of mine and if you use the above structure you are in effect saying this:
    Code:
    <div>
     I'm a
     <p>badly structured section</p>
    </div>
    Note that the above code will validate but it is not semantically correct.

    Neither is the following acceptable.

    Code:
    <div> 
        <span>I'm a</span>
        <p>badly structured section</p>
    </div>
    In both the above cases you have inline elements running straight into block level elements and the browser has to step in and create an anonymous block box so that the structure is correct.

    Any time you make the browser think then you are asking for trouble in IE and indeed the half finished structure causes many bugs that I see time and time again in the forums and results in missing or misplaced content.

    Therefore I always try to ensure that all inline elements are on the same level as other inline elements and that they are contained within a block element before another block element starts.

    I prefer to wrap images in paragraph elements because most of the time it makes sense to me and I hate wasting the four extra characters that a div takes. (I see divs as divisions of content rather than containers for individual items although I accept that at times there is no choice.)

    If an image in the html then that means it's important content and saying something to the visitor. When you say something you use paragraphs.

    Therefore to avoid bugs in IE and also to be semantically correct I would do this.

    Code:
    <div> 
        <p><img src="".... /></p>
        <p>well structured section</p>
    </div>
    Although I agree that this is also acceptable but not my preferred method.

    Code:
    <div> 
        <div><img src="".... /></div>
        <p>well structured section</p>
    </div>

  12. #12
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect explanation Paul, wasn't aware of this, turns out I was being the bad boy not wordpress then thanks again for your patience in explaining

  13. #13
    SitePoint Member
    Join Date
    Apr 2009
    Location
    Philadelphia, PA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used to prefer not to wrap my IMG tags with extra tags but Paul O'B convinced me!

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hmm, I've been known to wrap the image in an <a> tag and set it to display: block, but I'll rethink that now:

    Code:
    <div> 
        <a><img src="".... /></a>
        <p>well structured section</p>
    </div>
    I can see why it would be better to wrap the <a> in <p> tags. Interesting discussion!

  15. #15
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    848
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to make sure I'm getting this right, this would be a correct statement then?

    <p>Here is the red pill <img src="red_pill.gif" /></p>

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Yes that would be fine

  17. #17
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I prefer to wrap images in paragraph elements because most of the time it makes sense to me and I hate wasting the four extra characters that a div takes. (I see divs as divisions of content rather than containers for individual items although I accept that at times there is no choice.)

  18. #18
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Below code is not correct, there is minor mistake.
    <div>
    <p><img>MY IMAGE HERE</img><p>
    <p>MY PARAGRAPH HERE<p>
    </div>
    It should be written as below
    <div>
    <p><img src="MY IMAGE HERE path" /></p>
    <p>MY PARAGRAPH HERE</p>
    </div>

  19. #19
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hmm, I've been known to wrap the image in an <a> tag and set it to display: block, but I'll rethink that now:
    I do that all the time. If it's illegal to have inlines and blocks as siblings then I sure would like the W3C to make that rule. After all, they change the rules to make Mozilla happy, so no reason not to do this too :/

    For me I guess it wouldn't matter if I used <div> or <p> because if I'm wrapping an image, I'm usually floating it anyway, so then the p is required to have a class or id on it because I can't just float img because the block of the p stops all the cool text wrapping I want. So it's a bunch of extra characters in any case.

  20. #20
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    If it's illegal to have inlines and blocks as siblings then I sure would like the W3C to make that rule.
    Actually it was a rule in HTML5 before, but that was later changed to allow inline and block as siblings, because most people do that and get confused when it's suddenly not allowed and it also doesn't really cause a technical problem to mix them.
    Simon Pieters

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    ^interesting.

    *edit now I'm curious, how would dropdowns work?

    Usually we have <li><a href="#">some anchor</a> and then a sibling <ul> stuff inside</ul></li> and now we should be having issues. Or not?

    I'm someone who prefers a One True Way and very strict rules, maybe because I am someone who is easily confused.

    Hmm, maybe I should go do Java : (

  22. #22
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When HTML5 did this, it used complex rules that no-one understood where <ul> was a so-called structured inline element which was considered an inline element (for the purposes of content models) when there were other content in the same parent that could only be considered inline (such as text or <span>), and was otherwise considered a block element.
    Simon Pieters

  23. #23
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I'd just like to commenty on what Felgall said in post #9. There is an attribute called alt. The alt attribute is required by the w3c to be valid code. The text inside the alt attribute is what screen readers read to users when they come across an image, so this text should only be about a sentence long. IF you need to provide a longer description of an image you use the longdesc attribute, where you provide a link to preferabily a text file, where you can go for broke.

    One thing I do is:
    Code:
    <div> //usually floated/styled
     <p><img src="" alt=""/></p>
     <p>Above: [my paragraph]</p>
    </div>
    This is valid code, it tells the screen reader to essentially skip that there is an image and read the text below it.
    Ryan B | My Blog | Twitter

  24. #24
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Yeah my screen reader skips the image unless the image is in an anchor (then it says Link graphic and if there's no other text it reads out the url). But usually (not always) an image with an empty alt attribute belongs in the CSS in the first place.

    Except obviously when you need a floated image so text wraps around.

    That said, there's no reason not to
    Code:
    <div> //usually floated/styled
     <p><img src="" alt=""/> Plain ol tekst</p>
    </div>
    There, the inline image is together with all the anonymous inline boxes of the block p, and passes Paul's perilous pedantic... can't think of a word that means "rules" that starts with a p... paradigm? Lawlz.

  25. #25
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    ...and passes Paul's perilous pedantic... can't think of a word that means "rules" that starts with a p... paradigm? Lawlz.
    Perhaps "parameters"...


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
  •