Heading Tags

A while back, maybe three years back and from the time I started using CSS, I used to do a couple of markup quirks (that incidentally made it easier to spot copycats, but that’s another story). I used CSS classes all over the place, like below:

<div class="content">
<div class="divTitle">Some title</div>
<div class="divSubTitle">Some sub heading</div>
<p>My content went here, in ordinary P tags.</p>

It worked for me. But starting from around two years back, I finally weaned myself off of using the semantically-blank DIV tags (where appropriate) and use proper HTML markup. My biggest reason for this is lesser code, and my page is “prettier” when the CSS is turned off. Observe:

<div id="content">
<h1>Some title</h1>
<h2>Some sub heading</h2>
<p>My content went here, in still ordinary P tags.</p>

In terms of style control, it was easily done via CSS anyway; and if I wanted a completely blank stylesheet anyway, a nice CSS reset will do that for me. (A word of note though: CSS reset does have its pros and cons. Personally I’m still a bit on the fence as to whether I’d go for using one that reset all the native styles or not, above the paddings and margins.)

An interesting post on heading tags, including a possible system/technique on using them, was posted by Matt Snider: When to Use Heading Tags. It’s a good, interesting read.


  • It’s great when you learn stuff like this through work, isn’t it? Directly or indirectly. I’m learning a lot of things myself — some stuff that I know in the back of my mind but haven’t really had a stance on before, and new stuff and realizations. IT really is a pretty interesting industry (or, well, at least for us in the industry, I suppose? :D)

    I think I still have a few fanlistings on this, too. Meep?

  • Looking back at my aging fanlistings, I’m seeing a lot of this :\ I think everyone went through this stage where they thought the only “good” HTML tags were div and p. That and “center” haha.

    I completely agree: It makes things a lot quicker with the ‘proper’ tags. Headings are the most common to be used as divs back in the day.

    Now that I work for RIM, I frequently visit my sites (for fun) on my Blackberry. Before, without headings, it would be a lot of random text. Now if there are heading tags, it’s easier to differentiate between body text and headings. Lots of the browsers don’t have full CSS support for mobile yet.

    Great post — I think you’ve hit the mark with what every designer has done :P

  • Hmm, is it a trend way back when to use mostly blank DIV tags for headings and whatnot? I’ve seen a few around who do the same.

  • I used to be exactly the same, everything would be in DIV tags, especially my titles. I’m really glad I weaned off it because it just makes things a lot quicker and easier to recycle the raw HTML coding :)

  • It’s a good post, isn’t it?

    You hit it right on the head — becoming div-happy became more of a liability. Plus it does work out to having a bit more CSS code that needed, since divs are quite semantically blank, and thus are devoid of style (which should be). I’d like bigger test and boldface, but I’d have to manually code that in.

  • I went through the same sort of process with headings and stuff. I actually used to do something very similar (don’t worry I wasn’t copying you. I don’t think I even knew anything about you when I started doing that). I actually wouldn’t even use the P tag. Everything was in Div tags. It did start to get a bit ridiculous after a while. It was becoming quite a pain in the but to edit. I think I started moving to actually using the Header tags and the P tags when I started using WordPress and started making my own WP Themes. I carried it over to my sites that were not running with WordPress too. It is definitely nicer to look at when you’re editing code. It make a huge difference!!

    That post you linked to really was quite interesting to read!