SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is surrounding <img> with <div> really necessary?

    Hi,

    It's been absolutely ages since I wrote any HTML and my memory needs jogging. I've checked out the reference here but it didn't answer my question.

    My question is, when I insert an <img> in the markup (for example just the logo, nothing else), is it best to surround the <img> with <div> like so:

    HTML Code:
    <div><img src="path/to/my/image.jpg" alt="Insert description here."></div>
    or just have the <img> stand alone like so:

    HTML Code:
    <img src="path/to/my/image.jpg" alt="Insert description here.">
    I ask because I tried the second option and the validator threw up an error saying that I needed to surround it with a block level tag like <div>, <p>, etc. I thought that was weird seeing that it was just an image. Is it really necessary to surround all my images with <div>?

  2. #2
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    There was a post here a few days ago on this subject, maybe browse that thread?
    http://www.sitepoint.com/forums/showthread.php?t=643675
    Ryan B | My Blog | Twitter

  3. #3
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I haven't been here for ages either.

    But it's a slightly different scenario there, however I get the point. So technically it's a good thing to surround <img> with a block level element like <div>. I get it.

  4. #4
    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 argue it all depends on your layout. I'd say

    Code:
    <body>
    <div id='container'>
    <div id='heading'>
     <img ...> 
     <h1>My company</h1>
    </div>
    <div id='content'>
    ...
    </div></div>
    </body>
    is a fine method for layouts.
    Ryan B | My Blog | Twitter

  5. #5
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought so too until the validator threw up errors. Now that I've surrounded my <img> tags with <div> tags, it validates properly which is still a mystery to me because I don't recall having to do this before.

  6. #6
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,403
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Don't forget to close the tag...
    Code:
    <img src="image.png alt="whatever" />

  7. #7
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    img is an inline element, so must be wrapped in a block level element.
    If the image adds content use img, but if it is purely decorative then include it as the background to an element.

  8. #8
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bluedreamer View Post
    Don't forget to close the tag...
    Code:
    <img src="image.png alt="whatever" />
    Only in xhtml

  9. #9
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dogFang View Post
    Only in xhtml
    I'm using HTML4 Strict.

  10. #10
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Good. HTML 4.01 Strict is what all the cool kids do.

  11. #11
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep. I hate it when I go to somewhere like ThemeForest and find cool looking stuff only to find it's written in (X)HTML Transitional.

    I should slap myself, no wonder I forget the basics when I don't write markup for ages.

  12. #12
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The only two doctypes anyone should be writing new pages in now are HTML 4.01 strict or XHTML 1.0 strict and unless you have a good reason for using the second of these you should be using the first one.
    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="^$">

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,

    mate i insert my images using this

    <p><img src="divers-circle.jpg" width="200" height="162"
    alt="A circle of divers practice their skills"/></p>

    hope it helps

    dean

  14. #14
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but on the page I'm doing, there are no images within paragraphs.

  15. #15
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your initial problem is likely due to the image being a child of body. Body may have only block level elements, scripts, and the chameleon elements, ins and del, as children.

    See 7.5.1 The BODY element.

    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

  16. #16
    SitePoint Evangelist happyoink's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah that would explain the error the validator spat out. Thanks Gary!

    It also explains why I don't recall having to wrap my <img> tags with other elements such as <div>. It's because most of the time I used a wrapper.


Tags for this Thread

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
  •