Where do you hang your semantic information, html?

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.

Answer 2

1. Either you try XML, and use for example XSLT for the presentation,
2. or HTML with a custom DTD
3. or HTML 5 and the data-attribute (3.2.1 Semantics)

Answer 3

That would depend on the semantics itself... IDs and classes would normally suffice for this purposes.

But adding markup such as hidden fields for this purpose sounds like a terrible idea to me.

Maybe if you shared your actual needs we could share a better way to do it.