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

I know, its too late to answer the question. But, this could help someone.

Yes! Its totally correct that no tags can overlap in html. I had exact scenario, mentioned as in above question. But, everything has a solution! We can solve this problem using html tag versioning!

The html snippet, mentioned in the above problem can be break like,

<span id="1_1">This is </span><span id="1_2"><span id="2_1"> some text </span></span><span id="2_2"> some other text </span>

Now, you have to add a custom handlers for your mouse hovers. Through handler callbacks, you need to pass span id to JavaScript. In JavaScript controller, you need to preserve a appropriate map of parent id with all child ids ( e.g. for version 1.x; {'1': ['1_1', '1_2', '1_3']} etc ). Now, whenever you hovers a mouse over any span, you would be able to find all of its siblings. Here is the trick! Post this, you just need to add a custom CSS class for all versions. (e.g. if you hovers mouse on id 1_1, all 1_x versions will get highlighted ).

It worked smoothly for me, for all the edge cases.

Answer 2

I understand your problem, and apparently there is no elegant solution. If you only care about the visual result, one solution would be to close and reopen tags properly. Instead of:

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

use something like:

<span class="hl1">This is <span class="hl2"> some text </span></span><span class="hl2"> some other text </span>

if you use just color or background properties for highlight (e.g. using rgba color, to allow for multiple highlighting), this should do it. If you use outline/border then it won't, since you will have also intermediate borders where tags close.

IMHO, a tag or other structure (I see it more like an anchor), that allows overlapping and indicates where it closes would be something to consider for implementation.

Answer 3

This is legal (foo is red; bar is blue; spam is red again as it's nested):

<span style="color: red">foo<span style="color: blue">bar</span>spam</span>

This isn't:

<div style="color: red">foo<span style="color: blue">bar</div>spam</span>

But it may be worth noting that in MediaWiki and some other sanitization engines in blogs etc that is legal, as it converts the above to this:

<div style="color: red">foo<span style="color: blue">bar</span></div>
<span style="color: blue">spam</span>

It could be argued this encourages bad behavior, but not everybody who writes a blog is as technical as the people like us who use stack overflow (posting as community wiki as this will probably get voted down :-P)

Answer 4

No.

When we hit the first closing /span it is ambiguous which of the two opening span's you want to close.

Most people, and a computer, since it is the only legal option, will conclude you intended to close the latter span. But considering the additional context of your question I suspect you actually intended to close the former span; which is not 'legal'.

The people correcting you with "you meant nested, not overlapping" are making the same deduction; you couldn't have mean 'overlapping' because that would be illegal. I think you did indeed mean 'overlapping', but that's ok, your secret is safe with me.

Answer 5

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>

Answer 6

The content of a SPAN element is allowed to contain any "inline" element. SPAN is one of these "inline" elements. See the DTD declaration for the SPAN element for more details.

Answer 7

Yeah, that is legal. You might do that to specify a different style for the outer and inner spans (if you were to specify a class or style, etc.).

BTW - The more common term for this is "nesting" not "overlapping."