It’s the browser’s panic response coming into play. It sees the <figure> as something that cannot go inside a <pre> tag, so it shatters the tag; meaning you’ve now got an orphaned <pre> at the top, and an orphaned </pre> at the bottom, so it fills in the missing bits as best it can to form a complete HTML; <pre></pre> and <pre> </pre> (why it injects a NBSP when inserting a open tag… shrug)
There may be some confusion on the output expected. If what’s needed is a section of html to be displayed on the page *** without actually rendering the html ***, then the <code> tag will not do the trick. It will output the html, and the browser will render it, leaving just the paragraphs and what-not that the html has. If the OP actually wants to see html *** tags *** showing up on his browser, then I don’t know of an html element that supports this. If it were me I’d push the contents of that element through php’s htmlspecialchars() function before sticking it in the code or pre tag, and then knowing the next question will be about the newlines, it probably also needs to be passed through nl2br() to put a <br> at the end of each line.
In general yes, it looks like <code> is a bit like a <span> element that way, whereas <pre> really does mean pre-formatted in that it’s not going to do any formatting on top of whatever you give it (aside from the fact that it still parses it as html).
I don’t see how xml would help anything here by the way. If you have access to php I’d recommend the solution I just gave above.
Well, I just tried, primarily for the sake of learning and experience, if not adventure, to invent a new tag there: <newpre></newpre>
and I gave it the exact same CSS directives that I gave for <pre></pre> tags.
Alas, it also, didn’t give me the expected result, but at least this time, after saving the webpage, the processed code didn’t break, it stayed the same in the source code of the webpage:
<img src="img.jpg" alt="Some alternative text">
Some text under the image
But, however nice is the fact that the HTML wasn’t postprocessed into being broken this time – the problem of not getting plain text persists so it’s not really a solution and I have to step back from it.
What should I do in the end?
How could I finally show <figure></figure> data as plain text, but also in a multilined fashion?
That’s what I thought in my sub consciousness – it acts like a <span> tag.
I didn’t manage to figure out what that solution is.
If you can still try to edit the above reply, adding some line breaks, markdown, etc, please do, but if you can’t please consider to publish a new general reply below with more line breaks, markdown, etc, explaining in a more stepped way what are you suggesting that me, or anyone else in a similar situation, would do.
A stepped approach like: Step A, step B, step C … Would help a lot.
To just show a frame of plain text in the middle of an HTML document, and when I say “plain text” that should indeed include block-level elements" which is what <figure> is, but just as plain text as well, like any other plain text.
So, yeah, that’s my goal here, to have just a multilined frame/block/chunk/piece/segment of plain text, in between all the regular HTML.
And yes, I want the HTML in my pre tags to be rendered as-is (so the browser displays the actual code, like the code blocks here).
It’ll very likely never happen. That is not the point of <pre>, the point of <pre> is to mark text as having significant whitespace so the browser should not perform the normal white-space collapse function.
There used to be a tag that does what you want, <xmp>. It probably still works, but has been deprecated and should not be used. The proper way to display HTML code is to escape the tags. Usually whatever software you are using would do this automatically for you (like for the code blocks here) but if you’re assembling things yourself then it’s up to you to perform that escaping.