I’m creating user customizable HTML templates and deciding on what elements types to use. On the one hand I could use the most appropriate HTML element type for each type of content – ul’s/li’s for lists, h1’s, h2’s (etc) for headings and so on. On the other hand, I could just use div’s with class attributes. In fact, I’d have to use class attributes with either approach and I’d have to additionally zero some of the nasty default properties on some HTML element types if I used the former approach.
Given the flexibility of CSS it is quite easy to use div elements for virtually every element containing text, and probably possible to do so using less CSS. Should I try to use h1 to h6’s, spans, ul’s, li’s, hr’s, p’s etc for their intended purposes, or just go with divs?
You should the appropriate tags because they convey the semantics of your data. There is a difference between saying “this is a header” and “this is large, bold text”. This information is valuable to screen readers, search engines and other kinds of user agents that aren’t your “normal” browsers. Furthermore, people who don’t use your stylesheets (for whatever reason) will still be able to read it, but they won’t if all your tags are divs and spans (at least not as easily).