Ignoring Tags in HTML, can it be done?

Question

Im making a small webpage, a tutorial on HTML for my classmates. However, I find it very annoying that the example code gets interpreted by the browser.

Is there any way for, for example, this to stay unformatted, and show up as text in the browser: with the tags intact?

<ul>
<li>This is an example</li>
</ul>

Answer 1

Thomas how about this one?
https://code.sololearn.com/W1gOde1sjWVh/?ref=app

Just add class in the div and DONE!

Answer 2

You will need to replace all ‘<‘s with ‘&lt;’, the HTML less than character entity.
Or, you could use the CSS in this code to help you: https://code.sololearn.com/W2UPaoO0GCSG/?ref=app
Good luck with your website!

Answer 3

Thomas I don’t believe so, unfortunately. BTW, I’m working on a syntax highlighter which could make your code look fancier!

Answer 4

Thomas But, with that one, it counts that as HTML as well.
For example, if you were explaining that you can use both <br> and <br/>, the <br/> would show only as <br>. Same with the input tag: <input/> would show as <input>. Also, If you’re showing how to use the <style> element to use CSS in your code, the styling will apply, instead of just showing the text. Same with the <script> element, the JavaScript code will evaluate. I would recommend my option, because mine has no flaws while the other one does.

Answer 5

You can use JS to do this. The innerText can do this.
See this:
https://code.sololearn.com/Wm9F278364fS/?ref=app

Answer 6

You can wrap the text in span tags.

Answer 7

Kartik Krishnan, your solution involves me manually typing in each code that I want to include, into the JS itself which is difficult in the long run. If there was a way to use the JS to find and replace all '<'s in a div with '&lt:', then itll be better👍🏼

I think Rowsej's solution is the most sustainable in the long run

Answer 8

Kartik Krishnan Yeessss!!! Thats what Ive been looking for🔥🔥🔥

Answer 9

Thank everyone for helping me and suggesting solutions to this problem😌😁☕ I really appreciate it🔥

Answer 10

Werunga Sinachie John See this
https://code.sololearn.com/W1gOde1sjWVh/?ref=app

Answer 11

Use comment <!-- -->

Answer 12

Sanjay Kamath, the span tags are placeholders for other formatting.

If I put <b>hello</b> between two spans, itll still be bold and not show the tags

Answer 13

Thomas what about my solution?

Answer 14

Rowsej Hmm your right🤔 problem is your code is in a tag, while his is in a div, which is what I like more.

Is it possible to alter your code to work with a div-class like Kartik Krishnan? Ill look into it myself as well

Answer 15

Rowsej CSS does not apply. See the updated one.

Answer 16

Thomas Glad I could help. 😄

Answer 17

Kartik Krishnan, I think Rowsej is talking about the actual style tag, the one you put into the head-section. Ill check out to see if it applies as well

It does not, which makes it valid👍🏼

Answer 18

Thomas Style tag works too. See updated. 1st one displays while other one executes

Answer 19

Kartik Krishnan Thanks, so far your solution works the best then

Answer 20

And in case you need indentation i.e. spacing too, use white-space: pre-wrap for that class in CSS.
https://code.sololearn.com/W1gOde1sjWVh/?ref=app