CODEWITHSUNDEEP
jquerysemanticssemantic-markup
tkrajcar
tkrajcar

Reputation: 1712

HTML/jQuery: Semantically tagging glossary-enabled terms in body copy

All,

I'm working on adding a glossary to an existing site. I'm planning to set up individual .html fragments with individual definitions, then use a jQuery Tooltip plugin attached to individual terms in the copy that will pull the .html fragment and render it.

This avoids having to pre-load many definitions into each page's HTML (I don't have a server-side dynamic language at my disposal - long story - so this is the best way I've thought of to do this).

My initial thought is to use <dt> tags around terms that have definitions, and then have jQuery attach the tooltip to each term. So my markup would remain very clean and simple:

<p>Lorem ipsum dolor <dt>amet</dt></p>

This is nice because I am not using the dt/dl/dd tags anywhere else on the site, nor do I plan to.

Is this a reasonable solution? Or is it incorrect to use a <dt> when it is not inside a <dl>?

Upvotes: 1

Views: 448

Answers (2)

MikeM
MikeM

Reputation: 27405

If you going for semantics <dt> should be contained in a <dl> per the W3C. Maybe use a regular span tag with a good class name like <span class="defineable">[term]</span>

Upvotes: 0

Peter Olson
Peter Olson

Reputation: 142939

That is an acceptable solution, although it is not technically valid HTML to have, as you said, a dt inside a dl. If you need it to be valid HTML, use the DFN tag.

Upvotes: 1

Related Questions