Is using partial HTML comment in noscript to hide content when javascript is disable, guarantee to work everywhere?

Question

I want my website to work on text-based browsers like lynx

There's some part of the HTML that are useless in it like the profile photo

I tried the most upvoted solution put here Is there a HTML opposite to <noscript>?

which is

<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

However Lynx does not hide it

What I found to work is doing this

<body>
    <noscript> <!--  </noscript>
         <img src="foobar.png">
    <noscript> -->  </noscript>
</body>

This works and it seems to work on all browsers I have tested, i.e the image is hidden when javascript is disabled, and shown otherwise.

However I would like to know if it is a documented behaviour in HTML5 parser or if it's just an edge case that everybody has implemented the same way ?

Kaiido · Accepted Answer · 2023-02-10T09:18:10.633

It's guaranteed to work in every User Agent that does respect the HTML parsing rules, yes.

If you're ready to dive into this wonderful machinery...

Assuming the scripting flag is enabled, and we already processed the <body> tag.

The parser is in the "in body" insertion mode, and the tokenizer in the data state.
The <noscript> tag is emitted [text-fragment link],
We enter the generic raw text parsing algorithm.
From there we switch the tokenizer to the RAWTEXT state and go to the "text" insertion mode.
The tokenizer sees the character < and switches to the RAWTEXT less-than sign state.
It finds a ! character and goes back to the RAWTEXT state while emitting this character to the parser which just inserts it.
It continues processing the input the same way until it finds the next < character.
This time it's followed by the / character and thus enters the RAWTEXT end tag open state.
Then the next sequence is ASCII alpha, it goes to the RAWTEXT end tag name state.
It consumes all of noscript and finds the > character.
Our current end tag (</noscript>) is an appropriate end tag token.
The tokenizer switches back to the data state and emits the current end tag.
The parser (still in the "text" insertion mode) [text-fragment link] goes past the current node and switches back to the "in body" insertion mode.
From there it will treat the rest normally, producing an <img> self-closing tag with all its attributes, until it meets the next <noscript> tag, and pushes the --> sequence in it as text.

If the scripting flag was disabled though,

When the first <noscript> tag is met, we just insert an ordinary element out of it.
We are still in the "in body" insertion mode and the tokenizer is still in the data state.
The < character leads the tokenizer to the tag open state.
The ! one, to the markup declaration state.
And the next two --, to the comment state.
From there everything until the next --> sequence will be part of the comment token that will get emitted to the parser and thus treated as text.
The parser inserts the comment
It then gets the closing </noscript> token and inserts the current node, with the comment inside.

Thanks a lot for the detailled and documented answers , so will keep using that trick to make my browsers lynx compatible ^^' — allan.simon, Feb 10 '23 at 17:45

Is using partial HTML comment in noscript to hide content when javascript is disable, guarantee to work everywhere?

1 Answers1