Question

I have the following HTML

some text [selected HTML] more text

And I want to wrap the [selected HTML] part with a marker element so a) I can apply some markup (color it lightblue) and b) so I can find it with jQuery and C) so I can mark it for the server when I send all HTML to the server. How could I do that without changing how the page looks?

If I use a DIV element, that would create a block element which I do definitely not want if the arbitrary HTML is just text.

some text 
<div>[selected HTML which is text]</div>
more text

If I use a SPAN element (even with style='display:inline-block'), then I would assume that the arbitrary HTML is inline, which I cannot assume. Wrapping a SPAN around a DIV is invalid, no?

some text 
<span style='inline-block;'>[selected HTML with <div>]</span>
more text

Is there anything that I can use that simply ‘marks’ the HTML but does not create a block or inline element around it?

Answer 1

There is an element that “simply ‘marks’ the HTML but does not create a block or inline element around it”, namely the ins element. Syntactically, the ins and del elements “may serve as either block-level or inline elements (but not both). They may contain one or more words within a paragraph or contain one or more block-level elements such as paragraphs, lists and tables”.

In principle, ins denotes content that has been “inserted […] with respect to a different version of a document”. But I don’t think any software takes this seriously, except in the sense that modern browsers generally underline the content by default. But such behavior (which is encouraged in the CSS 2.1 spec and the HTML5 drafts) can be overridden, with the usual CSS caveats, rather simply:

ins { text-decoration: none; }