CSS class, or HTML tag?

October 29, 2004 / Filed under: Semantics, CSS, Markup

I’ve come across this situation many times. Let’s say you have a list of things to display, which is common on every web page.

For this example, I will list my web site copyright, and general information:

  • matthom
  • http://www.matthom.com/
  • Established November 2001
  • Copyright 2004 matthom
  • Main ingredients: CSS, XHTML, PHP, MySQL

The markup for that is as such:

<ul>
<li>matthom</li>
<li>http://www.matthom.com/</li>
<li>Established November 2001</li>
<li>Copyright 2004 matthom</li>
<li>Main ingredients: CSS, XHTML, PHP, MySQL</li>
</ul>

This is a nice, unordered list, with each piece of information on separate lines. However, the very first item (matthom) should be bold, or enlarged. In a sense, it is the "header" of the entire list.

To make that first item stand out, I could do one of two things.

Create a CSS class that makes the text bold and enlarged, and apply that class to only the first list item:

<ul>
<li class="bold large">matthom</li>
<li>http://www.matthom.com/</li>
<li>Established November 2001</li>
<li>Copyright 2004 matthom</li>
<li>Main ingredients: CSS, XHTML, PHP, MySQL</li>
</ul>

Or... take the first list item out completely, and replace it with <h4> tags:

<h4>matthom</h4>

<ul>
<li>http://www.matthom.com/</li>
<li>Established November 2001</li>
<li>Copyright 2004 matthom</li>
<li>Main ingredients: CSS, XHTML, PHP, MySQL</li>
</ul>

(For the sake of this example, I’d be using <h4> tags, but any header tags (<h1>, <h2>, etc.) would suffice.)

My question is... What’s more semantically correct – using a class, or a header tag?

Comments/Mentions

# Joshua Street at 10/29/2004 5:43 pm cst

DEFINITELY HTML tags!

I'm using a User Agent which doesn't support styles (or, I've chosen to disable them, or something). I load your website, and what would have used to have been a header displays like any other normal text.

If that's acceptable, then you shouldn't have been using headers to start with (because that would mean they were never intended to function as headers, but instead as simple styling devices for text with no STRUCTURAL meaning -- what semantics is all about).

So, consider the semantics of header tags (they're designed to create structure in a document, as with all headers), then consider what a website would look like (and structure like) if styles went and jumped overboard, or the website was being read aloud by a screen reader.

Additionally, there're search engines to consider: content in headers (within reason) is given greater weight than normal text -- if your "headers" aren't semantically headers, and just styled text, then search engines (which don't care about style sheets!) aren't going to index your content as well as they could, and your ranking will reflect poorly because of that...

Josh.

# Matthom at 10/30/2004 6:43 am cst

Josh, I agree with your ideas.

But, something bothers me when I have a GROUP of lists, and I use HTML header tags for each. I just don't see how - semantically speaking - each header tag applies DIRECTLY to each list.

It almost makes more sense to include each header WITHIN each list, but that is not possible with header tags.

Don't get me wrong. All your points are correct, and they make sense. I'm just kind of curious, is all.

# Josh at 10/30/2004 8:36 pm cst

Okay, fair enough... I see your point. I think you're wanting to be able to tangibly LINK elements, like using label tags for form controls. Whilst this is good where it's applicable, think about your webpage as though it were a text document (because, more often than not, that's what it is)

TITLE
Heading 1
Heading 1.1
 Heading 1.1.1
  List goes here.
Heading 2, etc.

Logical structure exists, and the reader may safely assume (unless the list has a legend or caption below it directly associating it with something, in which case they know) that the list falls under the content section 1.1.1

I see what you want (I kinda do, too!), but there aren't really facilities to deal with it (so far as I'm aware) in our current markup. At any rate, it's not 100% necessary, given logical document flow would dictate a connection, anyway.

My $AU0.02 ;)

# Matthom at 10/31/2004 5:05 am cst

I suppose what I'm really looking for is a "list header," much like a table header.

The table header would be <th>. So... I guess I'm looking for <lh>, which obviously doesn't exist.

You're right about the document flow. The headers would dictate the next item in the document, and that's natural for the reader/viewer.