Question

Well, I keep putting semantic information about what an element means for the page logically in the class attribute

<li class="phone-number">555-5555</li>

It seems to work for this dual purpose of hanging semantic information and a pointer to how to style it.

I’m not sure if this is the best idea, I’m trying to see if others have other ways of doing it.

I also started to use a hidden input:

<li>555-5555 <input class="semantics" type="hidden" value="phone-number" /></li>

inside an element, so with jQuery, I can retrieve additional information about the element using

li.find( '.semantics' ).val()

To get an element’s semantics from JavaScript

Answer 1

I hang my semantics by manuals and examples at microformats.org. And what about styling – you can use multiple classes for html elements.
In jQuery you can use $('.phone-number').html() for your first example.