it was a good go at it…lol. but there are more accurate methods.
OK, there IS a difference between CSS and HTML. I thought you wanted it to be automatic, so I thought you meant the HTML doing the numbering… which is why I had originally suggested an OL.
Dont worry about media all. force of Habbit. Media all means that style tag will apply to all media ( aural, printing, cell, etc )
MY bad about counter-reset, counter-increment the bullet class , etc they aren’t doing anything anyway… but you can take them out.
The hopefully clean CSS is
<style>
h1, h2, dl, dd {font-family:Arial, Helvetica, sans-serif; margin:0; padding:0 }
h1{ text-align: center; text-transform:uppercase;}
h2{margin: 1em 0 -.5em 0 ; background: }
dl {margin: 0 ; padding: 0 0 0 125px }
dt {margin: 0 ; padding: 1em 0 0 0 ;}
dt .bullet {text-transform:uppercase; float:left; margin-left:-125px; width:100px; text-align:right; font-weight:bold;}
dd p {margin: 0 0 1em 0 ;}
</style>
this is what happens when I code and pack at the same time. lol
just to answer your question I named the class bullet because it makes sense. but whatever you name a class or ID in CSS doesn’t matter semantically. I chose “bullet” because that’s what it is… a bullet in a list… the same way as someone would put a “*” or a number… your bullet was “Myth #”
I didn’t like the size of <h2> so I skipped it!
I hope shadow doesn’t read that first… LOL!!!
Thats what CSS is for… to change the look of your html. That means: change the size, color, font, spacing, position, etc of any tag. so if you don’t like the look of an H1 or h2… or whatever you use css like this H2{ font-size: 80%; font-family: Arial, san-serif; font weight:normal; padding .5em 0 ; } etc…
you cant change the tags… which is what all of us have been trying to say, because each tag actually has a MEANING. 
Am the rare art director. when I start a page, I like to do it as a text file ( not a word , or anything in which I can make it pretty… but a text file in which I cant even use bold or caps.
once I have my content written out that way… it becomes “easier” to see whats a list, whats a paragraph, whats a blockquote… what should be a headline, etc.
Once I wrap the proper tags around the content I have a “boring” but semantically correct all text HTML outline of the page. This is what you should aim for.
Afterward, I add any semantic touches EMs and STRONGSs for things that need to emphasized. After that any last minute spans for part of the content that will need styling later or that want to separate from the rest of the content…
ONCE you have THAT right… then you can use pure css, for your layout, typography, etc. At times I find I would need an extra tags to move a block of elements or to add an extra bg graphic, or hover effect… etc. that’s when I start wrapping divs AS NEEDED.
Nothing is a problem from a semantic stand point as long as you MEAN it ( as opposed to doing it because it looks good).
You were right in thinking , for example, that an FAQ is a list… because it is a list of questions and answers. The discussion has been is it a UL, OL or DL. and as you can see there are arguments favouring all of those.
I would argue, that “Myth #__” is a bullet and has no meaning, but since it’s so important that it be visible even in IE6 some might argue that its part of your content and that meaning is lost if it’s missing. if , as such it has meaning… then it makes sense that it is part of the definition term ( that’s what DL stands for)
in your attempt using divs… it was just text with no parts ( except the h1 and h3) having any semantic meaning. there is literally NO semantic differentiation between when you say “myth #” “Fresh vegetables…” and “Studies show…”. and that’s what makes it wrong.
remember when I said type your content in wordpad… no establishments … no even bolds… only line breaks? If you look at that bland text semantically it will seem like this to you:
Headline: which describes EVERYTHING on the page… that’s your H1 ( you can only have one, because how can it describe everything on the page if there is another H1 below it ( does the second h1 describe everything on the page BUT the first h1??? see? )
H2-h6 are like sections and sub sections of the page… a navigation, a main article a sub main article … and so forth. So in your case "Somethings you should know… " is a heading that goes into more details about your H1 which again is “common myths”
Lists ( do I really Need to go onto what is a list? lol! ) But it interesting to note that that’s why navigation are often LISTS… since a navigation is essentially a list of links.
We are opting for a DL because of the weight this tag carries semantically.
Each DT implies the term within it. Each DD implies it is a SEPARATE and standalone definition pertaining to the last DT above it in the code ( this is what you can’t use DD to make paragraph breaks… because if you do you would be essentially implying there are TWO different definitions to the same term as opposed to expounding on it.)
Hope that gives you more of an insight into semantics and HTML
