CSS class, or HTML tag? Oct29 '04

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:

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?

Categories: CSS , Markup , Semantics

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info

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 ... Read more.

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 ... Read more.

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. Whil ... Read more.

I suppose what I'm really looking for is a "list header," much like a table header. The table header would be <th>. So. ... Read more.

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Contact Matt

Similar Entries

Stats

14 unique visits since August 2008

Syndicate

Advertisements