Divitis, how to cure it

HTML & CSS
1

I suspect that I’m suffering from divitis, but im not sure.
i think this because i seem to overuse div’s and id’s on div’s

I try to keep all the content that i can within its meaningful semantic markup, but I don’t seem to utilize anything beyond

h1, h2, h3, h4, h5, h6,
p, em, strong
dl, dt, dd, ul, ol, li

i never ever seem to have the need for blockquote or address (with the exception of the contact page)

but even then that is far too little markup to create the css layouts that i want, and thus i overpopulate the whole thing in the ever popular content div, the header div, the footer, div, the <div id=“body”> div (I know i can use the body tag for this, but IE5 screws up in this case)

so after reading countless tutorials on markup, curing divitis, and even read the full sitepoint html reference, but nothing changed with my markup, its still full of div’s

and i still don’t know what tag is meant for plain text that is not a paragraph or a list or a heading.

and when i try to get rid of it, i endup turning everything into lists, and i look like im suffering from listitis

how do you find out if someone has divitis? and how to cure it?

<div id="body">
<div id="header">
        <h3>A COMPANY</h3>
        <span>Presents</span>
        <h1>EXCLUSIVE</h1>
        <h2>stuff</h2>
</div>
<ul id="feature">
    	<li><a href="#"><img src="images/top-thumb1.jpg" /><span>link1</span></a></li>
        <li><a href="#"><img src="images/top-thumb2.jpg" /><span>link2</span></a></li>
        <li><a href="#"><img src="images/top-thumb3.jpg" /><span>link3</span></a></li>
        <li><a href="#"><img src="images/top-thumb4.jpg" /><span>link4</span></a></li>
        <li><a href="#"><img src="images/top-thumb5.jpg" /><span>link5</span></a></li>
</ul>
<div id="content">
<h1 class="exclusive">EXCLUSIVE</h1>
<p>
Text text text
</p>
<p>
Text text text
</p>
<p>
Text text text
</p>
<p>
Text text text
</p>
<p>
Text text text
</p>
<h2 class="exclusive"><span>M</span>ORE <span>F</span>ANCY <span>T</span>EXT <span>W</span>ITH <span>E</span>NLARGED <span>F</span>IRST <span>L</span>ETTERS</h2>
<a href="#" class="banner"><img src="images/image10.jpg" height="92" width="810" alt="some text" /></a>
</div>
</div>
<ul id="footer">
<li>stuff</li><li>stuff2</li>
</ul>

above is my attempt at avoiding divitis
the body is centered, the footer is separate from the body

2

Well, you can get rid of the body div if that’s only for IE5, because nobody uses IE5 anymore. You don’t write code for 0.2% of global browsing (I’d be happy to back that up with precise counts), and likely 0% at your own site.

3

yes, i seem to be over-supportive and overly backward compatible.

is that the only thing wrong?
I mean right now its there to separate the footer from the body, but i can work around that.

4

Plain text that is not either contained within; Heading(s), Paragraphs, Lists or inside Tables and not an Address, Code or Quotation is most likely PRE formatted text. Anyway, Hx and P are bread-and-butter and possibly will account for about 95% of the marked-up content.

I am sure you know you can apply more than one CSS style class on a single element for example <p class=“one two”>Hepp</p> and then you possibly could think of more creative CSS matching (in some cases) rather than just DIV wrapping as much.

But that example doesn’t look too bad; usually you will have similar to: header, footer, main and navigation in most pages anyway…

5

I still don’t do a heck of a lot with my body’s. IE5 wasn’t the only one who had issues with it, depending on what you did with it. Paul’s got a thread somewhere on it.

Other than the strange order of your headers, and the double h1 for a reason I can’t figure out, for a document page, that looks about right.

I’m also pretty much using those same tags you listed most of the time.

This is divitis:


<!--BEGIN HEADER LAWLZ AS IF YOU COULDN'T READ THE NEXT TAG!-->
<div id="header">
<div class="header top">
  <div class="tr"></div>
  <div class="tl"></div>
  <div id="logo">
    <div><p class="logo"><a href="home"><img src="logo.gif" alt="JOE'S GARAGE IS JAWSOME"></a></p></div>
    </div>
    <div id="headermenu">
      <div class="menutop">
        <ul>
          <li><a href="foo">item 1</a></li>
          <li><a href="foo">item 2</a></li>
          <li><a href="foo">item 3</a></li>
          <li><a href="foo">item 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="headerbottom">
    <div class="br"></div>
    <div class="bl"></div>
    <div class="orangeborder">&nbsp;</div>
  </div>
</div>
<!--END HEADER-->

You ain’t got that.

6

Plain text that is not either contained within; Heading(s), Paragraphs, Lists or inside Tables and not an Address, Code or Quotation is most likely PRE formatted text. Anyway, Hx and P are bread-and-butter and possibly will account for about 95% of the marked-up content.

but i do see cases when its neither a H or a P or a PRE
should i just leave it there without any tags encompassing it at all?
i mean i can have text “login required” at the top right, which is neither a header of a paragraph…

I still don’t do a heck of a lot with my body’s. IE5 wasn’t the only one who had issues with it, depending on what you did with it. Paul’s got a thread somewhere on it.

Other than the strange order of your headers, and the double h1 for a reason I can’t figure out, for a document page, that looks about right.

thanks for popping in Poes :slight_smile:

Paul’s got a thread somewhere on it.

linky linky? ive seen several threads by paul about it, even a css quiz was dedicated to curing it but i missed out on that one.

Other than the strange order of your headers, and the double h1 for a reason I can’t figure out, for a document page, that looks about right.

what would you recommend for something like this then?

A COMPANY
Presents
EXCLUSIVE
stuff

also thank god that example ain’t divitis, but sometimes my html does end up like your divitis example, this is usually because of easy of use and rather complex css styling, and i want to maintain the complex css, but at the same time i want the markup to have meaning, html is a lot more than just headers and paragraphs and lists, but when coding it does not seem like it is.

7

The term “Login required” can be a paragraph or even emphasised it’s not a “nothing” even though it is just two words in a full sentence (I assume that’s what you mean). A DIV is just a ‘generic’ so usually that wouldn’t be suitable enough, again it depends upon nesting level, i.e. what is outside of “Login required” text.

8

i.e. what is outside of “Login required” text.

the header div, then the body.

so i should keep all my undetermined non paragraph text inside <em> tags?
i feel like I’m missing something here.

9

Well I would go with something like this…

<h2><em>A Company</em> Presents <strong>Exclusive</strong> <span>Stuff</span></h2>

You can use h2 em, h2 strong, h2, span { display: block;} to force a new line entry for each item, size the em, strong and span independently of the h2 (for presents), you can use text-transform: uppercase; to enforce caps on the required words and it removes the need for abusing the heading elements. :slight_smile:

10

I pretty much agree with Alex: it’s one sentence with different styles, not different tags for different meanings. Whether it’s an h2 or an h1 or something else, depends on the context of the page.

*edit, the linky linky: http://www.sitepoint.com/forums/showpost.php?p=4509361&postcount=21

11

@YuriKolovsky

In your given example, you have ‘two’ h1 elements, and you should only have one.
Also, you must make sure that no headings reside before the h1 element.

h1
h2
…

One more thing to point out is that inline level elements shouldn’t site beside block level elements.

12

The thing to remember is that just because it overflows onto a new line doesn’t mean it requires a new tag / element. You don’t use paragraph tags on every line, and you don’t need heading tags for every line of this. Just read what you put, it’s one sentence just spaced to overflow under each other. Hence why I recommended the method I provided, it uses H2 (H1 should ONLY be used once, and it should represent the title of the page) and strength and emphasis are provided for the bit’s which have added importance in the sentence structure. You can restyle the elements as they are required to appear. :slight_smile:

13

I think i should have called it unhtmlivitis.

14

[ot]Erm, with Alex’s and my medical backgrounds, we really should be taking the web dev world to task with that kind of language.

It’s not divitis, it’s divosis. An abnormal condition of divs. -itis refers to inflammation and I’ll be damned if I’ve ever seen inflammed divs. Same goes for classitis.[/ot]

15
Off Topic:

unhtmlivosis?

i think my h’s were inflamed though xD
though your a bit late to redefine the already famous divitis condition.

16

Stomme, I agree, though I just follow the naming convention as its something that has dug into peoples minds (I guess that’s the main thing) :slight_smile:

17

You can use the body as a main container and put something (e.g. navigation stuff or even a side column) outside it:

<body>
  <h1>title</h1>
  <div id="nav">
  <ul>
    <li>...</li>
  </ul>
  </div>
  <p>stuff</p>
  <p>stuff</p>
  <div>sub-content</div>
  <div id="footer">...</div>
</body>


html {
  margin:0;
  padding:0;
  background:sexy;
}
body {
  background:less-exciting;
  border:whatever;
  margin-left:200px;
  position:relative;
}
#nav {
  position:absolute;
  left:-200px;
  bottom:0;
  top:0;
}

Granted, not useful for most situations. :slight_smile:

18

I think divitis moslty comes from people trying to convert table-based layouts to semantic html, basically swapping the th/td for div.

If you write your HTML with the meaning of the content in mind rather than how it should be laid out, the problem will cure itself. I think as you get more experienced, you will be able to see where you will need divs for CSS hooks on the layout, and start putting those in automatically - usually header, footer, content etc.

I always try and have a content div where I ‘reset’ everything, so I can have any layout and styles I like in there without breaking the layout or outside the content box - eg, floats all cleared, perhaps position: relative on it so you can position absolutely inside it etc. This makes putting CMS content in without worrying about it breaking your layout a lot easier as well!

19

@cooper.semantics
will do, i never knew this.
@raffles
haha smexy background
Yes thats what i was planning to do for the current specific site.

@stormrider
I have never ever designed with table based layouts, my main problem was/is not speficically divitis but, the combination of divosis with classosis? everything has to have a class, everything has custom styling, everything needs a unique hook, and i still can’t use CSS’s nth-child selector, so i try to split the meaning of the tags by adding more classes, more divs.
the primary reason why i use a body tag with a id is because then i can swap the id and have a page that is not affected by any of the default css hooks, same goes for header, footer and content, there’s always the thought “please don’t break the site”
(@alex by saying please don’t break the site i actually mean, “please don’t affect any of the ‘anchor’ colors outside of the footer”).
I know this is fixed using more organization, but I was looking for advice on how i should do it.
so far i learned that h and p are simply not enough, and that the header text no matter how complex should be encompassed in one header element (and possibly one subheader)

20

There is NO technical/logical reason not to have more than ONE H1 with in a page although usually there is no need. Although in the original example they weren’t really applied in a logical sequence - with that I agree. Usually you shouldn’t skip headings levels, i.e. (h1, h3, h1) is bad whereas (h1, h2, h1) is good practice. But obviously in most cases you don’t use more than one h1.

Also, I find it a slightly strange Alex suggested adding emphasis within a H2 when a H2 is already considered ‘emphasised’ but in a weird way I understand what he is getting at or his point of view. :slight_smile:

All I can say is there is some differing views…