Topic: HTML semantics for blocks of text with titles

When I write HTML, I try to make it as timeless and robust as possible with as little hacks as possible. I like to have a page 100% functional without JavaScript before I add the JavaScript, and I like to have the page remain legible without CSS positioning or variable font size (for mobile phone browsers) and even without CSS at all. For the latter, it is crucial to employ proper HTML semantics. That is to say, to use the right HTML tags and not just rely wholly on the div.

For the longest time, I've had an inner debate on the most logical way to mark up titled blocks of text: for instance, a blog entry, a forum post, or a description of a person or product. They all consist of a title and some text. I will now go through all my solutions to date and their pros and cons.

1. Pairing of h2 with one or more p
- this solution is appealing to the lazy programmer because it requires the least amount of markup
- the depth of the document tree isn't strongly affected
- h2 displays as bold in a mobile phone automatically
- h2 and p both have good pre-formatting for use without CSS
- no real logical envelope for a single block of text (useful for JavaScript)

2. Pairing of h2 with one or more p, wrapped inside a div
- looks good everywhere, CSS or not, mobile or regular browser
- logical envelopes for each block
- I prefer to use divs for top-level site layout

3. Definition list with one or more paragraphs in the dd
- relatively well structured
- each block has an outer wrapper
- looks good without CSS on a regular browser
- looks bad on mobile phones (dt and dd are both non-indented plain text)
- definition lists can have multiple titles and multiple definitions, so it feels like they're too much
- just not what definition lists are for
- adds a lot to HTML depth

4. Divs everywhere! One as a wrapper, one for the title, one for the body
- easy to style
- each block as an outer wrapper
- good structure
- completely dependent on CSS
- like I said before, I don't like using divs for everything

I like the second solution the most. That I don't like using divs for everything is really just a whim. However, because this is a matter of what's most semantically correct, or even a matter of what's the standard, I'd like everyone's input on the matter. If you have your own solution, please share it.

Last edited by Milosz (2009-08-10 15:03:17)

Re: HTML semantics for blocks of text with titles

I'm waiting for the day HTML5 will be universally supported as it adds a number of new tags to help avoid the universal div, although I'm not sure what kind of default styling they will get. Check here for a brief overview if you're not familiar with HTML5: … -be-using/

I tend to go with #2 for now as well. I don't really mind using DIV to mark up sections of a page, although having SECTION and ARTICLES tags in HTML5 will greatly help there.


Re: HTML semantics for blocks of text with titles

I read through that tutorial and HTML5 looks brilliant. I can't wait until it's widely supported as well.

Thank you for your input, I think I'll go with the div-encapsulated headings and paragraphs after all then.