It looks like Gunlag and Holly have provided some good suggestions. You
could even get more granular:
<p class="milage">Milage: xx</p>
<p class="surface">Surface: xxx</p>
<p class="county">County: xxxx</p>
This provides you more detail that you can use in the future. (To place
an icon next to the details instead of the word Milage, for example.)
At any rate, the semantics are what was wrong with your original code.
Remember, headers and paragraphs are both "block level" elements that
can't (according to the dtd) contain other blocks. Another way to look
at it is that a header is sort of "paragraph, type=headline".
Or, think of a book. You have a book title (header), followed by
paragraphs. You wouldn't start the first paragraph inside the book
(Experts, feel free to correct my simple expanation.)
As others have alluded to, think about *what* the data elements are,
then try to use the most appropriate html code. After that is done, you
can worry about styling them. The beauty of css is that you can
visually place paragraphs next to headers, and retain the semantics of
And there are probably 100 different ways to code that simple block
above. The trail detail paragraphs could be <span>s, you could do a
definition list, or an unordered list, or whatever works best for you.
I hope this helps. I'm a complete newbie at this too and I know how
frustrating it can be figuring out what it all means. Just wait for the
IE box model problem - I had to tackle that over the weekend.
Do you Yahoo!?
Declare Yourself - Register online to vote today!
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/