Trying to avoid divitis

Discussion in 'HTML & Website Design' started by peter lewis, Mar 23, 2013.

  1. #1
    I sense from reading this forum that it's not cool to overuse divs. To avoid this should I enclose a full-width image in an alternate tag such as <p>? Nothing else will be in the block except the image.
     
    Solved! View solution.
    Last edited: Mar 23, 2013
    peter lewis, Mar 23, 2013 IP
  2. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #2
    It is indeed uncool to overuse DIV, but don't get the wrong idea and think they are evil. Unfortunately, some people got that wrong part of it, and started to abuse semantically meaningful elements instead, like P. Therefore, some of them don't use tables even when given data is tabular, and start nesting, not DIV, since they are evil, but P and SECTION (html5)! That's why many of them slap the 5-lip service, they just don't get it!

    There is no need to enclose it anywhere, if that's that IMG is the only child. Not that IMG belong to a paragraph anyway! If IMG can be considered as a group of sentences dealing with a particular common point, then you must have followed that "PSD to HTML tutorial" wrong! Even those dumb dipshits clearly state that text shouldn't be "sliced".
     
    wiicker95, Mar 23, 2013 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    There likely is a block level element with the proper semantic value to hold the image. But you haven't provided enough info to say which. What is the meaning of the image? Is it the company/site/page's name in graphic form? If so, the likely container is a header, e.g. H(x). Otherwise, consider the image a text replacement (you do have an alt attribute and value, right?). Then another text holder is implied.

    The div element is an aggregating element, used to hold multiple block elements in a unified context. It has no semantic value, itself. In a similar manner, the span element is a non-semantic segregating element; intended to separate the tagged inline content from adjacent inline content. If you find yourself using either in a different manner, it's a good bet you're doing it wrongly. Step back and see if there isn't a semantic element tag that applies.

    If that answer is lacking for you, tell us more about what the image is doing — what it says and its context.

    cheers,

    gary
     
    kk5st, Mar 23, 2013 IP
  4. peter lewis

    peter lewis Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    the image projects the main theme of the site(?)
     
    peter lewis, Mar 23, 2013 IP
  5. #5
    That suggests the wrapper should be <h1>.

    g
     
    kk5st, Mar 23, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    I would say nothing is really 'wrong' with the DIV, it would be far, far, far, far, FAR less wrong than putting it in a P since what the devil makes that IMG a paragraph of text? The only time a P around a IMG would be appropriate is when that IMG is in flow -- like say a smilie :D

    DIV is a semantically neutral container, it does not change the meaning of what it's wrapped around (the same goes for it's inline-level counterpart, SPAN) -- it should be used AROUND tags with meaning to group them together as needed or to apply style.

    Not sure what the devil "projects the main theme of the site" even means, unless as kk5st suggests it should be the H1; heading under which all other content on the page is a subsection and all other headings on the page indicate the start of a subsection... in which case it shouldn't even BE an IMG tag, it should be applied from the CSS as that's presentation, NOT content. IMG is for content images, not 'presentation' or theme images!

    Of course if the image IS content and should be in the markup as IMG, and assuming you already have some form of outer div for applying something like width restrictions or to group together a section of content for styling -- what the devil does it even need a block level container around it for in the first place?

    THAT's the question a lot of people fail to ask, and it's the most important one when it comes to using DIV. You see it all the time around headings, images, and lists.... Menu lists in particular you'll see this garbage all the time:

    <div id="mainMenu"><ul>

    What the devil is being done to the DIV that couldn't be done to the UL, which is a perfectly good block-level container in it's own right? THAT's Divitus! If you aren't using that extra element to actually do anything you can't apply to the tag inside it directly, GET RID OF IT! There's no reason for a DIV -- much less a tag with semantic meaning like P or H1.
     
    deathshadow, Mar 23, 2013 IP