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.

Popular Pages

  1. Fast rounded corners in Photoshop (7423 recent visits)
  2. PHP – passing variables across pages (2558 recent visits)
  3. JavaScript set selected on load (2413 recent visits)
  4. Removing all child nodes from an element (1828 recent visits)
  5. Firefox 3 smart address bar: wildcard search (1755 recent visits)
  6. iPod songs out of order? (1314 recent visits)
  7. Britney - Everytime piano tab (1137 recent visits)
  8. MySQL LEFT JOIN syntax (884 recent visits)
  9. Firefox 3 smart address bar: wildcard search (722 recent visits)
  10. Date difference in MySQL (651 recent visits)

Similar Entries

Stats

4 unique visits since June 2008

Syndicate

Advertisements