How can I distinguish between overlapping segments of text using HTML?

Question

Easy question, it is valid to have overlapping spans in html?

Example:

<span id="1">This is <span id="2"> some text </span> some other text </span>
                                              ^                        ^
                                            End1                     End2

Edit:

I see now that the spans closing tag would be ambiguous about which one it is closing, and that first </span> would close span id = 2, not 1 like I intended.

My problem is, I have a block of text which I'm trying to highlight based on what the mouse hovers over. This block of text is composed of sections, some of which "overlap" eachother. I'm trying to use some jQuery and HTML to present this document so when I hover over the sections, the appropriate one will be highlighted.

So, in my example above, the first span is meant to be ended with the first span close tag, and the second span is meant to be ended to with the second span close tag. This is because of the semantics of my document, these are two overlapping segments.

I want it so when I hover to the left, it will only highlight up to span id = 1 and the first span close, if I hover between the two "overlapping" spans, it will highlight both of them, and if I hover to the right, it will highlight from span id=2 to the last span close.

However, I'm starting to think this isn't possible. Is there any way I can distinguish segments of text in HTML that allows overlapping? So my jQuery script that highlights when I hover over different spans will highlight the correct portions.

Should I alternate between div's and spans? Would that disambiguate what I'm closing then and allow me the do the proper highlighting with my jQuery hover script? I'm wondering about more than 2 segments overlapping now. Sigh, I wish I could just be explicate about what I'm closing.

Answer 1

No tags can overlap in HTML - they must be properly nested. The HTML you have posted is valid, but may not semantically be what you are expecting. A </span> is going to terminate the previous <span> in the same scope. You haven't identified which <span> you are expecting to be closed with each </span>

<span id="span1">This is <span id="span2"> some text </span> (ends span2) </span> (ends span1)

This would certainly make a big difference in this case:

<span>This is <span> some text </span> and more text </span>