This is a very important question, I think. It's central to digitization of linguistic materials on the web. I've been working on some (open source) software tools for doing this sort of thing for a while now, and while it's in too much of a messy state to be of immediate use to you, I hope it's okay if I write at some length about the approach to marking up glosses that I've found most useful, after a lot of experimentation.
I've found that the most important thing to get right in marking up glosses is to make sure that the structure makes sense. Usually, the goal of glossing is to annotate words (and sometimes morphemes) with translations for the semantics and labels for the grammatical categories. So let's take a simple example Spanish hablo as in Yo hablo español. This might be glossed:
yo habl-o español
I speak-1sg.PRES Spanish
Note that there lots of variations of how one might gloss this sentence, depending on the linguistic topic at hand and the level of specificity. For instance, there might be a citation tier, an orthographic tier, a phonetic tier, a morphological tier, and a free translation:
(1) Snifty 2012
Yo hablo español.
jo ˈaβl-o espaˈɲol
I speak-1sg.PRES Spanish
"I speak Spanish."
Some linguists work with far more tiers -- multiple orthographies, tone, whatever. But for the purposes of discussion let's stick with something simple -- morphologically delimited orthography, morphological analysis, and a free translation.
Now the first thought in my mind when I set out to start digitizing such thing was "well, it's interlinear glossing, so I'm going to be inter-calating lines." So, something like:
<p class=sentence lang=es>yo habl-o español</p>
<p class=morphological>I speak-1sg.PRES Spanish</p>
<p class=free lang=en>I speak Spanish.</p>
This seems reasonable enough at first. (And in fact some online projects have used quite a similar form of markup, check out the source of this Gothic text.) But there are difficulties in glossing if we get beyond a short, simple example sentence. The most glaring problem is that things don't line up right. What if the example sentence isn't Yo hablo español, but rather Qhichwa Simi Hamut'ana Kuraq Sunturtaq ninmi, huklla simi, Qusqu llaqtap rimayninmi huklla allin qhichwa simi, nispa.
The fact of the matter is that things will get ugly fast. Consider:
- What do we do to make sure words and their tiered annotations align vertically across the various lines?
- How do we handle line wraps?
One horrid thought was to use tables -- one could argue that a gloss is ''kind of'' tabular, I guess. At least vertical alignment could be handled. So:
<td>yo</td> <td>habl-o</td> <td>español</td>
<td>I</td> <td>speak-1sg.PRES</td> <td>Spanish</td>
<td>I speak Spanish.</td>
All this for a three-word sentence? This is just awful. You have to keep track of which
td corresponds to each of the other
tds in all of the other
trs... and the free translation "row" isn't really a row at all. Imagine trying to set that Runasimi sentence from above... Blech!
And it's this sort of problem that I think motivates the key insight about marking up glosses:
A word and its annotations should be siblings in the markup, and anything above the level of a word should be represented as a list of word-level items.
We can view such a structure, as a nested HTML list:
Although it looks quite weird in this format (especially with this site's default CSS), this is actually, I think, the "right" structure for capturing what's really going on in a so-called interlinear gloss. Here's how markup for that might look:
Now, this might not intuitively look much like a gloss at first blush, at least not visually. But the structure is right. And in fact, with a little CSS, we can render these nested lists in a way that looks exactly like a traditional gloss, and which behaves correctly.
We can't mess with CSS in the posts within this site itself, but you can check out this jsfiddle to see what I'm talking about.
You'll notice that the very same markup of that three-word sentence wraps correctly if we place it inside a wrapper with a fixed width.
There's a lot more that could be said about this topic. Specifically, I haven't answered the OP's question with regard a tool for generating such markup, but I think something along the lines of the nifty tool that Nat put together above could solve the problem.
I think it would be worth having a discussion about more generic tools for editing, saving, searching, and otherwise manipulating and sharing glosses on the web. (I've been trying to wrap my head around backbone.js as a tool to do just this sort of thing, but the learning curve is pretty steep.)