How can I distinguish overlapping segments of text using HTML?

Question

Easy question, is it permissible to have overlapping gaps in html?

Example:

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

Edit:

Now I see that the closing closing tag will be ambiguous, about which it closes, and that the first </span> will close span id = 2, not 1, as I expected.

My problem is that I have a block of text that I am trying to select based on what the mouse is over. This block of text consists of sections, some of which "overlap" with each other. I am trying to use some jQuery and HTML to represent this document, so when I hover over sections, the corresponding one will be highlighted.

So, in my example above, the first interval should end with the first range close tag, and the second range should end with the second range close tag. This is due to the semantics of my document, these are two overlapping segments.

I want it to be when I was pointing to the left, it will stand out only until span id = 1 and the first close, if I am between two "overlapping" spans, it will highlight both of them, and if I'm on the right, it will highlight from span id = 2 until the last close.

However, I am starting to think that this is impossible. Is there a way to highlight text segments in HTML that allow overlapping? Thus, my jQuery script, which stands out when you hover over different intervals, will highlight the correct portions.

Should I alternate div and span? Does it eliminate what I'm closing and let me make the correct selection using jQuery hover script? I'm curious that now more than two segments overlap. Sigh, I'm sorry I can't just explain what I'm closing.

Answer 1

No tags can overlap in HTML - they must be properly nested. The HTML you posted is valid, but cannot semantically be what you expect. A </span> is about to abort the previous <span> in the same area. You have not determined which <span> you expect to close with each </span>

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

In this case, this will certainly play a big role:

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

Answer 2

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

Answer 3

Yes, it is legal. You can do this to specify a different style for the outer and inner spaces (if you must specify a class or style, etc.).

BTW - The more common term for this is nesting, not overlap.

Answer 4

This is legal ( foo red, bar blue, spam red again, as it is nested):

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

Is not:

 <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 blog sanitation mechanisms, etc. this is legal as it converts the above:

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

It can be argued that this contributes to bad behavior, but not everyone who writes a blog is as technical as people like us who use stack overflow (posting as a community wiki, as this is likely to be rejected: -P)

Answer 5

I know its too late to answer the question. But it can help someone.

Yes! Its completely correct that no tags can overlap in html. I had the exact scenario mentioned above in the question. But we have a solution! We can solve this problem using html versioning!

The html snippet mentioned in the above problem can be broken as

 <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 need to add custom handlers to freeze the mouse. Through handler callbacks, you need to pass the span identifier to JavaScript. In the JavaScript controller, you need to save the corresponding parent id card with all child ids (for example, for version 1.x; {'1': ['1_1', '1_2', '1_3']} , etc.). Now, whenever you hover over any gap, you can find all your brothers and sisters. Here is the trick! Put this, you just need to add your own CSS class for all versions. (for example, if you hover over id 1_1 , all 1_x versions will be highlighted).

It worked smoothly for me, for all cross cases.

Answer 6

Not.

When we click on the first closing / interval, it is ambiguous which of the two opening intervals you want to close.

Most people and the computer, since this is the only legal option, will conclude that you intend to close the last interval. But, given the additional context of your question, I suspect that you really intended to close the previous span; which is not "legal".

The people correcting you with "you meant nested, not overlapping," made the same conclusion; you could not mean "overlap" because it would be illegal. I think you really meant "overlap", but that's fine, your secret is safe with me.

Answer 7

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

 <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 only color or background properties for selection (for example, using the rgba color to allow multiple selection), this should do it. If you use a path / border, this will not be, since you will also have intermediate borders where the tags are closed.

IMHO, a tag or other structure (I see it rather as a binding) that allows you to overlap and indicates where it closes, there will be something that needs to be considered for implementation.